Refactor mobile nav

sandervspl · Jul 31, 2024 · d231f1b · d231f1b
1 parent 72f044a
commit d231f1b
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 55 deletions.
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -6,10 +6,10 @@ import { Inter } from 'next/font/google';
 
 import { cn } from 'services/cn';
 import { SITE_URL } from 'services/utils';
+import { Navbar } from 'modules/navbar';
 import { SizeIndicator } from 'common/SizeIndicator';
 
 import { Providers } from './Providers';
-import { Navbar } from 'modules/navbar';
 
 type Props = i.NextLayoutProps;
 
@@ -24,7 +24,7 @@ export const metadata: Metadata = {
   manifest: '/manifest.json',
 };
 
-const RootLayout = (props: Props) => {
+const RootLayout = ({ children }: Props) => {
   return (
     <>
       <head>
@@ -39,7 +39,7 @@ const RootLayout = (props: Props) => {
           <Providers>
             <div className="flex flex-col w-full min-h-screen">
               <Navbar />
-              {props.children}
+              {children}
               {process.env.NODE_ENV !== 'production' && <SizeIndicator />}
             </div>
           </Providers>

diff --git a/apps/website/src/components/common/realm-dropdown.tsx b/apps/website/src/components/common/realm-dropdown.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { $path } from 'next-typesafe-url';
+import { Loader2Icon } from 'lucide-react';
 
 import { setAuctionHouseIdCookie } from 'actions/cookie';
 import { useMediaQuery } from 'hooks/use-media-query';
@@ -21,16 +22,24 @@ import { Drawer, DrawerContent, DrawerTrigger } from 'shadcn-ui/drawer';
 import { Popover, PopoverContent, PopoverTrigger } from 'shadcn-ui/popover';
 import { realmDropdownValues } from 'services/realms';
 import type { ItemParam } from 'src/app/item/[...item]/page';
-import { Loader2Icon } from 'lucide-react';
 
-export function RealmDropdown() {
+type Props = {
+  onOpen?: () => void;
+};
+
+export function RealmDropdown({ onOpen }: Props) {
   const { settings } = useSettings();
   const [open, setOpen] = React.useState(false);
   const isDesktop = useMediaQuery('(min-width: 768px)');
 
+  function onOpenChange(isOpen: boolean) {
+    onOpen?.();
+    setOpen(isOpen);
+  }
+
   if (isDesktop) {
     return (
-      <Popover open={open} onOpenChange={setOpen}>
+      <Popover open={open} onOpenChange={onOpenChange}>
         <PopoverTrigger asChild>
           <Button variant="outline" className="w-[150px] justify-start capitalize">
             {settings.realm.replaceAll('-', ' ')} ({settings.region.toUpperCase()})
@@ -44,7 +53,7 @@ export function RealmDropdown() {
   }
 
   return (
-    <Drawer open={open} onOpenChange={setOpen}>
+    <Drawer open={open} onOpenChange={onOpenChange}>
       <DrawerTrigger asChild>
         <Button variant="outline" className="justify-start">
           Realm

diff --git a/...website/src/components/modules/navbar.tsx → ...e/src/components/modules/navbar/index.tsx b/...website/src/components/modules/navbar.tsx → ...e/src/components/modules/navbar/index.tsx
@@ -2,16 +2,14 @@ import Link from 'next/link';
 import { $path } from 'next-typesafe-url';
 import { SignInButton, UserButton, auth } from '@clerk/nextjs';
 import Image from 'next/image';
-import { MenuIcon, XIcon } from 'lucide-react';
 
 import { Button } from 'shadcn-ui/button';
-import * as Drawer from 'park-ui/drawer';
-import { IconButton } from 'park-ui/icon-button';
 import { RealmDropdown } from 'common/realm-dropdown';
 import { ItemSearch } from 'common/item-search';
-
 import IconSvg from 'public/vectors/icon.svg';
 
+import { MobileMenu } from './mobile-menu';
+
 export const Navbar = () => {
   const { userId } = auth();
 
@@ -54,47 +52,3 @@ export const Navbar = () => {
     </header>
   );
 };
-
-export const MobileMenu = (props: Drawer.RootProps & { userId: string | null }) => {
-  return (
-    <Drawer.Root {...props}>
-      <Drawer.Trigger asChild>
-        <IconButton variant="ghost">
-          <MenuIcon />
-        </IconButton>
-      </Drawer.Trigger>
-      <Drawer.Backdrop />
-      <Drawer.Positioner className="right-0">
-        <Drawer.Content>
-          <Drawer.Header className="flex items-center justify-between">
-            <Drawer.Title>Auctionoton</Drawer.Title>
-            <Drawer.CloseTrigger asChild>
-              <IconButton variant="ghost">
-                <XIcon />
-              </IconButton>
-            </Drawer.CloseTrigger>
-          </Drawer.Header>
-          <Drawer.Body className="space-y-4">
-            <RealmDropdown />
-            {props.userId && (
-              <Button asChild variant="outline">
-                <Link href={$path({ route: '/user/dashboard' })}>Dashboard</Link>
-              </Button>
-            )}
-          </Drawer.Body>
-          <Drawer.Footer gap="3">
-            <div className="flex items-center gap-2">
-              {props.userId ? (
-                <UserButton />
-              ) : (
-                <Button asChild variant="outline">
-                  <SignInButton mode="modal" />
-                </Button>
-              )}
-            </div>
-          </Drawer.Footer>
-        </Drawer.Content>
-      </Drawer.Positioner>
-    </Drawer.Root>
-  );
-};
diff --git a/apps/website/src/components/modules/navbar/mobile-menu.tsx b/apps/website/src/components/modules/navbar/mobile-menu.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import * as React from 'react';
+import Link from 'next/link';
+import { MenuIcon, XIcon } from 'lucide-react';
+import { $path } from 'next-typesafe-url';
+import { UserButton, SignInButton } from '@clerk/nextjs';
+
+import * as Drawer from 'park-ui/drawer';
+import { IconButton } from 'park-ui/icon-button';
+import { Button } from 'shadcn-ui/button';
+import { RealmDropdown } from 'common/realm-dropdown';
+
+type Props = Drawer.RootProps & { userId: string | null };
+
+export const MobileMenu = ({ userId, ...props }: Props) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Drawer.Root {...props} open={open} onOpenChange={(details) => setOpen(details.open)}>
+      <Drawer.Trigger asChild>
+        <IconButton variant="ghost">
+          <MenuIcon />
+        </IconButton>
+      </Drawer.Trigger>
+      <Drawer.Backdrop />
+      <Drawer.Positioner className="right-0">
+        <Drawer.Content>
+          <Drawer.Header className="flex items-center justify-between">
+            <Drawer.Title>Auctionoton</Drawer.Title>
+            <Drawer.CloseTrigger asChild>
+              <IconButton variant="ghost">
+                <XIcon />
+              </IconButton>
+            </Drawer.CloseTrigger>
+          </Drawer.Header>
+          <Drawer.Body className="space-y-4">
+            <RealmDropdown onOpen={() => setOpen(false)} />
+            {userId && (
+              <Button asChild variant="outline">
+                <Link href={$path({ route: '/user/dashboard' })} onClick={() => setOpen(false)}>
+                  Dashboard
+                </Link>
+              </Button>
+            )}
+          </Drawer.Body>
+          <Drawer.Footer gap="3">
+            <div className="flex items-center gap-2">
+              {userId ? (
+                <UserButton />
+              ) : (
+                <Button asChild variant="outline">
+                  <SignInButton mode="modal" />
+                </Button>
+              )}
+            </div>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Positioner>
+    </Drawer.Root>
+  );
+};