✨ Add ButtonSidebar

code/frontend/src/components/ButtonSidebar.js

@@ -0,0 +1,16 @@
+import React from "react"
+import Style from "./ButtonSidebar.module.css"
+import classNames from "classnames"
+import make_icon from "../utils/make_icon"
+
+
+export default function ButtonSidebar({ icon, children, className, ...props }) {
+    return (
+        <button className={classNames(Style.ButtonSidebar, className)} {...props}>
+            {make_icon(icon, Style.ButtonIcon)}
+            <div className={Style.ButtonText}>
+                {children}
+            </div>
+        </button>
+    )
+}

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

@@ -0,0 +1,42 @@
+.ButtonSidebar {
+    font-family: var(--font-title);
+
+    border-width: 0;
+    border-radius: 0 25px 25px 0;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+
+    padding: 10px;
+    margin: 0;
+
+    cursor: pointer;
+
+    background-color: var(--bg-button-off);
+    color: var(--fg-button-off);
+    font-size: large;
+
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    /* Hackerino per ignorare il padding */
+    width: calc(100% + 10px);
+    position: relative;
+    left: -10px;
+}
+
+.ButtonSidebar.Active {
+    background-color: var(--bg-button-on);
+    color: var(--fg-button-on);
+}
+
+.ButtonIcon {
+    font-size: x-large;
+
+    /* TODO: non so quanto sia una buona idea, ma funziona accettabilmente */
+    line-height: 0;
+    vertical-align: sub;
+}
+
+.ButtonText {
+    text-align: center;
+}

code/frontend/src/components/Sidebar.js

@@ -2,6 +2,8 @@ import React from "react"
 import Style from "./Sidebar.module.css"
 import classNames from "classnames"
 import Logo from "./Logo"
+import ButtonSidebar from "./ButtonSidebar"
+import { faHome } from "@fortawesome/free-solid-svg-icons"
 
 
 export default function Sidebar({ children, className, ...props }) {
@@ -9,6 +11,7 @@ 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>
             {children}
         </div>
     )

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

@@ -1,6 +1,8 @@
 .Sidebar {
     display: flex;
     flex-direction: column;
+    gap: 10px;
+
     width: 100%;
     height: 100%;