From 334bf6bbe398b6d5b9541c491112c65a0b49d2c4 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Wed, 21 Apr 2021 18:00:21 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=AE=20Add=20interactivity=20to=20sideb?=
 =?UTF-8?q?ar=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/App.js                      |  5 ++++
 code/frontend/src/components/ButtonSidebar.js | 26 ++++++++++++++-----
 .../src/components/ButtonSidebar.module.css   |  4 +++
 code/frontend/src/components/Sidebar.js       |  8 +++---
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/code/frontend/src/App.js b/code/frontend/src/App.js
index 50a7b86..79e334c 100644
--- a/code/frontend/src/App.js
+++ b/code/frontend/src/App.js
@@ -8,6 +8,7 @@ import Input from "./components/Input"
 import InputWithIcon from "./components/InputWithIcon"
 import Layout from "./components/Layout"
 import ContextTheme from "./contexts/ContextTheme"
+import { BrowserRouter } from "react-router-dom"
 
 
 export default function App() {
@@ -15,6 +16,8 @@ export default function App() {
 
     return (
         <ContextTheme.Provider value={theme}>
+        <BrowserRouter>
+
             <div className={classNames(Style.App, theme)}>
                 <Layout>
                     <BoxWithHeader
@@ -40,6 +43,8 @@ export default function App() {
                     </BoxWithHeader>
                 </Layout>
             </div>
+
+        </BrowserRouter>
         </ContextTheme.Provider>
     )
 }
diff --git a/code/frontend/src/components/ButtonSidebar.js b/code/frontend/src/components/ButtonSidebar.js
index 597b605..2f71f72 100644
--- a/code/frontend/src/components/ButtonSidebar.js
+++ b/code/frontend/src/components/ButtonSidebar.js
@@ -2,15 +2,29 @@ import React from "react"
 import Style from "./ButtonSidebar.module.css"
 import classNames from "classnames"
 import make_icon from "../utils/make_icon"
+import { Link } from "react-router-dom"
+import { useRouteMatch } from "react-router"
 
 
-export default function ButtonSidebar({ icon, children, className, ...props }) {
+export default function ButtonSidebar({ icon, children, to, className, ...props }) {
+    const match = useRouteMatch({
+        path: to,
+        strict: true,
+        exact: true,
+    });
+
+    if(match) {
+        className = classNames(Style.Active, className)
+    }
+
     return (
-        <button className={classNames(Style.ButtonSidebar, className)} {...props}>
-            {make_icon(icon, Style.ButtonIcon)}
-            <div className={Style.ButtonText}>
-                {children}
+        <Link to={to} className={Style.ButtonLink}>
+            <div className={classNames(Style.ButtonSidebar, className)} {...props}>
+                {make_icon(icon, Style.ButtonIcon)}
+                <div className={Style.ButtonText}>
+                    {children}
+                </div>
             </div>
-        </button>
+        </Link>
     )
 }
diff --git a/code/frontend/src/components/ButtonSidebar.module.css b/code/frontend/src/components/ButtonSidebar.module.css
index 84de26e..0d8a1b3 100644
--- a/code/frontend/src/components/ButtonSidebar.module.css
+++ b/code/frontend/src/components/ButtonSidebar.module.css
@@ -1,3 +1,7 @@
+.ButtonLink {
+    text-decoration: none;
+}
+
 .ButtonSidebar {
     font-family: var(--font-title);
 
diff --git a/code/frontend/src/components/Sidebar.js b/code/frontend/src/components/Sidebar.js
index 6847b68..67ab5c0 100644
--- a/code/frontend/src/components/Sidebar.js
+++ b/code/frontend/src/components/Sidebar.js
@@ -11,10 +11,10 @@ export default function Sidebar({ children, className, ...props }) {
         <div className={classNames(Style.Sidebar, className)} {...props}>
             {/* TODO: Aggiungere il logo qui! */}
             <Logo/>
-            <ButtonSidebar icon={faHome}>Dashboard</ButtonSidebar>
-            <ButtonSidebar icon={faFolder}>Repositories</ButtonSidebar>
-            <ButtonSidebar icon={faExclamationTriangle}>Alerts</ButtonSidebar>
-            <ButtonSidebar icon={faCog}>Settings</ButtonSidebar>
+            <ButtonSidebar to={"/"} icon={faHome}>Dashboard</ButtonSidebar>
+            <ButtonSidebar to={"/repositories"} icon={faFolder}>Repositories</ButtonSidebar>
+            <ButtonSidebar to={"/alerts"} icon={faExclamationTriangle}>Alerts</ButtonSidebar>
+            <ButtonSidebar to={"/settings"} icon={faCog}>Settings</ButtonSidebar>
             {children}
         </div>
     )