feat(cwn-dashboard): added a preview of the customizable navbar

src/components/Navbar.js

@@ -8,8 +8,9 @@ import {
   Typography,
 } from '@mui/material';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { initialState } from 'context/configContext';
+import { getStorageValue } from 'hooks/globalHooks/useLocalStorage';
 import MenuBar from 'images/MenuBar';
 import { makeStyles } from 'models/makeStyles';
 import ChangeThemeButton from './ChangeThemeButton';
@@ -60,11 +61,11 @@ const useStyles = makeStyles()((theme) => ({
   },
 }));
 
-function Navbar() {
+function Navbar({ preview }) {
   const [anchorEl, setAnchorEl] = useState(null);
   const isMobile = useMobile();
   const [webMapConfig] = useLocalStorage('config', initialState);
-  const { items: navItems } = webMapConfig.navbar;
+  const [navItems, setNavItems] = useState(webMapConfig.navbar.items);
 
   const open = Boolean(anchorEl);
   const handleMenuClick = (event) => {
@@ -74,10 +75,24 @@ function Navbar() {
     setAnchorEl(null);
   };
   const { classes } = useStyles();
+
+  // Detect webMapConfig changes. Reactively update the nav-items;
+  useEffect(() => {
+    const updateFunction = () => {
+      const localWebMapConfig = getStorageValue('config', initialState);
+      setNavItems(localWebMapConfig.navbar.items);
+    };
+    window.addEventListener('storage', updateFunction);
+    return () => {
+      window.removeEventListener('storage', updateFunction);
+    };
+  }, []);
+
   return (
     <AppBar
       elevation={4}
       className={classes.navContainer}
+      sx={preview ? { width: '100%!important' } : null}
       color="default"
       position="static"
     >

src/hooks/globalHooks/useLocalStorage.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 const KEY_PREFIX = 'greenstand-web-map-client-';
 
 // Get value from localStorage if possible, otherwise return provided default
-function getStorageValue(key, defaultValue) {
+export function getStorageValue(key, defaultValue) {
   if (typeof window !== 'undefined') {
     const value = localStorage.getItem(KEY_PREFIX + key);
     let saved;
@@ -23,6 +23,7 @@ const useLocalStorage = (key, defaultValue) => {
 
   useEffect(() => {
     localStorage.setItem(KEY_PREFIX + key, JSON.stringify(value));
+    window.dispatchEvent(new Event('storage'));
   }, [key, value]);
 
   return [value, setValue];

src/pages/admin/global.js

@@ -2,10 +2,12 @@ import { Box, Typography, Divider, List } from '@mui/material';
 import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
 import HeadTag from 'components/HeadTag';
+import Navbar from 'components/Navbar';
 import ChangeLogoSection from 'components/dashboard/ChangeLogoSection';
 import ChangeNavSection from 'components/dashboard/ChangeNavSection';
 import { Tab, TabPanel } from 'components/dashboard/Tabs';
 import { ConfigProvider, useConfigContext } from 'context/configContext';
+import { CustomThemeProvider } from 'context/themeContext';
 import { getOrganizationById } from 'models/api';
 import { updateLogoUrl } from 'models/config.reducer';
 import { wrapper } from 'models/utils';
@@ -47,7 +49,7 @@ function Global({ organization }) {
   }, [mapContext, organization, state.map.initialLocation]);
 
   return (
-    <>
+    <CustomThemeProvider>
       <HeadTag title="Admin Dashboard" />
       <Box
         sx={{
@@ -98,7 +100,21 @@ function Global({ organization }) {
           }}
         >
           <TabPanel value={currentTab} index={0}>
-            <Typography variant="h5">Navbar View</Typography>
+            <Typography variant="h4">Navbar Preview</Typography>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                paddingY: '50px;',
+                backgroundColor: 'background.paperDark',
+                borderRadius: '8px',
+                marginBottom: '24px',
+              }}
+            >
+              <Navbar preview />
+            </Box>
+
             <Box
               sx={{
                 display: 'flex',
@@ -119,7 +135,7 @@ function Global({ organization }) {
           </TabPanel>
         </Box>
       </Box>
-    </>
+    </CustomThemeProvider>
   );
 }