- fixed typo;

- new version of menu topbar;
- registration page - added automatic birth date population;

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

@@ -0,0 +1,48 @@
+import React, { useRef } from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+import { Toolbar } from 'primereact/toolbar';
+import { Link } from 'react-router-dom';
+import LogoIcon from '../../../../icons/LogoIcon';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputText } from 'primereact/inputtext';
+import { Badge } from 'primereact/badge';
+import { Button } from 'primereact/button';
+import TopBarProfileMenu from '../../../../components/TopBarProfileMenu';
+
+const AppTopbar = () => {
+    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="0"></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(
+        <Toolbar start={startContent} end={endContent} className="topBar"/>
+    )
+}
+
+export default AppTopbar;

src/layouts/DefaultLayout/index.js

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useLocation } from 'react-router-dom';
 
@@ -7,18 +6,10 @@ import { useLocation } from 'react-router-dom';
 import { useStore, storeSet } from '../../store';
 
 // 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';
+import AppTopbar from './components/AppTopbar';
 
 const DefaultLayout = ({ children }) => {
-    const menuLeft = useRef(null);
     const isError404 = useStore().main.isError404();
     const location = useLocation();
 
@@ -26,34 +17,9 @@ const DefaultLayout = ({ children }) => {
         storeSet.main.isError404(false);
     }, [location]);
 
-    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"/>
+            <AppTopbar/>
             <div className="inner">
                 <AppSidebar/>
                 <main>