Components: SideBar: Highlight current page

4 files changed, 18 insertions, 12 deletions

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 28ae9a2..901ba87 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,21 +1,21 @@
 import SidebarButton from "./SidebarButton";
 
-export default function SideBar() {
+export default function SideBar(props: any) {
   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">
+      className="relative flex h-full w-full max-w-[20rem] flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-xl shadow-blue-gray-900/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 className="flex min-w-[240px] flex-col gap-1  font-sans text-base font-normal text-blue-gray-700">
+        <SidebarButton name="Home" icon="fa-solid fa-house" href="/" currentPage={props.currentPage} />
+        <SidebarButton name="Recent files" icon="fa-solid fa-folder" href="/recent" currentPage={props.currentPage} />
+        <SidebarButton name="Search" icon="fa-solid fa-magnifying-glass" href="/search" currentPage={props.currentPage} />
+        <SidebarButton name="Monitoring" icon="fa-solid fa-chart-column" href="/monitoring" currentPage={props.currentPage} />
+        <SidebarButton name="Setup" icon="fa-solid fa-gear" href="/setup" currentPage={props.currentPage} />
+        <SidebarButton name="Logout" icon="fa-solid fa-right-from-bracket" href="/logout" currentPage={props.currentPage} />
       </nav>
     </div>
   )
diff --git a/src/components/Sidebar/SidebarButton.tsx b/src/components/Sidebar/SidebarButton.tsx
index 0af2c2c..efcb163 100644
--- a/src/components/Sidebar/SidebarButton.tsx
+++ b/src/components/Sidebar/SidebarButton.tsx
@@ -1,7 +1,13 @@
 export default function SidebarButton(props: any) {
+  let buttonStyle = "flex items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-500"
+
+  if (props.name === props.currentPage) {
+    buttonStyle += " border-2 border-black"
+  }
+
   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-500">
+      className={buttonStyle}>
       <div className="grid mr-4 place-items-center">
         <i className={props.icon}></i>
       </div>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 1bce297..37b97c3 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -36,7 +36,7 @@ export default function Home(props: any) {
   return (
     <>
       <div className="flex h-screen">
-        <SideBar />
+        <SideBar currentPage="Home" />
         <main className="overflow-y-auto flex flex-col flex-1 mx-5">
           <div className="flex flex-col w-full gap-7 flex-grow">
             <div className="flex flex-row gap-7 flex-grow">
diff --git a/src/pages/Recent.tsx b/src/pages/Recent.tsx
index cecef25..b0e0601 100644
--- a/src/pages/Recent.tsx
+++ b/src/pages/Recent.tsx
@@ -34,7 +34,7 @@ export default function Recent(props: any) {
   return (
     <>
       <div className="flex h-screen">
-        <SideBar />
+        <SideBar currentPage="Recent" />
         <main className="flex-1 overflow-y-auto">
           <div>
             {files.map((file: any) => (