From 9b583d8e31eee832fc574648dcb07166ea6b65f5 Mon Sep 17 00:00:00 2001
From: Ivan <45982459+ivntsng@users.noreply.github.com>
Date: Mon, 28 Oct 2024 13:34:59 +0800
Subject: [PATCH] Updated sidebar to match the navbar (#511)

---
 frontend/src/components/nav/Sidebar.tsx | 47 ++++++++++++++++++-------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
index 60fd1c62..83212ce8 100644
--- a/frontend/src/components/nav/Sidebar.tsx
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -4,6 +4,7 @@ import {
   FaRegFileLines,
   FaRobot,
   FaSearchengin,
+  FaTerminal,
   FaWpexplorer,
   FaXTwitter,
 } from "react-icons/fa6";
@@ -35,14 +36,30 @@ const SidebarItem = ({ icon, title, onClick }: SidebarItemProps) => (
   </li>
 );
 
+type NavItem = {
+  name: string;
+  path: string;
+  isExternal: boolean;
+  icon?: JSX.Element;
+};
+
 const Sidebar = ({ show, onClose }: SidebarProps) => {
   const navigate = useNavigate();
   const { isAuthenticated } = useAuthentication();
 
-  const navItems = [
-    { name: "Pro", path: "/pro", icon: <FaRobot /> },
-    { name: "Mini", path: "/mini", icon: <FaRobot /> },
-  ];
+  let navItems: NavItem[] = [];
+
+  if (isAuthenticated) {
+    navItems = [
+      {
+        name: "Terminal",
+        path: "/terminal",
+        isExternal: false,
+        icon: <FaTerminal />,
+      },
+      ...navItems,
+    ];
+  }
 
   const technicalItems = [
     { name: "Browse", path: "/browse", icon: <FaSearchengin /> },
@@ -89,15 +106,19 @@ const Sidebar = ({ show, onClose }: SidebarProps) => {
             <div className="border-t border-gray-1 my-2"></div>
             <nav>
               <ul className="space-y-1">
-                {navItems.map((item) => (
-                  <SidebarItem
-                    key={item.name}
-                    title={item.name}
-                    icon={item.icon}
-                    onClick={() => handleItemClick(item.path)}
-                  />
-                ))}
-                <div className="border-t border-gray-1 my-2"></div>
+                {isAuthenticated && (
+                  <>
+                    {navItems.map((item) => (
+                      <SidebarItem
+                        key={item.name}
+                        title={item.name}
+                        icon={item.icon}
+                        onClick={() => handleItemClick(item.path)}
+                      />
+                    ))}
+                    <div className="border-t border-gray-1 my-2"></div>
+                  </>
+                )}
                 {technicalItems.map((item) => (
                   <SidebarItem
                     key={item.name}