Home: Add sidebar

4 files changed, 49 insertions, 10 deletions

diff --git a/index.html b/index.html
index b9887dc..745b692 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>fs-tracer</title>
+    <link rel="stylesheet" 
+href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <script src="https://accounts.google.com/gsi/client" async></script>
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..409636b
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,22 @@
+import SidebarButton from "./SidebarButton";
+
+export default function SideBar() {
+  return (
+    <div
+      className="relative flex h-full w-full max-w-[20rem] flex-col rounded-xl bg-white bg-clip-border p-4 text-gray-700 shadow-xl shadow-blue-gray-900/5 mr-5">
+      <div className="p-4 mb-2">
+        <h5 className="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
+          <a href="/">fs-tracer</a>
+        </h5>
+      </div>
+      <nav className="flex min-w-[240px] flex-col gap-1 p-2 font-sans text-base font-normal text-blue-gray-700">
+        <SidebarButton name="Home" icon="fa-solid fa-house" href="/" />
+        <SidebarButton name="Recent files" icon="fa-solid fa-folder" href="/recent" />
+        <SidebarButton name="Search" icon="fa-solid fa-magnifying-glass" href="/search" />
+        <SidebarButton name="Monitoring" icon="fa-solid fa-chart-column" href="/monitoring" />
+        <SidebarButton name="Setup" icon="fa-solid fa-gear" href="/setup" />
+        <SidebarButton name="Logout" icon="fa-solid fa-right-from-bracket" href="/logout" />
+      </nav>
+    </div>
+  )
+}
diff --git a/src/components/Sidebar/SidebarButton.tsx b/src/components/Sidebar/SidebarButton.tsx
new file mode 100644
index 0000000..c29dfe4
--- /dev/null
+++ b/src/components/Sidebar/SidebarButton.tsx
@@ -0,0 +1,11 @@
+export default function SidebarButton(props: any) {
+  return (
+    <div role="button"
+      className="flex items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
+      <div className="grid mr-4 place-items-center">
+        <i className={props.icon}></i>
+      </div>
+      <a href={props.href}>{props.name}</a>
+    </div >
+  )
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 8bda03b..422090f 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, useCallback } from "react"
 
 import { useNavigate } from "react-router-dom"
+import SideBar from "../components/Sidebar/Sidebar"
 
 export default function Home(props: any) {
   const navigate = useNavigate()
@@ -32,15 +33,18 @@ export default function Home(props: any) {
 
   return (
     <>
-      <div>
-        <h1 className="font-bold">Home</h1>
-        <p>Logged in!</p>
-        {files.map((file: any) => (
-          <div key={file.id}>
-            <p className="underline">file: {file.absolute_path}</p>
-          </div>
-        ))
-        }
+      <div className="flex h-screen">
+        <SideBar />
+        <main className="flex-1 overflow-y-auto">
+          <h1 className="font-bold">Home</h1>
+          <p>Logged in!</p>
+          {files.map((file: any) => (
+            <div key={file.id}>
+              <p className="underline">file: {file.absolute_path}</p>
+            </div>
+          ))
+          }
+        </main>
       </div>
     </>
   )