- added main layout, sidebar, toolbar;

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

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>
     )
 }