From f5efbef9bb5d1f847fa1ba051131b6a6af0e7bec Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 22:29:57 +0000 Subject: [PATCH] Generated by Spark: menu can have folding --- PRD.md | 7 ++-- spark.meta.json | 7 ++-- src/App.tsx | 85 +++++++++++++++++++++++++++++++++---------------- 3 files changed, 67 insertions(+), 32 deletions(-) diff --git a/PRD.md b/PRD.md index 74b4109..df16617 100644 --- a/PRD.md +++ b/PRD.md @@ -123,7 +123,7 @@ Animations should reinforce the sense of **authoritative transitions and data re - **Components**: - `Card` - Primary container for Strategy Cards, initiative summaries, and portfolio groups; add subtle shadow and border treatment for depth - - **Sidebar Navigation** - Hierarchical left sidebar with grouped sections (Planning, Execution, Hoshin Kanri, Roadmaps, Reporting) replacing horizontal tabs for better scalability and visual organization + - **Sidebar Navigation** - Hierarchical left sidebar with grouped sections (Planning, Execution, Hoshin Kanri, Roadmaps, Reporting) with collapsible/expandable sections for better space management and visual organization - `Dialog` - Full-screen modals for creating/editing Strategy Cards and initiatives with structured forms - `Table` - Initiative lists, KPI scorecards, and portfolio views with sortable columns and row hover states - `Badge` - Status indicators (On Track, At Risk, Blocked), priority levels, and portfolio tags with semantic colors @@ -146,11 +146,13 @@ Animations should reinforce the sense of **authoritative transitions and data re - Buttons: Navy default → Gold hover → Pressed with slight scale → Disabled with reduced opacity - Cards: Subtle hover elevation; active state with gold left border; selected state with gold outline - **Sidebar Items**: Default state with regular icon weight → Hover with accent background → Active with filled icon, primary background and shadow + - **Sidebar Section Headers**: Clickable with caret icon → Hover with accent background → Collapsed state rotates caret 90° with smooth animation - Table rows: Hover with light slate background; selected with stronger slate background - Status badges: Green (On Track), Amber (At Risk), Red (Blocked), Gray (Not Started) - **Icon Selection**: - `House` - Home dashboard navigation + - `CaretDown` - Collapsible section indicators in sidebar - `Strategy` - Use structured grid or layers icon for Strategy Cards - `ChartBar` - Workbench and execution tracking - `FolderOpen` - Portfolio management @@ -171,7 +173,8 @@ Animations should reinforce the sense of **authoritative transitions and data re - Card padding: `p-6` for substantial internal space - Section gaps: `gap-6` between major sections; `gap-4` between related elements - List items: `py-3` for comfortable touch targets and scannability - - **Sidebar spacing**: `p-4` container padding; `space-y-6` between sections; `space-y-1` within sections + - **Sidebar spacing**: `p-4` container padding; `space-y-6` between sections; `space-y-1` within sections and for collapsible content + - **Sidebar section headers**: `py-2` for clickable area; smooth 200ms transition for collapse/expand animations - **Mobile**: - Sidebar converts to collapsible drawer with hamburger menu diff --git a/spark.meta.json b/spark.meta.json index 1d49b2a..fd74d91 100644 --- a/spark.meta.json +++ b/spark.meta.json @@ -1,3 +1,4 @@ -{ - "dbType": null - +{ + "templateVersion": 0, + "dbType": null +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index a235f01..544faae 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,7 +14,8 @@ import { Tree, GridFour, Circle, - House + House, + CaretDown } from '@phosphor-icons/react' import { cn } from '@/lib/utils' import StrategyCards from './components/StrategyCards' @@ -94,6 +95,7 @@ function App() { const [initiatives] = useKV('initiatives', []) const [activeView, setActiveView] = useState('strategy') const [showHome, setShowHome] = useState(true) + const [collapsedSections, setCollapsedSections] = useKV('sidebar-collapsed-sections', []) const handleNavigate = (viewId: string) => { setActiveView(viewId) @@ -104,6 +106,16 @@ function App() { setShowHome(true) } + const toggleSection = (sectionId: string) => { + setCollapsedSections((current) => { + const sections = current || [] + if (sections.includes(sectionId)) { + return sections.filter(id => id !== sectionId) + } + return [...sections, sectionId] + }) + } + const activeItem = navigationSections .flatMap(section => section.items) .find(item => item.id === activeView) @@ -152,33 +164,52 @@ function App() { Home - {navigationSections.map(section => ( -
-

- {section.label} -

-
- {section.items.map(item => { - const Icon = item.icon - const isActive = activeView === item.id && !showHome - return ( - - ) - })} + {navigationSections.map(section => { + const isCollapsed = collapsedSections?.includes(section.id) + return ( +
+ +
+ {section.items.map(item => { + const Icon = item.icon + const isActive = activeView === item.id && !showHome + return ( + + ) + })} +
-
- ))} + ) + })}