From 02e881ee12b1c0aedaf2fc81f72203165566d9a5 Mon Sep 17 00:00:00 2001
From: ladunjexa <110838700+ladunjexa@users.noreply.github.com>
Date: Mon, 29 Apr 2024 01:55:51 +0300
Subject: [PATCH] feat(layout): add `Navbar` component

---
 components/layout/mobile-nav.tsx | 69 ++++++++++++++++++++++++++++++++
 components/layout/navbar.tsx     | 23 ++++++++++-
 2 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 components/layout/mobile-nav.tsx

diff --git a/components/layout/mobile-nav.tsx b/components/layout/mobile-nav.tsx
new file mode 100644
index 0000000..9b74aad
--- /dev/null
+++ b/components/layout/mobile-nav.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import { Sheet, SheetClose, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { sidebarLinks } from "@/constants";
+import { cn } from "@/lib/utils";
+
+type Props = {};
+
+const MobileNav = (props: Props) => {
+  const pathname = usePathname();
+  return (
+    <section className="w-full max-w-[264px]">
+      <Sheet>
+        <SheetTrigger asChild>
+          <Image
+            src={"/icons/hamburger.svg"}
+            width={36}
+            height={36}
+            alt="hamburger icon"
+            className="cursor-pointer sm:hidden"
+          />
+        </SheetTrigger>
+        <SheetContent side="left" className="border-none bg-dark-1">
+          <Link href="/" className="flex items-center gap-1">
+            <Image
+              src={"/icons/logo.svg"}
+              width={32}
+              height={32}
+              alt="Yoom"
+              className="max-sm:size-10"
+            />
+            <p className="text-[26px] font-extrabold text-white">Yoom</p>
+          </Link>
+
+          <div className="flex h-[calc(100vh-72px)] flex-col justify-between overflow-y-auto">
+            <SheetClose asChild>
+              <section className="flex h-full flex-col gap-6 pt-16 text-white">
+                {sidebarLinks.map(link => {
+                  const isActive = pathname === link.route || pathname.startsWith(`${link.route}/`);
+
+                  return (
+                    <SheetClose asChild key={link.route}>
+                      <Link
+                        key={link.label}
+                        href={link.route}
+                        className={cn("flex gap-4 items-center p-4 rounded-lg justify-start", {
+                          "bg-blue-1": isActive,
+                        })}
+                      >
+                        <Image src={link.imgUrl} alt={link.label} width={24} height={24} />
+                        <p className="font-semibold">{link.label}</p>
+                      </Link>
+                    </SheetClose>
+                  );
+                })}
+              </section>
+            </SheetClose>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </section>
+  );
+};
+
+export default MobileNav;
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 3d6f39b..c531a78 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -1,9 +1,30 @@
+import Image from "next/image";
+import Link from "next/link";
 import React from "react";
+import MobileNav from "./mobile-nav";
 
 type Props = {};
 
 const Navbar = (props: Props) => {
-  return <div>Navbar</div>;
+  return (
+    <nav className="flex-between fixed z-50 w-full bg-dark-1 px-6 py-4 lg:px-10">
+      <Link href="/" className="flex items-center gap-1">
+        <Image
+          src={"/icons/logo.svg"}
+          width={32}
+          height={32}
+          alt="Yoom"
+          className="max-sm:size-10"
+        />
+        <p className="text-[26px] font-extrabold text-white max-sm:hidden">Yoom</p>
+      </Link>
+
+      <div className="flex-between gap-5">
+        {/* Clerk Magic */}
+        <MobileNav />
+      </div>
+    </nav>
+  );
 };
 
 export default Navbar;