✨ Add Layout and Sidebar

code/frontend/src/App.js

@@ -6,6 +6,7 @@ import Button from "./components/Button"
 import { faArchive, faArrowRight, faExclamationTriangle, faSearch, faTrash } from "@fortawesome/free-solid-svg-icons"
 import Input from "./components/Input"
 import InputWithIcon from "./components/InputWithIcon"
+import Layout from "./components/Layout"
 
 
 export default function App() {
@@ -13,27 +14,29 @@ export default function App() {
 
     return (
         <div className={classNames(Style.App, theme)}>
-            <BoxWithHeader
-                header={"Sto provando i bottoni!"}
-            >
-                <div>
+            <Layout>
+                <BoxWithHeader
+                    header={"Sto provando i bottoni!"}
+                >
                     <div>
-                        Ammirate:
+                        <div>
+                            Ammirate:
+                        </div>
+                        <div>
+                            <Button color={"Green"} icon={faArrowRight}>Verde</Button>
+                            <Button color={"Grey"} icon={faArchive}>Grigio</Button>
+                            <Button color={"Yellow"} icon={faExclamationTriangle}>Giallo</Button>
+                            <Button color={"Red"} icon={faTrash}>Rosso</Button>
+                        </div>
+                        <div>
+                            E già che ci siamo, un Input, con e senza icona:
+                        </div>
+                        <div>
+                            <Input/> <InputWithIcon icon={faSearch}/>
+                        </div>
                     </div>
-                    <div>
-                        <Button color={"Green"} icon={faArrowRight}>Verde</Button>
-                        <Button color={"Grey"} icon={faArchive}>Grigio</Button>
-                        <Button color={"Yellow"} icon={faExclamationTriangle}>Giallo</Button>
-                        <Button color={"Red"} icon={faTrash}>Rosso</Button>
-                    </div>
-                    <div>
-                        E già che ci siamo, un Input, con e senza icona:
-                    </div>
-                    <div>
-                        <Input/> <InputWithIcon icon={faSearch}/>
-                    </div>
-                </div>
-            </BoxWithHeader>
+                </BoxWithHeader>
+            </Layout>
         </div>
     )
 }

code/frontend/src/components/Layout.js

@@ -0,0 +1,16 @@
+import React from "react"
+import Style from "./Layout.module.css"
+import classNames from "classnames"
+import Sidebar from "./Sidebar"
+
+
+export default function Layout({ children, className, ...props }) {
+    return (
+        <div className={classNames(Style.Layout, className)} {...props}>
+            <Sidebar className={Style.LayoutSidebar}/>
+            <div className={Style.LayoutContent}>
+                {children}
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,21 @@
+.Layout {
+    width: 100%;
+    height: 100%;
+
+    display: grid;
+
+    grid-template-areas:
+        "a b"
+    ;
+    grid-template-columns: 250px 1fr;
+
+    grid-gap: 10px;
+}
+
+.LayoutSidebar {
+    grid-area: a;
+}
+
+.LayoutContent {
+    grid-area: b;
+}

code/frontend/src/components/Sidebar.js

@@ -0,0 +1,12 @@
+import React from "react"
+import Style from "./Sidebar.module.css"
+import classNames from "classnames"
+
+
+export default function Sidebar({ children, className, ...props }) {
+    return (
+        <div className={classNames(Style.Sidebar, className)} {...props}>
+            {children}
+        </div>
+    )
+}

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

@@ -0,0 +1,9 @@
+.Sidebar {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+
+    background-color: var(--bg-light);
+    border-radius: 25px;
+}