Rename and Restructure

+ took out extra 'layout' directory. + 'Canvas' postfix removed from all files in the views directory. + "WidgetCanvas" renamed to "MyDashboard"
2025-08-05 12:57:18 -07:00
parent 03a335710f
commit ff95f2cbc0
27 changed files with 20 additions and 20 deletions
@@ -0,0 +1,106 @@
+import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
+import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
+import Tooltip from "../Canvas/CanvasComponents/Tooltip.jsx";
+import { FaVolcano } from "react-icons/fa6";
+import { FaHome } from "react-icons/fa";
+import { FaGlobeAmericas } from "react-icons/fa";
+import { FaMapMarkerAlt } from "react-icons/fa";
+import { HiUsers } from "react-icons/hi2";
+import { VscThreeBars } from "react-icons/vsc";
+import { useState, useEffect } from "react";
+import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
+
+export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
+  const [isOpen, setIsOpen] = useState(true);
+  const [activeButton, setActiveButton] = useState(0)
+  const recipe = useSlotRecipe({ key: "sidebar" });
+  const styles = recipe();
+  const { toggleColorMode } = useColorMode();
+
+    // this list of btns will come from the db (not every usr will have access to admin)
+  const buttons = [
+    {icon: FaHome, name: "Home", view: "widget"},
+    {icon: FaGlobeAmericas, name: "Global Map", view: "global"},
+    {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"},
+    {icon: FaVolcano, name: "Volcano", view: "volcano"},
+    {icon: HiUsers, name: "Admin", view: "admin"}
+  ];
+
+  const toggleSidebar = () => {
+    if (isOpen) setIsOpen(false);
+    else setIsOpen(true);
+  };
+
+  // Track currrent view from both Sidebar and Canvas when 'view' changes
+  useEffect(() => {
+    console.log("Current view = ", view);
+    const newIndex = buttons.findIndex((btn) => {
+      if (btn.view === "widget") {
+        return DASHBOARD_VIEWS.includes(view);
+      }
+      return btn.view === view;
+    });
+    if (newIndex !== -1 ) {
+      setActiveButton(newIndex);
+    }
+  }, [view]);
+
+  return (
+    <Box
+      css={styles.root}
+      width={isOpen ? "210px" : "71px"}
+      transition="width 0.4s ease"
+      position="relative"
+    >
+      <IconButton
+        aria-label="Toggle Sidebar"
+        variant="plain"
+        size="md"
+        onClick={toggleSidebar}
+        width="54px"
+      >
+        <VscThreeBars />
+      </IconButton>
+
+      {buttons.map((button, idx) => {
+        const Icon = button.icon;
+        return (
+          <Tooltip key={button.name} tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
+            <Button 
+              key={button.name} 
+              css={styles.buttons} 
+              onClick={() => {
+                onChangeView(button.view); // Trigger state change in Dashboard
+              }} 
+              bg={activeButton === idx ? "primary":undefined} 
+              color={activeButton === idx ? "#FFFFFF":undefined} 
+              justifyContent="flex-start"
+            >           
+              <Icon />
+              <span
+                style={{
+                opacity: isOpen ? 1 : 0,
+                transition: "opacity 0.4s ease",
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                display: "inline-block",
+                lineHeight: 1.2            
+                }}
+              >
+                {button.name}
+              </span>
+            </Button>
+          </Tooltip>
+        )
+      })}
+      <ColorModeButton 
+      onClick={
+        () => {
+          setDarkMode(!darkMode);
+          toggleColorMode();
+        }}
+      position="absolute" 
+      bottom="2"/>
+    </Box>
+  );
+}