fix mobile nav

t3-oss · Apr 25, 2023 · 3a197f0 · 3a197f0 · vercel · Apr 25, 2023
1 parent 4800850
commit 3a197f0
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 51 deletions.
diff --git a/docs/src/components/icons.tsx b/docs/src/components/icons.tsx
@@ -75,4 +75,37 @@ export const Icons = {
     </svg>
   ),
   bash: TerminalSquare,
+  menu: (props: LucideProps) => (
+    <svg
+      fill="none"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      {...props}
+    >
+      <g>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M4 6h16"
+        />
+      </g>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M4 12h16"
+      />
+      <g>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M4 18h16"
+        />
+      </g>
+    </svg>
+  ),
 };
diff --git a/docs/src/components/main-nav.tsx b/docs/src/components/main-nav.tsx
@@ -3,7 +3,6 @@
 import * as React from "react";
 import Link from "next/link";
 
-import { siteConfig } from "@/app/site-config";
 import { cn } from "@/lib/cn";
 import { Icons } from "@/components/icons";
 import { usePathname } from "next/navigation";
@@ -22,12 +21,6 @@ export function MainNav(props: { items: NavItem[] }) {
 
   return (
     <div className="flex gap-6 md:gap-10">
-      <Link href="/" className="hidden items-center space-x-2 md:flex">
-        <Icons.logo className="h-6 w-6" />
-        <span className="hidden font-bold text-lg sm:inline-block">
-          {siteConfig.name}
-        </span>
-      </Link>
       {props.items?.length ? (
         <nav className="hidden gap-6 md:flex">
           {props.items?.map(

diff --git a/docs/src/components/mobile-nav.tsx b/docs/src/components/mobile-nav.tsx
@@ -4,20 +4,22 @@ import * as React from "react";
 import Link from "next/link";
 
 import { Button } from "./ui/button";
-import { Icons } from "./icons";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { ScrollArea } from "./ui/scroll-area";
 
 import { ThemeToggle } from "./theme-toggle";
 import { NavItem } from "./main-nav";
-import { siteConfig } from "@/app/site-config";
 import { NestedNavItem } from "./sidebar";
 import { PopoverClose } from "@radix-ui/react-popover";
+import { cn } from "@/lib/cn";
+import { Icons } from "./icons";
+import { usePathname } from "next/navigation";
 
 export function MobileDropdown(props: {
   items: { main: NavItem[]; docs: NestedNavItem[] };
 }) {
   const [isOpen, setIsOpen] = React.useState(false);
+  const pathname = usePathname();
 
   React.useEffect(() => {
     if (isOpen) {
@@ -32,48 +34,36 @@ export function MobileDropdown(props: {
       <PopoverTrigger asChild>
         <Button
           variant="ghost"
-          className="mr-2 px-0 space-x-2 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          className="mr-2 px-0 hamburger space-x-2 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
         >
-          <Icons.logo className="h-6 w-6" />
-          <span className="font-bold text-lg">{siteConfig.name}</span>
+          <Icons.menu className={cn("h-6 w-6", isOpen && "open")} />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="z-40 mt-2 h-[calc(100vh-4rem)] w-screen animate-none rounded-none border-none transition-transform">
-        <ScrollArea className="py-8">
-          <div>
-            {props.items.main.map((item) => (
-              <PopoverClose asChild key={item.href}>
-                <Link
-                  href={item.href ?? ""}
-                  className="flex py-1 text-base font-medium text-muted-foreground transition-colors hover:text-primary"
-                >
-                  {item.title}
-                </Link>
-              </PopoverClose>
-            ))}
-          </div>
-          <div>
-            {props.items.docs.map((item, index) => (
-              <div key={index} className="flex flex-col space-y-3 pt-6">
-                <h4 className="font-bold">{item.title}</h4>
-                {item?.items?.length &&
-                  item.items.map((item) => (
-                    <PopoverClose asChild key={item.href}>
-                      {item.href ? (
-                        <Link
-                          href={item.href}
-                          className="flex py-1 text-base font-medium text-muted-foreground transition-colors hover:text-primary"
-                        >
-                          {item.title}
-                        </Link>
-                      ) : (
-                        item.title
-                      )}
-                    </PopoverClose>
-                  ))}
-              </div>
-            ))}
-          </div>
+      <PopoverContent className="z-40 mt-2 h-[calc(100vh-4rem)] w-screen animate-none rounded-none border-none transition-transform md:hidden">
+        <ScrollArea className="pb-8">
+          {props.items.docs.map((item, index) => (
+            <div key={index} className="flex flex-col space-y-3 pt-6">
+              <h4 className="font-bold">{item.title}</h4>
+              {item?.items?.length &&
+                item.items.map((item) => (
+                  <PopoverClose asChild key={item.href}>
+                    {item.href ? (
+                      <Link
+                        href={item.href}
+                        className={cn(
+                          "flex py-1 text-base font-medium text-muted-foreground transition-colors hover:text-primary",
+                          item.href === pathname && "text-foreground"
+                        )}
+                      >
+                        {item.title}
+                      </Link>
+                    ) : (
+                      item.title
+                    )}
+                  </PopoverClose>
+                ))}
+            </div>
+          ))}
         </ScrollArea>
         <div className="border-t pt-4">
           <ThemeToggle />

diff --git a/docs/src/components/site-header.tsx b/docs/src/components/site-header.tsx
@@ -11,9 +11,13 @@ export function SiteHeader() {
   return (
     <header className="bg-background sticky top-0 z-40 w-full border-b">
       <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-        <MobileDropdown
-          items={{ main: siteConfig.mainNav, docs: siteConfig.sidebarNav }}
-        />
+        <Link href="/" className="items-center space-x-2 flex mr-6">
+          <Icons.logo className="h-6 w-6" />
+          <span className="hidden font-bold text-lg sm:inline-block">
+            {siteConfig.name}
+          </span>
+        </Link>
+
         <MainNav items={siteConfig.mainNav} />
         <div className="flex flex-1 items-center justify-end space-x-4">
           <nav className="flex items-center space-x-1">
@@ -48,6 +52,9 @@ export function SiteHeader() {
               </div>
             </Link> */}
             <ThemeToggle />
+            <MobileDropdown
+              items={{ main: siteConfig.mainNav, docs: siteConfig.sidebarNav }}
+            />
           </nav>
         </div>
       </div>

diff --git a/docs/src/styles/globals.css b/docs/src/styles/globals.css
@@ -78,6 +78,38 @@
 }
 
 @layer components {
+  /* Hamburger menu icon animation */
+
+  .hamburger svg g {
+    @apply origin-center;
+    transition: transform 0.1s ease-in-out;
+  }
+  .hamburger svg path {
+    @apply opacity-100;
+    transition: transform 0.1s ease-in-out 0.1s, opacity 0.1s ease-in-out;
+  }
+  .hamburger svg.open path {
+    transition: transform 0.1s ease-in-out, opacity 0s ease-in-out;
+  }
+  .hamburger svg.open g {
+    transition: transform 0.1s ease-in-out 0.1s;
+  }
+  .hamburger svg.open > path {
+    @apply opacity-0;
+  }
+  .hamburger svg.open > g:nth-of-type(1) {
+    @apply rotate-45;
+  }
+  .hamburger svg.open > g:nth-of-type(1) path {
+    transform: translate3d(0, 6px, 0);
+  }
+  .hamburger svg.open > g:nth-of-type(2) {
+    @apply -rotate-45;
+  }
+  .hamburger svg.open > g:nth-of-type(2) path {
+    transform: translate3d(0, -6px, 0);
+  }
+
   pre > code {
     counter-reset: line;
     padding: unset !important;