✨ 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,6 +14,7 @@ export default function App() {
 
     return (
         <div className={classNames(Style.App, theme)}>
+            <Layout>
                 <BoxWithHeader
                     header={"Sto provando i bottoni!"}
                 >
@@ -34,6 +36,7 @@ export default function App() {
                         </div>
                     </div>
                 </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;
+}