- added sidebar container for notifications;

- styles and interactions for notifications;

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 
 // components
@@ -8,14 +8,12 @@ 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';
-import { Sidebar } from 'primereact/sidebar';
+import NotificationsSidebar from '../../../../components/NotificationsSidebar';
 
 const AppTopbar = () => {
     const menuLeft = useRef(null);
-    const [notificationsVisible, setNotificationsVisible] = useState(false);
 
     const startContent = <Link to="/">
         <LogoIcon/>
@@ -26,14 +24,13 @@ const AppTopbar = () => {
             <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>
+        <NotificationsSidebar/>
         <i className="pi pi-envelope topBar__icon"></i>
         {/*<i className="pi pi-envelope p-overlay-badge topBar__icon">
             <Badge severity="danger"></Badge>
         </i>*/}
         <Button
+            type="button"
             className="topBar__profileBtn"
             outlined
             onClick={(event) => menuLeft.current.toggle(event)} aria-controls="topBar_profileMenu" aria-haspopup>
@@ -44,18 +41,7 @@ const AppTopbar = () => {
     </div>
 
     return (
-        <>
-            <Toolbar start={startContent} end={endContent} className="topBar"/>
-            <Sidebar visible={notificationsVisible} onHide={() => setNotificationsVisible(false)} fullScreen>
-                <h2>Sidebar</h2>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-                    et dolore magna aliqua.
-                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat.
-                </p>
-            </Sidebar>
-        </>
+        <Toolbar start={startContent} end={endContent} className="topBar"/>
     )
 }