Add search icon in navigation

src/components/CommandMenu/CommandMenu.tsx

@@ -61,6 +61,17 @@ export function CommandMenu() {
     setIsActive(false);
   });
 
+  useEffect(() => {
+    function handleToggleTopic(e: any) {
+      setIsActive(true);
+    }
+
+    window.addEventListener(`command.k`, handleToggleTopic);
+    return () => {
+      window.removeEventListener(`command.k`, handleToggleTopic);
+    };
+  }, []);
+
   useEffect(() => {
     if (!isActive || !inputRef.current) {
       return;

src/components/Navigation/Navigation.astro

@@ -7,7 +7,6 @@ import AccountDropdown from './AccountDropdown.astro';
   <nav class='container flex items-center justify-between'>
     <a class='flex items-center text-lg font-medium text-white' href='/' aria-label="roadmap.sh">
       <Icon icon='logo' />
-      <span class='ml-3 hidden md:block'>roadmap.sh</span>
     </a>
 
     <!-- Desktop navigation items -->
@@ -26,6 +25,12 @@ import AccountDropdown from './AccountDropdown.astro';
       <li>
         <a href='/videos' class='hidden lg:inline text-gray-400 hover:text-white'>Videos</a>
       </li>
+      <li>
+        <button data-command-menu class="hidden lg:flex items-center gap-2 text-gray-400 border border-gray-800 rounded-md px-2.5 py-1 text-sm hover:bg-gray-800 hover:cursor-pointer">
+          <!-- <Icon icon='search' class='h-3 w-3' /> -->
+          ⌘ K
+        </span>
+      </li>
     </ul>
     <ul class='hidden h-8 w-[172px] items-center justify-end gap-5 sm:flex'>
       <li data-guest-required class='hidden'>

src/components/Navigation/navigation.ts

@@ -34,6 +34,12 @@ function bindEvents() {
         .querySelector('[data-account-dropdown]')
         ?.classList.toggle('hidden');
     });
+
+  document
+      .querySelector('[data-command-menu]')
+      ?.addEventListener('click', () => {
+        window.dispatchEvent(new CustomEvent('command.k'));
+      });
 }
 
 bindEvents();