From c726df95314d4aa1b0db81b27daf050f38619020 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Wed, 21 Apr 2021 15:53:23 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20ButtonSidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/components/ButtonSidebar.js | 16 +++++++
 .../src/components/ButtonSidebar.module.css   | 42 +++++++++++++++++++
 code/frontend/src/components/Sidebar.js       |  3 ++
 .../src/components/Sidebar.module.css         |  2 +
 4 files changed, 63 insertions(+)
 create mode 100644 code/frontend/src/components/ButtonSidebar.js
 create mode 100644 code/frontend/src/components/ButtonSidebar.module.css

diff --git a/code/frontend/src/components/ButtonSidebar.js b/code/frontend/src/components/ButtonSidebar.js
new file mode 100644
index 0000000..597b605
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/code/frontend/src/components/ButtonSidebar.module.css b/code/frontend/src/components/ButtonSidebar.module.css
new file mode 100644
index 0000000..2ff7153
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/code/frontend/src/components/Sidebar.js b/code/frontend/src/components/Sidebar.js
index 91def92..de4c5e7 100644
--- a/code/frontend/src/components/Sidebar.js
+++ b/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>
     )
diff --git a/code/frontend/src/components/Sidebar.module.css b/code/frontend/src/components/Sidebar.module.css
index a4d1295..4fd1176 100644
--- a/code/frontend/src/components/Sidebar.module.css
+++ b/code/frontend/src/components/Sidebar.module.css
@@ -1,6 +1,8 @@
 .Sidebar {
     display: flex;
     flex-direction: column;
+    gap: 10px;
+
     width: 100%;
     height: 100%;