From ce3164d7d1907c379cbe5ac751fcc14737b8dd73 Mon Sep 17 00:00:00 2001
From: Winston Hsiao <96440583+Winston-Hsiao@users.noreply.github.com>
Date: Wed, 16 Oct 2024 22:12:24 -0400
Subject: [PATCH] Navbar gap on mobile gone, sidebar icons for nav items (#486)

---
 frontend/src/components/nav/Navbar.tsx    | 53 +++++++++++++++--------
 frontend/src/components/nav/Sidebar.tsx   | 39 ++++++++++++-----
 frontend/src/components/pages/BuyPage.tsx |  4 +-
 3 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
index dce84be7..9e1d6d3a 100644
--- a/frontend/src/components/nav/Navbar.tsx
+++ b/frontend/src/components/nav/Navbar.tsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
-import { FaBars, FaDiscord, FaExternalLinkAlt, FaGithub } from "react-icons/fa";
 import {
-  FaDownload,
+  FaBars,
+  FaDiscord,
+  FaGithub,
   FaRegFileLines,
   FaRobot,
-  FaSearchengin,
   FaWpexplorer,
   FaXTwitter,
 } from "react-icons/fa6";
@@ -21,6 +21,11 @@ import {
   NavigationMenuTrigger,
 } from "@/components/ui/navigation-menu";
 import { useAuthentication } from "@/hooks/useAuth";
+import {
+  DownloadIcon,
+  ExternalLinkIcon,
+  MagnifyingGlassIcon,
+} from "@radix-ui/react-icons";
 
 const Navbar = () => {
   const { isAuthenticated } = useAuthentication();
@@ -58,13 +63,13 @@ const Navbar = () => {
     {
       name: "Browse",
       path: "/browse",
-      icon: <FaSearchengin className="h-5 w-5" />,
+      icon: <MagnifyingGlassIcon className="h-5 w-5" />,
       isExternal: false,
     },
     {
       name: "Downloads",
       path: "/downloads",
-      icon: <FaDownload className="h-5 w-5" />,
+      icon: <DownloadIcon className="h-5 w-5" />,
       isExternal: false,
     },
     {
@@ -113,7 +118,7 @@ const Navbar = () => {
               <div className="flex items-center text-sm font-semibold leading-none">
                 <span className="mr-2">{icon}</span>
                 <span>{title}</span>
-                <FaExternalLinkAlt className="ml-2 h-3 w-3" />
+                <ExternalLinkIcon className="ml-2 h-4 w-4" />
               </div>
             </a>
           ) : (
@@ -136,12 +141,28 @@ const Navbar = () => {
     <>
       <nav className="fixed w-full z-30 top-0 start-0 bg-gray-1/30 backdrop-blur-lg">
         <div className="flex items-center justify-between py-3 mx-4 sm:mx-6 md:mx-10 xl:mx-16 2xl:mx-28 font-medium">
-          <Link
-            to="/"
-            className="flex items-center space-x-2 bg-gray-12 p-3 rounded-lg hover:bg-primary-9 transition-all duration-300"
-          >
-            <Logo />
-          </Link>
+          <div className="flex items-center justify-between w-full lg:w-auto gap-3">
+            <Link
+              to="/"
+              className="
+                flex items-center
+                flex-grow
+                lg:flex-grow-0
+                space-x-2 p-3
+                rounded-lg
+                bg-gray-12 hover:bg-primary-9
+                transition-all duration-300
+              "
+            >
+              <Logo />
+            </Link>
+            <button
+              onClick={() => setShowSidebar(true)}
+              className="lg:hidden text-gray-300 hover:bg-gray-700 bg-gray-12 hover:text-white p-4 rounded-md text-sm"
+            >
+              <FaBars size={20} />
+            </button>
+          </div>
           <div className="hidden lg:flex items-center flex-grow justify-between ml-4">
             <div className="flex space-x-1 bg-gray-12 rounded-lg p-2 flex-grow justify-center">
               {navItems.map((item) =>
@@ -154,7 +175,7 @@ const Navbar = () => {
                     rel="noopener noreferrer"
                   >
                     {item.name}
-                    <FaExternalLinkAlt className="ml-2 h-3 w-3" />
+                    <ExternalLinkIcon className="ml-2 h-4 w-4" />
                   </a>
                 ) : (
                   <Link
@@ -262,12 +283,6 @@ const Navbar = () => {
               )}
             </div>
           </div>
-          <button
-            onClick={() => setShowSidebar(true)}
-            className="lg:hidden text-gray-300 hover:bg-gray-700 bg-gray-12 hover:text-white p-4 rounded-md text-sm"
-          >
-            <FaBars size={20} />
-          </button>
         </div>
       </nav>
       <Sidebar show={showSidebar} onClose={() => setShowSidebar(false)} />
diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
index f00cae0f..856bd88f 100644
--- a/frontend/src/components/nav/Sidebar.tsx
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -1,4 +1,12 @@
-import { FaTimes } from "react-icons/fa";
+import { FaDiscord, FaGithub, FaTimes } from "react-icons/fa";
+import {
+  FaDownload,
+  FaRegFileLines,
+  FaRobot,
+  FaSearchengin,
+  FaWpexplorer,
+  FaXTwitter,
+} from "react-icons/fa6";
 import { useNavigate } from "react-router-dom";
 
 import Logo from "@/components/Logo";
@@ -32,22 +40,26 @@ const Sidebar = ({ show, onClose }: SidebarProps) => {
   const { isAuthenticated } = useAuthentication();
 
   const navItems = [
-    { name: "Pro", path: "/stompy-pro" },
-    { name: "Mini", path: "/stompy-mini" },
+    { name: "Pro", path: "/stompy-pro", icon: <FaRobot /> },
+    { name: "Mini", path: "/stompy-mini", icon: <FaRobot /> },
   ];
 
   const technicalItems = [
-    { name: "Docs", path: "https://docs.kscale.dev/" },
-    { name: "Browse", path: "/browse" },
-    { name: "Downloads", path: "/downloads" },
-    { name: "Code", path: "https://github.com/kscalelabs" },
-    { name: "Playground", path: "/mujoco-test" },
-    { name: "Research", path: "/research" },
+    {
+      name: "Docs",
+      path: "https://docs.kscale.dev/",
+      icon: <FaRegFileLines />,
+    },
+    { name: "Browse", path: "/browse", icon: <FaSearchengin /> },
+    { name: "Downloads", path: "/downloads", icon: <FaDownload /> },
+    { name: "Code", path: "https://github.com/kscalelabs", icon: <FaGithub /> },
+    { name: "Playground", path: "/mujoco-test", icon: <FaRobot /> },
+    { name: "Research", path: "/research", icon: <FaWpexplorer /> },
   ];
 
   const communityItems = [
-    { name: "Discord", path: "https://discord.gg/kscale" },
-    { name: "Twitter", path: "https://x.com/kscalelabs" },
+    { name: "Discord", path: "https://discord.gg/kscale", icon: <FaDiscord /> },
+    { name: "Twitter", path: "https://x.com/kscalelabs", icon: <FaXTwitter /> },
   ];
 
   const handleItemClick = (path: string, isExternal?: boolean) => {
@@ -76,11 +88,12 @@ const Sidebar = ({ show, onClose }: SidebarProps) => {
             </div>
             <div className="border-t border-gray-1 my-2"></div>
             <nav>
-              <ul className="space-y-1l">
+              <ul className="space-y-1">
                 {navItems.map((item) => (
                   <SidebarItem
                     key={item.name}
                     title={item.name}
+                    icon={item.icon}
                     onClick={() => handleItemClick(item.path)}
                   />
                 ))}
@@ -89,6 +102,7 @@ const Sidebar = ({ show, onClose }: SidebarProps) => {
                   <SidebarItem
                     key={item.name}
                     title={item.name}
+                    icon={item.icon}
                     onClick={() =>
                       handleItemClick(item.path, item.path.startsWith("http"))
                     }
@@ -99,6 +113,7 @@ const Sidebar = ({ show, onClose }: SidebarProps) => {
                   <SidebarItem
                     key={item.name}
                     title={item.name}
+                    icon={item.icon}
                     onClick={() => handleItemClick(item.path, true)}
                   />
                 ))}
diff --git a/frontend/src/components/pages/BuyPage.tsx b/frontend/src/components/pages/BuyPage.tsx
index 8a6dea33..eb3f5785 100644
--- a/frontend/src/components/pages/BuyPage.tsx
+++ b/frontend/src/components/pages/BuyPage.tsx
@@ -1,4 +1,5 @@
 import React, { useRef } from "react";
+import { FaDiscord } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
 
 import {
@@ -16,7 +17,6 @@ import {
   CodeIcon,
   DownloadIcon,
   ExternalLinkIcon,
-  LayersIcon,
   MagnifyingGlassIcon,
 } from "@radix-ui/react-icons";
 
@@ -60,7 +60,7 @@ const BuyPage: React.FC = () => {
               title: "Discord",
               description:
                 "Connect with fellow robot enthusiasts, industry experts, and researchers. Share projects and ideas, and stay updated on the latest K-Scale developments.",
-              icon: LayersIcon,
+              icon: FaDiscord,
               path: "https://discord.com/invite/kscale",
               buttonText: "Join our Discord",
               external: true,