Merge pull request #189 from Zenmo/158-new-layout

158 new layout

frontend/src/App.tsx

@@ -1,10 +1,12 @@
 import React, {FunctionComponent} from 'react'
+import {ZeroHeader} from "./components/zero-header";
 import {Outlet} from "react-router-dom";
 
 export const App: FunctionComponent = () => {
     return (
         <>
-            <Outlet/>
+            <ZeroHeader />
+            <Outlet />
         </>
     );
-};
+};

frontend/src/admin/admin.tsx → frontend/src/admin/surveys.tsx

@@ -16,7 +16,7 @@ import {ZeroLayout} from "../components/zero-layout"
 import {AdminButtonRow} from "./admin-button-row"
 import {SurveyIncludeInSimulationCheckbox} from "./survey-include-in-simulation-checkbox"
 
-export const Admin: FunctionComponent = () => {
+export const Surveys: FunctionComponent = () => {
     const {loading, surveys, changeSurvey, removeSurvey} = useSurveys()
 
     const multipleProjects = surveys.map(survey => survey.zenmoProject)

frontend/src/components/zero-header.tsx

@@ -1,16 +1,78 @@
-import React from "react";
+import React, {FunctionComponent, PropsWithChildren, useState} from "react"
+import {Button} from "primereact/button";
+import {Sidebar} from "primereact/sidebar";
+import {css} from "@emotion/react";
+import {To, useNavigate} from "react-router-dom";
 
-export const ZeroHeader = () => (
-    <h1 style={{
-        position: 'absolute',
-        left: 0,
-        padding: '.5em 1em',
-        margin: 0,
-    }}>
-        <img
-            src="https://zenmo.com/wp-content/uploads/elementor/thumbs/zenmo-logo-website-light-grey-square-o1piz2j6llwl7n0xd84ywkivuyf22xei68ewzwrvmc.png"
-            style={{height: '1em', verticalAlign: 'sub'}}/>
-        &nbsp;
-        Zenmo Zero
-    </h1>
-)
+const sidebarStyle = css({
+    width: '16rem',
+    backgroundColor: '#f5f5f5',
+    borderRight: '1px solid #ddd',
+});
+
+const buttonStyle = css({
+    display: 'block',
+    marginBottom: '3rem',
+    width: '100%',
+
+    textAlign: 'left',
+    padding: '0.5em 1em',
+    border: 'none',
+    borderBottom: '1px solid #ddd',
+    color: '#333',
+    background: '#f5f5f5',
+    transition: 'background-color 0.2s ease-in-out',
+    fontWeight: 'normal',
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: '#ebebeb',
+        color: '#007ad9',
+    },
+});
+
+export const ZeroHeader: FunctionComponent<PropsWithChildren & {}> = () => {
+    const [visible, setVisible] = useState(false);
+    const navigate = useNavigate();
+
+    const loadContent = (navidateTo: To) => {
+        setVisible(false);
+        navigate(navidateTo)
+    }
+    return (
+        <div className="app-header">
+            <div className="header" css={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '1em 1em',
+                backgroundColor: '#f5f5f5',
+                boxShadow: '1px solid #ddd'
+            }}>
+                <Button icon="pi pi-bars" onClick={() => setVisible(true)}/>
+                <a href="https://zenmo.com">
+                    <img
+                        alt="Zenmo logo"
+                        src="https://zenmo.com/wp-content/uploads/elementor/thumbs/zenmo-logo-website-light-grey-square-o1piz2j6llwl7n0xd84ywkivuyf22xei68ewzwrvmc.png"
+                        style={{height: "1.5em", verticalAlign: "sub"}}/>
+                    &nbsp;
+                    <b>Zenmo Zero</b>
+                </a>
+            </div>
+
+            <Sidebar visible={visible} position="left" onHide={() => setVisible(false)} css={sidebarStyle}>
+                <a onClick={() => loadContent(`/`)} css={buttonStyle}>
+                    <i className="pi pi-fw pi-user" style={{marginRight: '0.5em'}}></i>
+                    Home
+                </a>
+                <a onClick={() => loadContent('/surveys')} css={buttonStyle}>
+                    <i className="pi pi-fw pi-file" style={{marginRight: '0.5em'}}></i>
+                    Surveys
+                </a>
+                <a onClick={() => loadContent('/simulation')} css={buttonStyle}>
+                    <i className="pi pi-fw pi-file" style={{marginRight: '0.5em'}}></i>
+                    Simulation
+                </a>
+            </Sidebar>
+        </div>
+    );
+};

frontend/src/components/zero-layout.tsx

@@ -29,4 +29,5 @@ export const ZeroLayout: FunctionComponent<PropsWithChildren & {
         </h3>}
         {children}
     </div>
-)
+)
+

frontend/src/router.tsx

@@ -5,7 +5,7 @@ import {SurveyFromProject} from "./components/company-survey-v2/survey"
 import {ThankYou} from './components/thank-you'
 import {LoginWidget} from "./user/login";
 import {BedrijvenFormV1} from "./components/bedrijven-form-v1";
-import {Admin} from "./admin/admin";
+import {Surveys} from "./admin/surveys";
 import {fetchSurveyById, SurveyById, SurveyByIdLoaderData} from "./components/company-survey-v2/survey-by-id"
 import {Intro} from "./components/intro"
 import {ExcelImport} from "./excel-import/excel-import"
@@ -20,6 +20,7 @@ export const router = createBrowserRouter([
         element: <App />,
         children: [
             {path: "", element: <Intro />},
+            {path: "/surveys", element: <Surveys />},
             {path: "/simulation", element: <Simulation />},
         ],
     },
@@ -79,7 +80,7 @@ export const router = createBrowserRouter([
     },
     {
         path: "/admin",
-        element: <Admin />,
+        element: <Surveys />,
     },
     {
         path: "/admin/import-excel",