From 1b6bc6c4b5f598c1515e155fe85a0e4f6f0f41ae Mon Sep 17 00:00:00 2001
From: Bassim Shahidy <122117267+AVGVSTVS96@users.noreply.github.com>
Date: Sun, 31 Mar 2024 02:14:26 -0400
Subject: [PATCH] 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                  |  4 +--
 src/components/NavBar.astro   | 50 +++++++++++++----------------------
 src/components/ui/command.tsx |  1 +
 src/layouts/BaseLayout.astro  |  2 +-
 4 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 4d82f352..01190c8e 100644
--- a/package.json
+++ b/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"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 3bcbd450..6d6a2c06 100644
--- a/src/components/NavBar.astro
+++ b/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>
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 959a239b..08c4405f 100644
--- a/src/components/ui/command.tsx
+++ b/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",
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 32dbe98d..5c9cb588 100644
--- a/src/layouts/BaseLayout.astro
+++ b/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 />