- added main layout, sidebar, toolbar;

- started dashboard page, added first widget;
- created new theme 'gepafin' - styles for the app;

src/layouts/DefaultLayout/components/AppSidebar/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+
+const AppSidebar = () => {
+    const items = [
+        {
+            label: __('Riepilogo', 'gepafin'),
+            icon: 'pi pi-objects-column',
+            clickFn: () => {},
+            id: 1
+        },
+        {
+            label: __('Gestione Bandi', 'gepafin'),
+            icon: 'pi pi-file',
+            clickFn: () => {},
+            id: 2
+        },
+        {
+            label: __('Gestione Utenti', 'gepafin'),
+            icon: 'pi pi-users',
+            clickFn: () => {},
+            id: 3
+        },
+        {
+            label: __('Configurazione', 'gepafin'),
+            icon: 'pi pi-cog',
+            clickFn: () => {},
+            id: 4
+        },
+        {
+            label: __('Report e Analisi', 'gepafin'),
+            icon: 'pi pi-chart-bar',
+            clickFn: () => {},
+            id: 5
+        },
+        {
+            label: __('Log di Sistema', 'gepafin'),
+            icon: 'pi pi-receipt',
+            clickFn: () => {},
+            id: 6
+        }
+    ]
+
+    return <sidebar>
+        <ul>
+            {items.map(o => <li key={o.id}>
+                <a href="#" onClick={o.clickFn} className={o.id === 1 ? 'active' : ''}>
+                    <i className={o.icon}></i>
+                    <span>{o.label}</span>
+                </a>
+            </li>)}
+        </ul>
+    </sidebar>
+}
+
+export default AppSidebar;

src/layouts/DefaultLayout/index.js

@@ -1,12 +1,55 @@
-import React from 'react';
+import React, { useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { __ } from '@wordpress/i18n';
+
+// components
+import { Toolbar } from 'primereact/toolbar';
+import { Button } from 'primereact/button';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputText } from 'primereact/inputtext';
+import { Badge } from 'primereact/badge';
+import LogoIcon from '../../icons/LogoIcon';
+import TopBarProfileMenu from '../../components/TopBarProfileMenu';
+import AppSidebar from './components/AppSidebar';
 
 const DefaultLayout = ({ children }) => {
-    return(
-        <div>
-            <div>
-                Top bar
+    const menuLeft = useRef(null);
+
+    const startContent = <Link to="/">
+        <LogoIcon/>
+    </Link>;
+
+    const endContent = <div className="topBar__endContent">
+        <IconField iconPosition="right">
+            <InputIcon className="pi pi-search"> </InputIcon>
+            <InputText v-model="value1" placeholder={__('Cerca', 'gepafin')} disabled={true}/>
+        </IconField>
+        <i className="pi pi-bell p-overlay-badge topBar__icon">
+            <Badge value="2"></Badge>
+        </i>
+        <i className="pi pi-envelope p-overlay-badge topBar__icon">
+            <Badge severity="danger"></Badge>
+        </i>
+        <Button
+            className="topBar__profileBtn"
+            outlined
+            onClick={(event) => menuLeft.current.toggle(event)} aria-controls="topBar_profileMenu" aria-haspopup>
+            <i className="pi pi-user"></i>
+            <i className="pi pi-chevron-down"></i>
+        </Button>
+        <TopBarProfileMenu menuLeftRef={menuLeft}/>
+    </div>
+
+    return (
+        <div className="wrapper">
+            <Toolbar start={startContent} end={endContent} className="topBar"/>
+            <div className="inner">
+                <AppSidebar/>
+                <main>
+                    {children}
+                </main>
             </div>
-            {children}
         </div>
     )
 }