✨ Add PageSandbox to test various stuff

code/frontend/src/App.js

@@ -9,6 +9,7 @@ import PageHome from "./routes/PageHome"
 import PageRepositories from "./routes/PageRepositories"
 import PageAlerts from "./routes/PageAlerts"
 import PageSettings from "./routes/PageSettings"
+import PageSandbox from "./routes/PageSandbox"
 
 
 export default function App() {
@@ -61,16 +62,19 @@ export default function App() {
             <div className={classNames(Style.App, theme)}>
                 <Layout>
                     <Switch>
-                        <Route path={"/repositories"}>
+                        <Route path={"/repositories"} exact={true}>
                             <PageRepositories/>
                         </Route>
-                        <Route path={"/alerts"}>
+                        <Route path={"/alerts"} exact={true}>
                             <PageAlerts/>
                         </Route>
-                        <Route path={"/settings"}>
+                        <Route path={"/settings"} exact={true}>
                             <PageSettings/>
                         </Route>
-                        <Route path={"/"}>
+                        <Route path={"/sandbox"} exact={true}>
+                            <PageSandbox/>
+                        </Route>
+                        <Route path={"/"} exact={true}>
                             <PageHome/>
                         </Route>
                     </Switch>

code/frontend/src/components/Sidebar.js

@@ -3,7 +3,7 @@ import Style from "./Sidebar.module.css"
 import classNames from "classnames"
 import Logo from "./Logo"
 import ButtonSidebar from "./ButtonSidebar"
-import { faCog, faExclamationTriangle, faFolder, faHome } from "@fortawesome/free-solid-svg-icons"
+import { faCog, faExclamationTriangle, faFolder, faHome, faWrench } from "@fortawesome/free-solid-svg-icons"
 
 
 export default function Sidebar({ children, className, ...props }) {
@@ -15,6 +15,11 @@ export default function Sidebar({ children, className, ...props }) {
             <ButtonSidebar to={"/repositories"} icon={faFolder}>Repositories</ButtonSidebar>
             <ButtonSidebar to={"/alerts"} icon={faExclamationTriangle}>Alerts</ButtonSidebar>
             <ButtonSidebar to={"/settings"} icon={faCog}>Settings</ButtonSidebar>
+            {
+                process.env.NODE_ENV === "development" ?
+                <ButtonSidebar to={"/sandbox"} icon={faWrench}>Sandbox</ButtonSidebar>
+                : null
+            }
             {children}
         </div>
     )

code/frontend/src/routes/.gitignore

@@ -0,0 +1 @@
+PageSandbox.*

code/frontend/src/routes/PageSandbox.js

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

code/frontend/src/routes/PageSandbox.module.css

@@ -0,0 +1,9 @@
+.PageSandbox {
+    display: flex;
+    flex-direction: column;
+
+    grid-gap: 10px;
+
+    width: 100%;
+    height: 100%;
+}