2 files changed, 33 insertions, 0 deletions
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 >
+  )
+}