- save progress;

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 
 // components
@@ -11,9 +11,11 @@ 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';
 
 const AppTopbar = () => {
     const menuLeft = useRef(null);
+    const [notificationsVisible, setNotificationsVisible] = useState(false);
 
     const startContent = <Link to="/">
         <LogoIcon/>
@@ -42,7 +44,18 @@ const AppTopbar = () => {
     </div>
 
     return (
-        <Toolbar start={startContent} end={endContent} className="topBar"/>
+        <>
+            <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>
+        </>
     )
 }