Use CommandMenu and SideMenu in NavBar.astro (#112)

* Import `CommandMenu` and `SideMenu` in `NavBar`, use name instead of astro logo in `NavBar`

* Use w-dvw to fix  layout shift when opening `CommandMenu`

* set `h-9` to avoid vertical layout shift on logo h1

* `package.json` - update preview script to build then preview

* Set loop prop on `CommandPrimitive` so arrow keys wrap around list

package.json

@@ -7,7 +7,7 @@
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
-    "preview": "astro preview",
+    "preview": "astro build && astro preview",
     "check": "astro check",
     "astro": "astro",
     "release": "semantic-release",
@@ -58,4 +58,4 @@
     "type-coverage": "^2.27.1",
     "wrangler": "^3.34.2"
   }
-}
+}

src/components/NavBar.astro

@@ -4,6 +4,8 @@ import DropdownMenu from './DropdownMenu.astro';
 import ThemeToggle from './ThemeToggle.astro';
 import ThemeSwitcher from './ThemeSwitcher.astro';
 import { Icon } from 'astro-icon/components';
+import { CommandMenu } from '@components/CommandMenu';
+import { SideMenu } from '@components/SideMenu';
 import type { HTMLAttributes } from 'astro/types';
 
 type Props = HTMLAttributes<'div'>;
@@ -12,29 +14,26 @@ const { ...attrs } = Astro.props;
 ---
 
 <div
-  class="navbar-container sticky top-0 z-10 mb-8 w-full border-b bg-background border-border"
+  class="navbar-container sticky top-0 z-10 mb-8 w-full border-b border-border bg-background"
   {...attrs}>
   <div
     class="h-1 w-full bg-gradient-to-r from-accent-300 via-accent-500 to-accent-400">
   </div>
   <div
     class="button-container flex items-center justify-between px-4 py-2 text-dark dark:text-light sm:px-6 md:px-10 xl:px-14">
-    <a href="/" aria-label="home button">
-      <Icon
-        name="astroLogo"
-        width={100}
-        height={25}
-        class="hidden opacity-80 md:block"
-      />
-      <Icon
-        name="astroLogoSmall"
-        size={28}
-        class="block opacity-80 md:hidden"
-      />
-    </a>
-    <div class="button-theme-container items-center flex gap-1">
+    <span class="flex items-center">
+      <a href="/" aria-label="home button" class="mr-4">
+        <h1
+          class="logo flex items-center gap-x-2.5 text-xl font-bold text-foreground dark:text-muted-light h-9">
+          <Icon name="shadlogo" size={20} />
+          bassim
+        </h1>
+      </a>
+      <CommandMenu client:load />
+    </span>
+    <div class="button-theme-container flex items-center gap-1">
       <div class="gap-1 text-[15px] sm:flex">
-        <div class="hidden gap-1 sm:flex items-center">
+        <div class="hidden items-center gap-1 lg:flex">
           <Button name="Home" link="/" tabindex="-1" />
           <Button name="About" link="/about" tabindex="-1" />
           <Button name="Blog" link="/blog" tabindex="-1" />
@@ -52,23 +51,10 @@ const { ...attrs } = Astro.props;
         </div>
         <ThemeSwitcher />
       </div>
-      <div class="flex sm:hidden">
-        <DropdownMenu
-          name="hamburger"
-          links={[
-            { name: 'Home', url: '/' },
-            { name: 'About', url: '/about' },
-            { name: 'Blog', url: '/blog' },
-            { name: 'Minimal Typography', url: '/designProject' },
-            { name: 'Old Flask Site', url: '/flaskSite' },
-            { name: 'GPT Chat', url: '/gpt' },
-            { name: 'React + shadcn/ui', url: '/react' },
-          ]}
-          showCaret={false}
-          icon={true}
-        />
-      </div>
       <ThemeToggle />
+      <div class="flex lg:hidden">
+        <SideMenu client:load />
+      </div>
     </div>
   </div>
 </div>

src/components/ui/command.tsx

@@ -11,6 +11,7 @@ const Command = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 >(({ className, ...props }, ref) => (
   <CommandPrimitive
+    loop
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",

src/layouts/BaseLayout.astro

@@ -33,7 +33,7 @@ const { description, title } = Astro.props;
     </script>
     <slot name="head" />
   </head>
-  <body class="flex min-h-screen flex-col items-center">
+  <body class="flex min-h-screen w-dvw flex-col items-center">
     <NavBar />
     <main class="flex-grow">
       <slot />