working on view location details page

frontend/src/components/sidebar/SidebarLinksGroup.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Group, Box, Collapse, ThemeIcon, Text, UnstyledButton, createStyles } from '@mantine/core';
+import { Group, Box, Collapse, ThemeIcon, UnstyledButton, createStyles } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { BiChevronLeft, BiChevronRight } from 'react-icons/bi';
 import { useAtom } from 'jotai';
@@ -52,10 +52,11 @@ const useStyles = createStyles((theme) => ({
 
 
 export function LinksGroup(props) {
-  const { icon: Icon, label, initiallyOpened, links } = props
+  const { icon: Icon, label, initiallyOpened, links, link } = props
 
   const isMobile = useMediaQuery('(max-width: 768px)')
   const hasLinks = Array.isArray(links);
+  const hasLink = (typeof link === "object")
   const [opened, setOpened] = useState(initiallyOpened || false);
   // Navigation State
   const [activePage, setActivePage] = useAtom(activePageAtom)
@@ -67,7 +68,7 @@ export function LinksGroup(props) {
 
   const ChevronIcon = theme.dir === 'ltr' ? BiChevronRight : BiChevronLeft;
 
-  const navigate = (event, location) => {
+  const navigate = (location) => {
     // event.preventDefault()
     if (location === "rooms") {
         setRoomFilter({})
@@ -88,36 +89,65 @@ export function LinksGroup(props) {
         className={activePage === link.label.toLowerCase() ? cx(classes.link, classes.activeLink) : classes.link}
         to={link.link}
         key={link.label}
-        onClick={(e) => {navigate(e, link.label.toLowerCase())}}
+        onClick={() => {navigate(link.label.toLowerCase())}}
         >
         {link.label}
         </Link>
     </>
   ));
 
+  const buttonContents = () => {
+    return (
+      <Group position="apart" spacing={0}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <ThemeIcon variant="light" size={30}>
+          <Icon size={18} />
+        </ThemeIcon>
+        <Box ml="md">{label}</Box>
+      </Box>
+      {hasLinks && (
+        <ChevronIcon
+          className={classes.chevron}
+          size={14}
+          style={{
+            transform: opened ? `rotate(${theme.dir === 'rtl' ? -90 : 90}deg)` : 'none',
+          }}
+        />
+      )}
+      </Group>
+    )
+  }
+
+  const myButton = () => {
+    if (hasLink) {
+      return (
+        <UnstyledButton
+        onClick={hasLinks ? () => setOpened((o) => !o) : () => navigate(link.label.toLowerCase())} 
+        className={activePage === link.label.toLowerCase() ? cx(classes.control, classes.activeLink) : classes.control}
+        component={Link}
+        to={link.link}
+        key={link.label}
+      >
+        {buttonContents()}
+      </UnstyledButton>
+      )
+    } else {
+      return (
+      <UnstyledButton 
+        onClick={() => setOpened((o) => !o)} 
+        className={classes.control}
+      >
+        {buttonContents()}
+      </UnstyledButton>
+      )
+    }
+  }
 
   return (
     <>
-      <UnstyledButton onClick={() => setOpened((o) => !o)} className={classes.control}>
-        <Group position="apart" spacing={0}>
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <ThemeIcon variant="light" size={30}>
-              <Icon size={18} />
-            </ThemeIcon>
-            <Box ml="md">{label}</Box>
-          </Box>
-          {hasLinks && (
-            <ChevronIcon
-              className={classes.chevron}
-              size={14}
-              style={{
-                transform: opened ? `rotate(${theme.dir === 'rtl' ? -90 : 90}deg)` : 'none',
-              }}
-            />
-          )}
-        </Group>
-      </UnstyledButton>
+      {myButton()}
       {hasLinks ? <Collapse in={opened}>{items}</Collapse> : null}
     </>
-  );
+
+  )
 }