Refactor navigation menu

sgcarstrends · Aug 19, 2024 · a3e9c6b · a3e9c6b
1 parent ec331a3
commit a3e9c6b
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 130 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,6 +1,7 @@
 import type { ElementType } from "react";
 import Link from "next/link";
 import { Facebook, Github, Instagram, Linkedin, Twitter } from "lucide-react";
+import { BrandLogo } from "@/components/BrandLogo";
 import { Separator } from "@/components/ui/separator";
 
 interface FooterLink {
@@ -82,7 +83,10 @@ export const Footer = () => {
     <footer className="bg-gray-100">
       <div className="container mx-auto px-4 py-8">
         <div className="flex flex-col gap-y-8">
-          <div className="grid grid-cols-2 gap-8 md:grid-cols-3">
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
+            <div>
+              <BrandLogo />
+            </div>
             {footerSections.map(({ title, links }) => (
               <FooterSection key={title} title={title} links={links} />
             ))}

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -1,40 +1,10 @@
-import Link from "next/link";
-import { Search, TrendingUp } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { NavMenu } from "@/app/components/NavMenu";
-import { UnreleasedFeature } from "@/components/UnreleasedFeature";
-import { MobileNavMenu } from "@/app/components/MobileNavMenu";
+import { DesktopNavMenu, MobileNavMenu } from "@/app/components/NavMenu";
 
 export const Header = () => {
   return (
     <header className="border-b-2 bg-white">
       <MobileNavMenu />
-      <div className="container hidden items-center justify-between p-4 lg:flex">
-        <nav className="flex items-center gap-x-4">
-          <Link href="/" className="flex items-center gap-x-2">
-            <TrendingUp className="h-4 w-4 text-blue-600 lg:h-8 lg:w-8" />
-            <span className="text-sm font-bold lg:text-xl">
-              <span className="text-black">SGCars</span>
-              <span className="text-blue-600">Trends</span>
-            </span>
-          </Link>
-          <NavMenu />
-        </nav>
-        <UnreleasedFeature>
-          <div className="flex items-center gap-x-4">
-            <div className="relative">
-              <Input
-                type="search"
-                placeholder="Search..."
-                className="border border-gray-300 pl-10 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-                <Search className="h-4 w-4 text-gray-400" />
-              </div>
-            </div>
-          </div>
-        </UnreleasedFeature>
-      </div>
+      <DesktopNavMenu />
     </header>
   );
 };
diff --git a/app/components/MobileNavMenu.tsx b/app/components/MobileNavMenu.tsx
diff --git a/app/components/NavMenu.tsx b/app/components/NavMenu.tsx
@@ -1,9 +1,27 @@
 "use client";
 
 import * as React from "react";
+import { useState } from "react";
 import Link from "next/link";
-import { Battery, Droplet, Fuel, type LucideIcon, Zap } from "lucide-react";
+import {
+  Battery,
+  Droplet,
+  Fuel,
+  type LucideIcon,
+  Menu,
+  Search,
+  Zap,
+} from "lucide-react";
+import { BrandLogo } from "@/components/BrandLogo";
 import { UnreleasedFeature } from "@/components/UnreleasedFeature";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -13,6 +31,8 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
 
 export const NavMenu = () => {
@@ -75,6 +95,105 @@ export const NavMenu = () => {
   );
 };
 
+export const DesktopNavMenu = () => {
+  return (
+    <div className="container hidden items-center justify-between p-4 lg:flex">
+      <nav className="flex items-center gap-x-4">
+        <Link href="/" className="flex items-center gap-x-2">
+          <BrandLogo />
+        </Link>
+        <NavMenu />
+      </nav>
+      <UnreleasedFeature>
+        <div className="flex items-center gap-x-4">
+          <div className="relative">
+            <Input
+              type="search"
+              placeholder="Search..."
+              className="border border-gray-300 pl-10 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              <Search className="h-4 w-4 text-gray-400" />
+            </div>
+          </div>
+        </div>
+      </UnreleasedFeature>
+    </div>
+  );
+};
+
+export const MobileNavMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const links = [
+    { title: "Overview", link: "/cars" },
+    { title: "Petrol Cars", link: "/cars/petrol" },
+    { title: "Hybrid Cars", link: "/cars/hybrid" },
+    { title: "Electric Cars", link: "/cars/electric" },
+    { title: "Diesel Cars", link: "/cars/diesel" },
+  ];
+
+  return (
+    <div className="flex items-center justify-between px-4 py-3 lg:hidden">
+      <Link href="/" className="flex items-center gap-x-2">
+        <BrandLogo />
+      </Link>
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <Menu className="h-6 w-6" />
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-[300px] sm:w-[400px]">
+          <div className="mb-6 flex items-center justify-between">
+            <Link href="/" className="flex items-center gap-x-2">
+              <BrandLogo />
+            </Link>
+          </div>
+          <UnreleasedFeature>
+            <div className="relative mb-6">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-400" />
+              <Input
+                type="search"
+                placeholder="Search cars..."
+                className="rounded-full border-gray-300 py-2 pl-10 pr-4 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+              />
+            </div>
+          </UnreleasedFeature>
+          <ScrollArea>
+            <Accordion type="single" collapsible>
+              <AccordionItem value="cars">
+                <AccordionTrigger>Cars</AccordionTrigger>
+                <AccordionContent>
+                  <nav className="flex flex-col space-y-4">
+                    {links.map(({ title, link }) => (
+                      <Link
+                        key={title}
+                        href={link}
+                        className="text-blue-600 hover:underline"
+                      >
+                        {title}
+                      </Link>
+                    ))}
+                  </nav>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+            <nav className="mt-4 flex flex-col space-y-4">
+              <Link
+                href="/coe/prices"
+                className="text-gray-700 hover:text-blue-600"
+              >
+                COE
+              </Link>
+            </nav>
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+};
+
 const ListItem = React.forwardRef<
   React.ElementRef<"a">,
   React.ComponentPropsWithoutRef<"a"> & {

diff --git a/components/BrandLogo.tsx b/components/BrandLogo.tsx
@@ -0,0 +1,11 @@
+import { TrendingUp } from "lucide-react";
+
+export const BrandLogo = () => (
+  <div className="flex items-center gap-x-2">
+    <TrendingUp className="h-4 w-4 text-blue-600 lg:h-8 lg:w-8" />
+    <span className="text-sm font-bold lg:text-xl">
+      <span className="text-black">SGCars</span>
+      <span className="text-blue-600">Trends</span>
+    </span>
+  </div>
+);