mirror of
https://github.com/block/goose.git
synced 2026-07-17 12:56:20 +02:00
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user