🔮 Add interactivity to sidebar buttons

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>
     )
 }

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}>
+        <Link to={to} className={Style.ButtonLink}>
-            {make_icon(icon, Style.ButtonIcon)}
+            <div className={classNames(Style.ButtonSidebar, className)} {...props}>
-            <div className={Style.ButtonText}>
+                {make_icon(icon, Style.ButtonIcon)}
-                {children}
+                <div className={Style.ButtonText}>
+                    {children}
+                </div>
             </div>
-        </button>
+        </Link>
     )
 }

code/frontend/src/components/ButtonSidebar.module.css

@@ -1,3 +1,7 @@
+.ButtonLink {
+    text-decoration: none;
+}
+
 .ButtonSidebar {
     font-family: var(--font-title);
 

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 to={"/"} icon={faHome}>Dashboard</ButtonSidebar>
-            <ButtonSidebar icon={faFolder}>Repositories</ButtonSidebar>
+            <ButtonSidebar to={"/repositories"} icon={faFolder}>Repositories</ButtonSidebar>
-            <ButtonSidebar icon={faExclamationTriangle}>Alerts</ButtonSidebar>
+            <ButtonSidebar to={"/alerts"} icon={faExclamationTriangle}>Alerts</ButtonSidebar>
-            <ButtonSidebar icon={faCog}>Settings</ButtonSidebar>
+            <ButtonSidebar to={"/settings"} icon={faCog}>Settings</ButtonSidebar>
             {children}
         </div>
     )