Merge branch 'feature/sidebar-hover-message2' into 'main'

Add tooltip messaging on sidebar when closed

See merge request vkuchenik/website-framework!29

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -1,5 +1,6 @@
-import { useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
+import { useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton } from "@chakra-ui/react";
 import { ColorModeButton } from "@/components/ui/color-mode";
+import { Tooltip } from "@/components/ui/tooltip";
 import { FaVolcano } from "react-icons/fa6";
 import { RxHamburgerMenu } from "react-icons/rx";
 import { useState } from "react";
@@ -96,8 +97,9 @@ export default function Sidebar({ onChangeView }) {
 
       {buttons.map((button, idx) => {
         const Icon = button.icon;
-        return (
-          <Button key={idx} 
+        const buttonElement = (
+          <Button 
+                  // key={idx} 
                   css={styles.buttons} 
                   onClick={() => {
                     setActiveButton(idx);
@@ -119,9 +121,17 @@ export default function Sidebar({ onChangeView }) {
                 {button.name}
               </span>
           </Button>
-        )
+        );
+        // console.log("buttonElement is:", buttonElement)
+        console.log("Returning:", !isOpen ? "Tooltip" : "Button", buttonElement);
+        return !isOpen ? (
+          <Tooltip key={ idx } content={ button.name } placement="right" hasArrow>
+            { buttonElement }
+          </Tooltip>
+        ) : (
+          buttonElement 
+        );
       })}
-      
       <ColorModeButton position="absolute" bottom="2"/>
     </Box>
   );