From ca39161b0b0676042a8a635ff77283cbe05faae7 Mon Sep 17 00:00:00 2001
From: Francesco Aliprandi <aliprandifrancescopp@gmail.com>
Date: Wed, 6 Mar 2024 22:12:50 +0100
Subject: [PATCH 1/3] feat(components): create `Sidebar` component

---
 web/frontend/src/components/Sidebar.tsx | 39 +++++++++++++++++++++++++
 web/frontend/src/layouts/Main.tsx       |  4 ++-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 web/frontend/src/components/Sidebar.tsx

diff --git a/web/frontend/src/components/Sidebar.tsx b/web/frontend/src/components/Sidebar.tsx
new file mode 100644
index 0000000..3099b2e
--- /dev/null
+++ b/web/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,39 @@
+import { Button } from "@nextui-org/react"
+import { motion } from "framer-motion"
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { FaBars, FaHouse } from "react-icons/fa6"
+
+export default function Sidebar() {
+  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"></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>
+  )
+}
diff --git a/web/frontend/src/layouts/Main.tsx b/web/frontend/src/layouts/Main.tsx
index 6d82905..07e6260 100644
--- a/web/frontend/src/layouts/Main.tsx
+++ b/web/frontend/src/layouts/Main.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react"
+import Sidebar from "../components/Sidebar"
 
 export type MainProps = {
   children: ReactNode
@@ -6,7 +7,8 @@ export type MainProps = {
 
 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>
   )

From 1f6bfcdca0fd91695dd9b5dd981ee47029b79152 Mon Sep 17 00:00:00 2001
From: Francesco Aliprandi <aliprandifrancescopp@gmail.com>
Date: Thu, 7 Mar 2024 14:07:01 +0100
Subject: [PATCH 2/3] fix(frontend): change to `font-mono` for sockets spans

---
 web/frontend/src/components/Service.tsx | 2 +-
 web/frontend/src/pages/Service.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/frontend/src/components/Service.tsx b/web/frontend/src/components/Service.tsx
index d249a69..a5e3bf5 100644
--- a/web/frontend/src/components/Service.tsx
+++ b/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>
diff --git a/web/frontend/src/pages/Service.tsx b/web/frontend/src/pages/Service.tsx
index 36dea6c..af6e681 100644
--- a/web/frontend/src/pages/Service.tsx
+++ b/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>

From 56c9bcd28c8d03c88f20af0a6f9c8328226cadde Mon Sep 17 00:00:00 2001
From: Francesco Aliprandi <aliprandifrancescopp@gmail.com>
Date: Thu, 7 Mar 2024 14:24:46 +0100
Subject: [PATCH 3/3] feat(components): create `SidebarItem` component

---
 web/frontend/src/components/Sidebar.tsx     | 33 +++++++++++++--
 web/frontend/src/components/SidebarItem.tsx | 47 +++++++++++++++++++++
 2 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 web/frontend/src/components/SidebarItem.tsx

diff --git a/web/frontend/src/components/Sidebar.tsx b/web/frontend/src/components/Sidebar.tsx
index 3099b2e..d39a701 100644
--- a/web/frontend/src/components/Sidebar.tsx
+++ b/web/frontend/src/components/Sidebar.tsx
@@ -1,10 +1,18 @@
-import { Button } from "@nextui-org/react"
+import { Button, Divider } from "@nextui-org/react"
 import { motion } from "framer-motion"
 import { useState } from "react"
-import { useNavigate } from "react-router-dom"
-import { FaBars, FaHouse } from "react-icons/fa6"
+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()
 
@@ -23,7 +31,24 @@ export default function Sidebar() {
             <FaBars/>
           </Button>}
       </div>
-      <div className="h-full"></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("/")}>
diff --git a/web/frontend/src/components/SidebarItem.tsx b/web/frontend/src/components/SidebarItem.tsx
new file mode 100644
index 0000000..ab61496
--- /dev/null
+++ b/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>
+  )
+}