feat module 1,2,4 : [UI] fixed navbar transition

src/components/Navbar/Navbar.jsx

@@ -389,10 +389,7 @@ const Navbar = () => {
       clearTimeout(childTransitionTimerRef.current);
     }
 
-    setActiveGroup(null);
-    childTransitionTimerRef.current = setTimeout(() => {
-      setActiveGroup(groupLabel);
-    }, 40);
+    setActiveGroup(groupLabel);
   }
 
   const findCollectionForMenuItem = (productType, item) => {
@@ -615,12 +612,13 @@ const Navbar = () => {
                           position: "absolute",
                           top: "100%",
                           left: 0,
-                          width: menu.groups ? (activeGroup ? 560 : 260) : 260,
+                          width: menu.groups ? 560 : 260,
                           height: dropdownTopOffset,
                           zIndex: 1000,
                           backgroundColor: "transparent",
                           visibility: activeMenu === menu.label ? "visible" : "hidden",
                           pointerEvents: activeMenu === menu.label ? "auto" : "none",
+                          transition: "width .25s ease-in-out",
                         }}
                       />
                       {/* Submenu dropdown card: controls dropdown position, width, background, and animation */}
@@ -630,27 +628,41 @@ const Navbar = () => {
                           // Measured from this menu label to the real bottom of the navbar.
                           top: dropdownTopOffset,
                           left: 0,
-                          width: menu.groups ? (activeGroup ? 560 : 260) : 260,
-                          backgroundColor: "#FFF",
+                          width: menu.groups ? 560 : 260,
+                          backgroundColor: menu.groups ? "transparent" : "#FFF",
                           color: "#000",
-                          border: "1px solid rgba(0,0,0,0.08)",
+                          border: menu.groups ? 0 : "1px solid rgba(0,0,0,0.08)",
                           borderTop: 0,
-                          boxShadow: "0 2px 6px rgba(0,0,0,0.12)",
+                          boxShadow: menu.groups ? "none" : "0 2px 6px rgba(0,0,0,0.12)",
                           display: "flex",
-                          minHeight: "auto",
+                          minHeight: menu.groups && activeGroup
+                            ? `${Math.max(
+                              160,
+                              ((menu.groups.find((group) => group.label === activeGroup)?.children.length || 0) * 50) + 24
+                            )}px`
+                            : "auto",
                           zIndex: 1001,
-                          overflow: "hidden",
+                          overflow: "visible",
                           opacity: activeMenu === menu.label ? 1 : 0,
                           visibility: activeMenu === menu.label ? "visible" : "hidden",
                           pointerEvents: activeMenu === menu.label ? "auto" : "none",
                           clipPath: activeMenu === menu.label ? "polygon(0 0, 100% 0, 100% 100%, 0 100%)" : "polygon(0 0, 100% 0, 100% 0, 0 0)",
-                          transition: activeGroup ? "clip-path .45s ease-in-out, visibility .45s ease-in-out, opacity .45s ease-in-out, width .55s ease-in-out" : "clip-path .45s ease-in-out, visibility .45s ease-in-out, opacity .45s ease-in-out",
+                          willChange: "clip-path, opacity",
+                          transition: "clip-path .4s ease-in-out, visibility .4s ease-in-out, opacity .4s ease-in-out",
                         }}
                       >
                       {menu.groups ? (
                         <>
                           {/* Submenu group list: CASUAL, TRADITIONAL */}
-                          <Box sx={{ width: 260, pb: 1.5, borderRight: "1px solid rgba(0,0,0,0.12)" }}>
+                          <Box sx={{
+                            width: 260,
+                            pb: 1.5,
+                            backgroundColor: "#FFF",
+                            border: "1px solid rgba(0,0,0,0.08)",
+                            borderTop: 0,
+                            borderRight: "1px solid rgba(0,0,0,0.12)",
+                            boxShadow: "0 2px 6px rgba(0,0,0,0.12)",
+                          }}>
                             {menu.groups.map((group) => (
                               <Button
                                 key={group.label}
@@ -678,13 +690,22 @@ const Navbar = () => {
                           {/* Child submenu links: collection names shown after hovering a submenu group */}
                           {activeGroup && (
                             <Box key={activeGroup} sx={{
-                              pb: 1.5,
-                              px: 3,
+                              position: "absolute",
+                              top: -1,
+                              left: 260,
+                              minHeight: "calc(100% + 24px)",
+                              height: "auto",
+                              boxSizing: "border-box",
+                              backgroundColor: "#FFF",
+                              border: "1px solid rgba(0,0,0,0.08)",
+                              borderLeft: 0,
+                              boxShadow: "2px 2px 6px rgba(0,0,0,0.08)",
+                              py: 1.5,
                               width: 300,
                               clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
                               overflow: "hidden",
-                              position: "relative",
-                              animation: "childCardReveal .55s ease-in-out",
+                              willChange: "clip-path",
+                              animation: "childCardReveal .45s ease-in-out",
                               "@keyframes childCardReveal": {
                                 "0%": {
                                   clipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)",
@@ -694,29 +715,44 @@ const Navbar = () => {
                                 },
                               },
                             }}>
-                              {menu.groups
-                                .find((group) => group.label === activeGroup)
-                                ?.children.map((item) => (
-                                  <Button
-                                    key={item.label}
-                                    fullWidth
-                                    onClick={() => navigateToMenuItem(menu.productType, item)}
-                                    sx={{
-                                      justifyContent: "flex-start",
-                                      color: "#000",
-                                      textTransform: "none",
-                                      fontSize: "0.875rem",
-                                      py: 1.1,
-                                      px: 0,
-                                      '&:hover': {
-                                        backgroundColor: "transparent",
-                                        color: "#95AAC5",
-                                      }
-                                    }}
-                                  >
-                                    {item.label?.toUpperCase()}
-                                  </Button>
-                                ))}
+                              <Box sx={{ px: 3 }}>
+                                {menu.groups
+                                  .find((group) => group.label === activeGroup)
+                                  ?.children.map((item) => (
+                                    <Button
+                                      key={item.label}
+                                      fullWidth
+                                      onClick={() => navigateToMenuItem(menu.productType, item)}
+                                      sx={{
+                                        justifyContent: "flex-start",
+                                        color: "#000",
+                                        textTransform: "none",
+                                        fontSize: "0.875rem",
+                                        py: 1.1,
+                                        px: 0,
+                                        whiteSpace: "nowrap",
+                                        overflow: "hidden",
+                                        textAlign: "left",
+                                        '& .MuiButton-startIcon, & .MuiButton-endIcon': {
+                                          margin: 0,
+                                        },
+                                        '& .MuiButtonBase-root': {
+                                          textAlign: "left",
+                                        },
+                                        '& .MuiButton-label': {
+                                          width: "100%",
+                                          textAlign: "left",
+                                        },
+                                        '&:hover': {
+                                          backgroundColor: "transparent",
+                                          color: "#95AAC5",
+                                        }
+                                      }}
+                                    >
+                                      {item.label?.toUpperCase()}
+                                    </Button>
+                                  ))}
+                              </Box>
                             </Box>
                           )}
                         </>