Add Sidebar component

web/frontend/src/components/Service.tsx

@@ -31,7 +31,7 @@ export default function Service({ name, nfq, port, protocol }: ServiceProps) {
           </div>
           <div className="flex items-center gap-2 ml-auto px-2">
             <Chip variant="flat" color="success">
-              <span className="font-bold">{protocol}://vm:{port}</span>
+              <span className="font-mono">{protocol}://vm:{port}</span>
             </Chip>
           </div>
         </CardHeader>

web/frontend/src/components/Sidebar.tsx

@@ -0,0 +1,64 @@
+import { Button, Divider } from "@nextui-org/react"
+import { motion } from "framer-motion"
+import { useState } from "react"
+import { Link, useNavigate } from "react-router-dom"
+import { FaBars, FaCode, FaHouse } from "react-icons/fa6"
+import { useFetchSync } from "../hooks/useFetch"
+import { CerberoService } from "../types/cerbero"
+import SidebarItem from "./SidebarItem"
+
+export default function Sidebar() {
+  const [
+    servicesResponse,
+    ,
+  ] = useFetchSync<CerberoService[]>("/api/services")
+
+  const [isOpen, setIsOpen] = useState(false)
+  const navigate = useNavigate()
+
+  return (
+    <motion.aside
+      initial={{ width: "4rem" }}
+      animate={{ width: isOpen ? "24rem" : "4rem" }}
+      className="h-full flex flex-col items-center p-2 bg-default-100"
+    >
+      <div className="w-full flex items-center justify-center">
+        {isOpen ?
+          <Button onPress={() => setIsOpen(false)} variant="flat" className="w-full">
+            <span>Close sidebar</span>
+          </Button> :
+          <Button isIconOnly={true} onPress={() => setIsOpen(true)} variant="flat">
+            <FaBars/>
+          </Button>}
+      </div>
+      <div className="h-full w-full flex flex-col items-center gap-2 p-4 m-2 border border-default-200 rounded-lg">
+        <SidebarItem icon={<FaCode/>} isSidebarOpen={isOpen} link="/services" name="Services">
+          {servicesResponse?.map(service => {
+            return (
+              <Link key={service.nfq} to={`/services/${service.nfq}`} className="px-4 py-1 rounded-lg bg-default-200 hover:opacity-75 border border-default-300">
+                <li className="flex items-center gap-2">
+                  <span className="text-sm">{service.name}</span>
+                  <div className="flex items-center gap-2 ml-auto">
+                    <span className="font-mono text-xs">nfq:{service.nfq}</span>
+                    <span className="font-mono text-xs text-success">{service.port}</span>
+                  </div>
+                </li>
+              </Link>
+            )
+          })}
+        </SidebarItem>
+        <Divider/>
+      </div>
+      <div className="w-full flex items-center justify-center">
+        {isOpen ?
+          <Button variant="bordered" className="w-full flex items-center gap-4" onPress={() => navigate("/")}>
+            <FaHouse/>
+            <span>Go to the landing page</span>
+          </Button> :
+          <Button isIconOnly={true} variant="bordered" onPress={() => navigate("/")}>
+            <FaHouse/>
+          </Button>}
+      </div>
+    </motion.aside>
+  )
+}

web/frontend/src/components/SidebarItem.tsx

@@ -0,0 +1,47 @@
+import { Button, Link, Tooltip } from "@nextui-org/react"
+import { ReactNode, useState } from "react"
+import { FaCaretDown, FaCaretUp } from "react-icons/fa6"
+
+export type SidebarItemProps = {
+  children: ReactNode
+  icon: ReactNode
+  isSidebarOpen: boolean
+  link: string
+  name: string
+}
+
+export default function SidebarItem({ children, icon, isSidebarOpen, link, name }: SidebarItemProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  if(!isSidebarOpen) {
+    return (
+      <Tooltip content="Services" size="sm" delay={1000}>
+        <Button as={Link} href={link} isIconOnly={true} variant="bordered" size="sm">
+          {icon}
+        </Button>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <div className="flex items-center">
+        <Link color="foreground" href={link} className="flex items-center gap-2">
+          {icon}
+          <span className="font-bold">{name}</span>
+        </Link>
+        {isOpen ?
+          <Button isIconOnly={true} onPress={() => setIsOpen(false)} size="sm" className="ml-auto">
+            <FaCaretUp/>
+          </Button> :
+          <Button isIconOnly={true} onPress={() => setIsOpen(true)} size="sm" className="ml-auto">
+            <FaCaretDown/>
+          </Button>}
+      </div>
+      {isOpen ?
+        <ul className="flex flex-col gap-1">
+          {children}
+        </ul> : <></>}
+    </div>
+  )
+}

web/frontend/src/layouts/Main.tsx

@@ -1,12 +1,14 @@
 import type { ReactNode } from "react"
+import Sidebar from "../components/Sidebar"
 
 export type MainProps = {
   children: ReactNode
 }
 
 export default function Main({ children }: MainProps) {
   return (
-    <main className="h-full w-full overflow-auto">
+    <main className="h-full w-full flex overflow-auto">
+      <Sidebar/>
       {children}
     </main>
   )

web/frontend/src/pages/Service.tsx

@@ -41,7 +41,7 @@ export default function Service() {
               <div className="flex flex-col gap-4 md:flex-row md:items-center">
                 <span className="font-black text-5xl">{service?.name}</span>
                 <Chip variant="flat" color="success" className="font-bold text-lg">
-                  <span className="font-bold">{service?.protocol}://vm:{service?.port}</span>
+                  <span className="font-mono">{service?.protocol}://vm:{service?.port}</span>
                 </Chip>
               </div>
               <span className="font-mono text-3xl text-zinc-300">nfq:{service?.nfq}</span>