feat: initiate sidebar feature.

package.json

@@ -16,6 +16,7 @@
     "@prisma/client": "^5.10.2",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",

src/components/sidebar/menu-options.tsx

@@ -12,6 +12,8 @@ import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'
 import { Button } from '../ui/button'
 import { Menu } from 'lucide-react'
 import clsx from 'clsx'
+import { AspectRatio } from '../ui/aspect-ratio'
+import Image from 'next/image'
 
 type Props = {
 
@@ -75,7 +77,15 @@ const MenuOptions = ({
                     }
                 )}
             >
-
+                <div>
+                    <AspectRatio ratio={16 / 5} />
+                    <Image
+                        src={sidebarLogo}
+                        alt="Sidebar Logo"
+                        fill
+                        className="rounded-md object-contain"
+                    />
+                </div>
             </SheetContent>
         </Sheet>
     )

src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

src/lib/db.ts

@@ -1,9 +1,9 @@
-import {PrismaClient}  from '@prisma/client';   
+import { PrismaClient } from '@prisma/client';
 
-declare global{
+declare global {
     var prisma: PrismaClient | undefined
 }
 
 export const db = globalThis.prisma || new PrismaClient()
 
-if(process.env.NODE_ENV !== 'production') globalThis.prisma = db
+if (process.env.NODE_ENV !== 'production') globalThis.prisma = db