feat: add search to navigation, refactor nav items, update icons

src/common/components/organisms/Navigation.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+} from "react";
 import { mergeClasses } from "@/common/lib/utils/mergeClasses";
 import BrandHeader from "../molecules/BrandHeader";
 import Player from "@/common/components/organisms/Player";
@@ -19,12 +25,13 @@ import {
   AnalyticsEvent,
   analytics,
 } from "@/common/providers/AnalyticsProvider";
+import SearchModal from "@/common/components/organisms/SearchModal";
 
 type NavItemProps = {
   label: string;
   active?: boolean;
   Icon: React.FC;
-  href: string;
+  href?: string;
   disable?: boolean;
   openInNewTab?: boolean;
   onClick?: () => void;
@@ -41,6 +48,7 @@ const Navigation: React.FC<NavProps> = ({
   enterEditMode,
   theme: userTheme,
 }) => {
+  const searchRef = useRef<HTMLInputElement>(null);
   const { setModalOpen, getIsLoggedIn, getIsInitializing } = useAppStore(
     (state) => ({
       setModalOpen: state.setup.setModalOpen,
@@ -113,6 +121,34 @@ const Navigation: React.FC<NavProps> = ({
     );
   };
 
+  const NavButton: React.FC<NavItemProps> = ({
+    label,
+    Icon,
+    href,
+    onClick,
+    disable = false,
+    openInNewTab = false,
+  }) => {
+    return (
+      <li>
+        <button
+          className={mergeClasses(
+            "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
+          )}
+          onClick={onClick}
+        >
+          <Icon aria-hidden="true" />
+          <span className="ms-2">{label}</span>
+        </button>
+      </li>
+    );
+  };
+
+  const openSearchModal = useCallback(() => {
+    if (!searchRef?.current) return;
+    searchRef.current.focus();
+  }, [searchRef]);
+
   return (
     <aside
       id="logo-sidebar"
@@ -127,16 +163,22 @@ const Navigation: React.FC<NavProps> = ({
       >
         <CreateCast />
       </Modal>
+      <SearchModal ref={searchRef} />
       <div className="pt-12 pb-12 h-full md:block hidden">
         <div className="flex flex-col h-full w-[270px] ml-auto">
           <BrandHeader />
           <div className="flex flex-col text-lg font-medium pb-3 px-4 overflow-auto">
             <div className="flex-auto">
               <ul className="space-y-2">
                 <NavItem label="Homebase" Icon={HomeIcon} href="/homebase" />
+                <NavButton
+                  label="Search"
+                  Icon={SearchIcon}
+                  onClick={openSearchModal}
+                />
                 <NavItem
                   label="Fair Launch"
-                  Icon={IoMdRocket}
+                  Icon={RocketIcon}
                   href="https://space.nounspace.com/"
                   onClick={() =>
                     analytics.track(AnalyticsEvent.CLICK_SPACE_FAIR_LAUNCH)
@@ -151,47 +193,19 @@ const Navigation: React.FC<NavProps> = ({
                     href={`/s/${username}`}
                   />
                 )}
-                {isLoggedIn ? (
-                  <button
-                    className={mergeClasses(
-                      "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
-                    )}
+                {isLoggedIn && (
+                  <NavButton
+                    label={"Logout"}
+                    Icon={LogoutIcon}
                     onClick={logout}
-                  >
-                    <CgLogOut className="w-6 h-6 text-gray-800 dark:text-white" />
-                    <span className="ms-2">Logout</span>
-                  </button>
-                ) : isInitializing ? (
-                  <>
-                    <button
-                      className={mergeClasses(
-                        "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
-                      )}
-                      onClick={logout}
-                    >
-                      <CgLogOut className="w-6 h-6 text-gray-800 dark:text-white" />
-                      <span className="ms-2">Logout</span>
-                    </button>
-                    <button
-                      className={mergeClasses(
-                        "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
-                      )}
-                      onClick={openModal}
-                    >
-                      <CgLogIn className="w-6 h-6 text-gray-800 dark:text-white" />
-                      <span className="ms-2">Complete Sign Up</span>
-                    </button>
-                  </>
-                ) : (
-                  <button
-                    className={mergeClasses(
-                      "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
-                    )}
+                  />
+                )}
+                {!isLoggedIn && (
+                  <NavButton
+                    label={isInitializing ? "Complete Signup" : "Login"}
+                    Icon={LoginIcon}
                     onClick={openModal}
-                  >
-                    <CgLogIn className="w-6 h-6 text-gray-800 dark:text-white" />
-                    <span className="ms-2">Login</span>
-                  </button>
+                  />
                 )}
               </ul>
             </div>
@@ -260,6 +274,89 @@ const HomeIcon = () => {
   );
 };
 
+const SearchIcon = () => (
+  <svg
+    className="w-6 h-6 text-gray-800 dark:text-white"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth="2"
+      d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
+    />
+  </svg>
+);
+
+const RocketIcon = () => (
+  <svg
+    className="w-[24px] h-[24px] text-gray-800 dark:text-white"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="m10.051 8.102-3.778.322-1.994 1.994a.94.94 0 0 0 .533 1.6l2.698.316m8.39 1.617-.322 3.78-1.994 1.994a.94.94 0 0 1-1.595-.533l-.4-2.652m8.166-11.174a1.366 1.366 0 0 0-1.12-1.12c-1.616-.279-4.906-.623-6.38.853-1.671 1.672-5.211 8.015-6.31 10.023a.932.932 0 0 0 .162 1.111l.828.835.833.832a.932.932 0 0 0 1.111.163c2.008-1.102 8.35-4.642 10.021-6.312 1.475-1.478 1.133-4.77.855-6.385Zm-2.961 3.722a1.88 1.88 0 1 1-3.76 0 1.88 1.88 0 0 1 3.76 0Z"
+    />
+  </svg>
+);
+
+const LogoutIcon = () => {
+  return (
+    <svg
+      className="w-[24px] h-[24px] text-gray-800 dark:text-white scale-x-[-1] translate-x-[2px]"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M16 12H4m12 0-4 4m4-4-4-4m3-4h2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-2"
+      />
+    </svg>
+  );
+};
+
+const LoginIcon = () => {
+  return (
+    <svg
+      className="w-[24px] h-[24px] text-gray-800 dark:text-white"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M16 12H4m12 0-4 4m4-4-4-4m3-4h2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-2"
+      />
+    </svg>
+  );
+};
+
 const _EditIcon = () => {
   return (
     <svg