diff options
| author | MaheshtheDev <[email protected]> | 2025-08-29 16:38:19 +0000 |
|---|---|---|
| committer | MaheshtheDev <[email protected]> | 2025-08-29 16:38:19 +0000 |
| commit | 548b2b83a433d3eda1e5b94794dec4700dca39df (patch) | |
| tree | ae844f05bc2a5896a83edcda858a2c6c4f5457e0 | |
| parent | ci: fix ai-sdk publish (#393) (diff) | |
| download | supermemory-548b2b83a433d3eda1e5b94794dec4700dca39df.tar.xz supermemory-548b2b83a433d3eda1e5b94794dec4700dca39df.zip | |
refactor(ui): optimize menu hover width and simplify text layout (#396)08-29-optimize_menu_hover_width_and_simplify_text_layout
Before
After
- Reduced menu hover width from 220px to 160px
- Simplified text positioning from absolute positioning to padding-left
- Removed the usage limit warning badge from the desktop menu
| -rw-r--r-- | apps/web/components/menu.tsx | 18 |
1 files changed, 2 insertions, 16 deletions
diff --git a/apps/web/components/menu.tsx b/apps/web/components/menu.tsx index 926b2a7a..f59617c0 100644 --- a/apps/web/components/menu.tsx +++ b/apps/web/components/menu.tsx @@ -159,7 +159,7 @@ function Menu({ id }: { id?: string }) { }, [isMobile, isMobileMenuOpen, isHovered, expandedView, setMenuExpanded]); // Calculate width based on state - const menuWidth = expandedView || isCollapsing ? 600 : isHovered ? 220 : 56; + const menuWidth = expandedView || isCollapsing ? 600 : isHovered ? 160 : 56; // Dynamic z-index for mobile based on active panel const mobileZIndex = @@ -283,7 +283,7 @@ function Menu({ id }: { id?: string }) { opacity: isHovered ? 1 : 0, x: isHovered ? 0 : -10, }} - className="drop-shadow-lg absolute left-10 right-16 whitespace-nowrap" + className="drop-shadow-lg pl-3 whitespace-nowrap" initial={{ opacity: 0, x: -10 }} style={{ transform: "translateZ(0)", @@ -296,20 +296,6 @@ function Menu({ id }: { id?: string }) { > {item.text} </motion.p> - {shouldShowLimitWarning && item.key === "addUrl" && ( - <motion.span - animate={{ opacity: isHovered ? 1 : 0, x: isHovered ? 0 : -10 }} - initial={{ opacity: 0, x: -10 }} - transition={{ - duration: isHovered ? 0.2 : 0.1, - delay: isHovered ? index * 0.03 : 0, - ease: [0.4, 0, 0.2, 1], - }} - className="absolute right-2 top-1/2 -translate-y-1/2 text-xs bg-yellow-500/20 text-yellow-400 px-1.5 py-0.5 rounded" - > - {memoriesLimit - memoriesUsed} left - </motion.span> - )} </motion.button> {index === 0 && ( <motion.div |