feat: Add Windows Start Menu style container to condensed overlay

- Wrapped overlay content in defined container box
- Added bg-background-card with backdrop-blur-xl for frosted glass effect
- Added rounded-2xl corners for modern appearance
- Added shadow-2xl for depth and elevation
- Added border-border-default for subtle definition
- Fixed width at 600px with maxHeight 500px
- Moved padding from motion.div to inner container
- Creates cohesive, contained menu experience like Windows Start Menu
This commit is contained in:
spencrmartin
2026-01-13 10:46:12 -05:00
parent 854980f618
commit 98ed976d2d
@@ -574,7 +574,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
stiffness: 400,
damping: 25,
}}
className={`${isOverlayMode ? 'p-4 bg-transparent rounded-2xl' : ''} ${
className={`${isOverlayMode ? '' : ''} ${
!isOverlayMode && isVertical
? position === 'right'
? 'h-full pl-0.5'
@@ -583,11 +583,15 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
? 'pr-0.5 pb-0.5'
: !isOverlayMode ? 'pr-0.5' : ''
}`}
style={{ width: isVertical || isOverlayMode ? (isOverlayMode ? '600px' : '240px') : undefined, height: isOverlayMode ? '500px' : undefined }}
>
{isOverlayMode ? (
// Overlay Mode: Two-column layout with navigation rows on left, widget tiles on right
<div className="flex flex-row gap-4 w-full h-full items-start">
// Overlay Mode: Windows Start Menu style container
<div
className="bg-background-card backdrop-blur-xl rounded-2xl shadow-2xl border border-border-default overflow-hidden"
style={{ width: '600px', maxHeight: '500px' }}
>
{/* Two-column layout with navigation rows on left, widget tiles on right */}
<div className="flex flex-row gap-4 w-full h-full items-start p-4">
{/* Left Column: Navigation Rows */}
<div className="flex flex-col gap-[1px] w-80">
{navItems.filter(item => !item.isWidget).map((item, index) => {
@@ -732,6 +736,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
})}
</div>
</div>
</div>
</div>
) : (
// Push Mode: Original single-column layout