From 91ad9dd5a34a1554cee1fb7e1966383964dae219 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 20 May 2023 23:19:19 +0100
Subject: [PATCH] Add search icon in navigation

---
 src/components/CommandMenu/CommandMenu.tsx | 11 +++++++++++
 src/components/Navigation/Navigation.astro |  7 ++++++-
 src/components/Navigation/navigation.ts    |  6 ++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/CommandMenu/CommandMenu.tsx b/src/components/CommandMenu/CommandMenu.tsx
index 220bfb439..638d577a8 100644
--- a/src/components/CommandMenu/CommandMenu.tsx
+++ b/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;
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index aed4b36d1..8eae92a3f 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/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'>
diff --git a/src/components/Navigation/navigation.ts b/src/components/Navigation/navigation.ts
index 9c565df63..74238bba5 100644
--- a/src/components/Navigation/navigation.ts
+++ b/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();