Add first widget button with popup menu

client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx

@@ -1,28 +1,68 @@
-import { Box, Heading } from '@chakra-ui/react'
+import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
+// import AddWidgetMenu from './AddWidgetMenu';
 
 export default function FirstWidgetButton() {
 
     return (
-        <Box
+        <Menu.Root positioning={{ placement: "right-start" }} >
-            p={6}
+            <Menu.Trigger asChild>
-            m={4}
+                <Box
-            borderRadius="md" 
+                    p={6}
-            boxShadow="md"
+                    m="auto"
-            border="2px dashed"
+                    mt={6}
-            borderColor="gray.300"
+                    align="center"
-            bg="gray.50"
+                    textAlign="center"
-            textAlign="center"
+                    justify="center"
-            cursor="pointer"
+                    width="400px"
-            _hover = {{
+                    borderRadius="md" 
-                bg: "gray.100",
+                    boxShadow="md"
-                borderColor: "gray.400",
+                    border="2px dashed"
-                boxShadow: "lg",
+                    borderColor="gray.300"
-            }}
+                    bg="gray.50"
-            transition="all 0.2s ease-in-out"
+                    cursor="pointer"
-        >
+                    _hover = {{
-            <Heading fontWeight="bold" fontSize="xl" color="gray.700">
+                        bg: "gray.100",
-                Add First Widget
+                        borderColor: "gray.400",
-            </Heading>
+                        boxShadow: "lg",
-        </Box>
+                    }}
+                >
+                    Add First Widget
+                </Box>
+            </Menu.Trigger>
+            <Portal>
+                <Menu.Positioner>
+                    <Menu.Content>
+                        <Menu.Item value="alert level">Alert Level</Menu.Item>
+                        <Menu.Item value="co2">CO2</Menu.Item>
+                        <Menu.Item value="ivans">IVANS</Menu.Item>
+                        <Menu.Item value="plume heights">Plume Heights</Menu.Item>
+                        <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
+                    </Menu.Content>
+                </Menu.Positioner>
+            </Portal>
+        </Menu.Root>
+
+        // <Box
+        //     p={6}
+        //     m={4}
+        //     borderRadius="md" 
+        //     boxShadow="md"
+        //     border="2px dashed"
+        //     borderColor="gray.300"
+        //     bg="gray.50"
+        //     textAlign="center"
+        //     cursor="pointer"
+        //     _hover = {{
+        //         bg: "gray.100",
+        //         borderColor: "gray.400",
+        //         boxShadow: "lg",
+        //     }}
+        //     transition="all 0.2s ease-in-out"
+        // >
+        //     {/* <AddWidgetMenu /> */}
+        //     <Heading fontWeight="bold" fontSize="xl" color="gray.700">
+        //         Add First Widget
+        //     </Heading>
+        // </Box>
     );
 }

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -25,13 +25,13 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
     });
   };
 
+  // Show large 'Add Widget' button when dashboard is empty
   if ( !widgetArray.length ) {
     return (
       <Flex
-        key="first-widget"
         align="center"
         justify="center"
-        height="300px"
+        h="100%"
         w="100%"
         bg="gray.150"
         borderRadius="md"
@@ -41,6 +41,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
     );
   }
 
+  // Show responsive grid of widgets 
   return (
     <chakra.div width="100%">
       <ResponsiveGridLayout
@@ -58,7 +59,6 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         position="relative"
         resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
       >
-        
          { merged.map((item) => {
             const Widget = item.widget;
             return (
@@ -68,8 +68,6 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
             );
           })
         }
-          
-        
       </ResponsiveGridLayout>
     </chakra.div>
   );