initial commit

components/sidebar.tsx

@@ -0,0 +1,130 @@
+import { cn } from '@/lib/utils'
+import Link from 'next/link'
+import { useCurrentUser } from '@/hooks/use-current-user'
+import { signOut } from 'next-auth/react'
+import Image from 'next/image'
+import { ModeToggle } from '@/components/mode-toggle'
+import { Logo } from '@/components/logo'
+
+const sidebarPages = [
+  {
+    link: '/',
+    title: 'Home'
+  },
+  {
+    link: '#profile',
+    title: 'Profile'
+  },
+  {
+    link: '#purchases',
+    title: 'Purchases'
+  }
+]
+
+const socials = [
+  {
+    link: 'https://github.com/NizarAbiZaher',
+    title: 'Github'
+  },
+  {
+    link: 'https://www.youtube.com/@NizzyABI',
+    title: 'Youtube'
+  },
+  {
+    link: 'https://twitter.com/NizarAbiZaher',
+    title: 'Twitter'
+  },
+  {
+    link: 'https://www.linkedin.com/in/nizarabizaher/',
+    title: 'Tiktok'
+  },
+  {
+    link: 'https://www.instagram.com/nizarabizaher/',
+    title: 'Instagram'
+  },
+  {
+    link: 'https://discord.gg/nizar',
+    title: 'Discord'
+  }
+]
+
+interface SidebarProps {
+  closeSidebar?: () => void
+}
+
+export const Sidebar = ({ closeSidebar }: SidebarProps) => {
+  const session = useCurrentUser()
+  const Logout = () => {
+    signOut()
+  }
+  return (
+    <div className="flex flex-col justify-between pl-2">
+      <Link href="/" onClick={closeSidebar}>
+        <Logo />
+      </Link>
+      <div className="flex pt-4">
+        <ModeToggle />
+      </div>
+      <div className=" pt-3">
+        <div className="space-y-4">
+          <div className="ml-2">
+            <h1 className="text-xl font-semibold">Main</h1>
+            {sidebarPages.map((page) => (
+              <Link
+                key={page.link}
+                href={page.link}
+                className={cn(
+                  'group flex py-1.5 w-full justify-start font-light cursor-pointer'
+                )}
+                onClick={closeSidebar}
+              >
+                <div className="flex w-full">
+                  <p className="font-normal text-foreground/75">{page.title}</p>
+                </div>
+              </Link>
+            ))}
+          </div>
+          <div className="ml-2">
+            <h1 className="text-xl font-semibold">Socials</h1>
+            {socials.map((page) => (
+              <Link
+                key={page.link}
+                href={page.link}
+                className={cn(
+                  'group flex w-full justify-start font-light cursor-pointer py-1.5'
+                )}
+                onClick={closeSidebar}
+              >
+                <div className="flex w-full">
+                  <p className="font-normal text-foreground/75">{page.title}</p>
+                </div>
+              </Link>
+            ))}
+          </div>
+          {session ? (
+            <Link
+              href="/login"
+              className="group flex py-2 w-full justify-start cursor-pointer rounded ml-2 font-bold text-xl"
+              onClick={() => {
+                Logout()
+                closeSidebar && closeSidebar()
+              }}
+            >
+              Logout
+            </Link>
+          ) : (
+            <Link
+              href="/login"
+              className="group flex pt-2 w-full justify-start font-light cursor-pointer"
+              onClick={closeSidebar}
+            >
+              <div className="flex w-full ml-2 pb-3">
+                <p className="font-semibold ">Sign Up</p>
+              </div>
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}