implementing navbar custom buttons

packages/geoview-core/public/css/style.css

@@ -59,6 +59,7 @@ td {
   justify-content: center;
   width: 100%;
   margin: 10px;
+  gap: 10px;
 }
 
 .index-header-title {

packages/geoview-core/public/templates/add-panels.html

@@ -41,7 +41,7 @@ <h1><strong>Add Panels</strong></h1>
       <button class="add-appbar-panel-btn">Add Appbar Panel</button>
       <button class="add-navbar-panel-btn">Add Navbar Panel</button>
       <button class="add-navbar-button-btn">Add Navbar Button</button>
-      <button class="add-navbar-button-group-btn">Add Navbar Panel New Group</button>
+      <input type="text" id="navbar-button-group-name" placeholder="Enter group name" value="groupName1" />
     </div>
     <div
       id="mapWM"
@@ -82,6 +82,9 @@ <h1><strong>Add Panels</strong></h1>
           // get add panel button element for WM map
           var addAppbarPanelBtn = document.getElementsByClassName('add-appbar-panel-btn')[0];
 
+          // get the input for the group name
+          var navbarButtonGroupNameInput = document.getElementById('navbar-button-group-name');
+
           // add app-bar panel btn click event handler
           // button will open a panel on the app-bar
           addAppbarPanelBtn.addEventListener('click', function (e) {
@@ -108,20 +111,26 @@ <h1><strong>Add Panels</strong></h1>
           // add nav-bar panel btn click event handler
           // button will open a panel on the nav-bar
           addNavbarPanelBtn.addEventListener('click', function (e) {
+            const groupName = navbarButtonGroupNameInput.value;
+
+            if(groupName === '') {
+              alert('Enter a value group name');
+              return;
+            }
             const button = {
               tooltip: 'Test',
               children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
               tooltipPlacement: 'left',
             };
 
             const panel = {
-              title: 'Test',
-              content: `<div>Test content</div>`,
-              width: 200,
+              title: 'Panel Title',
+              content: `<div><p>Vestibulum in fringilla tortor. Aliquam placerat odio nec urna consequat tincidunt eu sit amet mauris.</p><p>Donec vestibulum tellus ex, a venenatis urna finibus quis. Sed venenatis nisi porttitor ex laoreet auctor. </p></div>`,
+              width: 400,
             };
 
             // call an api function to add a panel with a button
-            cgpv.api.maps['mapWM'].navBarApi.createNavbarButtonPanel(button, panel, null);
+            cgpv.api.maps['mapWM'].navBarApi.createNavbarButtonPanel(button, panel, groupName);
           });
 
           // get add nav-bar button element for WM map
@@ -130,42 +139,26 @@ <h1><strong>Add Panels</strong></h1>
           // add nav-bar button btn click event handler
           // button will call a function
           addNavbarButtonBtn.addEventListener('click', function (e) {
+            const groupName = navbarButtonGroupNameInput.value;
+
+            if(groupName === '') {
+              alert('Enter a value group name');
+              return;
+            }
+
             const button = {
-              tooltip: 'Test',
+              tooltip: `Test (${groupName})`,
               children: cgpv.react.createElement(cgpv.ui.elements.OpenInBrowserIcon),
               tooltipPlacement: 'left',
               onClick: function () {
-                alert('test function');
+                alert('You clicked on a navbar test button');
               },
             };
 
             // call an api function to add a panel with a button
-            cgpv.api.maps['mapWM'].navBarApi.createNavbarButton(button, null);
+            cgpv.api.maps['mapWM'].navBarApi.createNavbarButton(button, groupName);
           });
 
-          // get add nav-bar button group element for WM map
-          var addNavbarButtonGroupBtn = document.getElementsByClassName('add-navbar-button-group-btn')[0];
-
-          // add nav-bar button group btn click event handler
-          // button will add a button panel on the nav-bar in a new group
-          addNavbarButtonGroupBtn.addEventListener('click', function (e) {
-            const button = {
-              id: 'id',
-              tooltip: 'Group',
-              tooltipPlacement: 'left',
-              children: cgpv.react.createElement(cgpv.ui.elements.GroupIcon), // comment
-            };
-
-            const panel = {
-              panelId: 'panerId',
-              title: 'Group',
-              content: `<div>Test content</div>`,
-              width: 400,
-            };
-
-            // call an api function to add a new button panel in the nav-bar in a new group
-            cgpv.api.maps['mapWM'].navBarApi.createNavbarButtonPanel(button, panel, 'newGroup');
-          });
         }
       });
 

packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx

@@ -0,0 +1,85 @@
+import { useState, MouseEvent } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { getSxClasses } from './nav-bar-style';
+import { Box, Popover, IconButton, DialogTitle, DialogContent, Typography } from '@/ui';
+import { useAppFullscreenActive, useAppGeoviewHTMLElement } from '@/core/stores/store-interface-and-intial-values/app-state';
+import { useGeoViewMapId } from '@/core/stores/geoview-store';
+import { TypeButtonPanel } from '@/ui/panel/panel-types';
+
+interface NavbarPanelButtonType {
+  buttonPanel: TypeButtonPanel;
+}
+
+/**
+ * Navbar modal component
+ *
+ * @returns {JSX.Element} the export modal component
+ */
+export default function NavbarPanelButton({ buttonPanel }: NavbarPanelButtonType): JSX.Element {
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
+  const mapId = useGeoViewMapId();
+  const geoviewElement = useAppGeoviewHTMLElement();
+  const isMapFullScreen = useAppFullscreenActive();
+
+  const shellContainer = geoviewElement.querySelector(`[id^="shell-${mapId}"]`) as HTMLElement;
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const id = open ? 'simple-popover' : undefined;
+
+  const handleClick = (event: MouseEvent<HTMLElement>): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton
+        key={buttonPanel.button.id}
+        id={buttonPanel.button.id}
+        tooltip={buttonPanel.button.tooltip}
+        tooltipPlacement={buttonPanel.button.tooltipPlacement}
+        sx={sxClasses.navButton}
+        onClick={(e) => handleClick(e)}
+        className={open ? 'highlighted' : ''}
+      >
+        {buttonPanel.button.children}
+      </IconButton>
+
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'center',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'center',
+          horizontal: 'right',
+        }}
+        onClose={handleClose}
+        // popover will be displayed when screen is in fullscreen mode.
+        {...(isMapFullScreen && { container: shellContainer })}
+        sx={{
+          '& .MuiPopover-paper': {
+            transform: 'translateX(-8px) !important', // Adjust the value for desired spacing
+          },
+        }}
+      >
+        <Box sx={{ width: `${buttonPanel.panel?.width ?? 300}px`, maxHeight: '500px' }}>
+          <DialogTitle>{(buttonPanel.panel?.title as string) ?? ''}</DialogTitle>
+          <DialogContent dividers>
+            <Typography dangerouslySetInnerHTML={{ __html: buttonPanel?.panel?.content ?? '' }} />
+          </DialogContent>
+        </Box>
+      </Popover>
+    </>
+  );
+}

packages/geoview-core/src/core/components/nav-bar/nav-bar-style.ts

@@ -5,34 +5,37 @@ import { Theme } from '@mui/material/styles';
 export const getSxClasses = (theme: Theme): any => ({
   navBarRef: {
     position: 'absolute',
-    right: theme.spacing(5),
-    // height: '600px',
-    // maxHeight: 'calc( 100% - 200px)',
+    right: theme.spacing(7),
+    padding: '6px',
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column-reverse',
     marginRight: 0,
     zIndex: 150,
     pointerEvents: 'all',
     justifyContent: 'center',
     backgroundColor: 'transparent',
     transition: 'bottom 300ms ease-in-out',
     bottom: '6rem',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap-reverse',
+    maxHeight: '60%',
+    gap: '15px',
   },
   navBtnGroupContainer: {
     display: 'flex',
     position: 'relative',
-    flexDirection: 'column',
     pointerEvents: 'auto',
-    justifyContent: 'end',
+    // justifyContent: 'end',
     overflowY: 'hidden',
     padding: 5,
+    flexDirection: 'column',
+    // flexWrap: 'wrap',
+    // maxHeight: '520px',
   },
   navBtnGroup: {
     borderRadius: theme.spacing(5),
     backgroundColor: theme.palette.geoViewColor.bgColor.light[500],
-    '&:not(:last-child)': {
-      marginBottom: theme.spacing(11),
-    },
+
     '& .MuiButtonGroup-grouped:not(:last-child)': {
       borderColor: theme.palette.geoViewColor.bgColor.light[900],
     },