diff --git a/app/layouts/LeftSidebar.tsx b/app/layouts/LeftSidebar.tsx index a781c7f2c..7d6590b52 100644 --- a/app/layouts/LeftSidebar.tsx +++ b/app/layouts/LeftSidebar.tsx @@ -10,19 +10,18 @@ import { Logo } from '@/components/ui/Logo'; import Link from 'next/link'; import { Icon } from '@/components/ui/icons'; import { FundingPowerRailButton } from '@/components/Funding/FundingPowerRailButton'; +import { SidebarDocuments } from './components/SidebarDocuments'; interface LeftSidebarProps { forceMinimize?: boolean; /** - * Takes the place of the nav items, the footer links and the funding power - * button: a page whose own lists belong in this column. Hidden while the - * column is the icon rail, where the page shows them some other way; pass - * null to keep the area empty. + * Runs once a document or a new draft is picked: on a phone the column is a + * menu, and a pick that changes the workspace in place must still close it. */ - content?: React.ReactNode; + onNavigate?: () => void; } -export const LeftSidebar: React.FC = ({ forceMinimize = false, content }) => { +export const LeftSidebar: React.FC = ({ forceMinimize = false, onNavigate }) => { const pathname = usePathname(); const handleUnimplementedFeature = (featureName: string) => { @@ -47,7 +46,6 @@ export const LeftSidebar: React.FC = ({ forceMinimize = false, // Create minimized classes based on either responsive design or forced minimization const minimizeClass = forceMinimize ? 'minimized-sidebar' : ''; - const hasContent = content !== undefined; return (
@@ -67,36 +65,36 @@ export const LeftSidebar: React.FC = ({ forceMinimize = false,
- +
- {hasContent ? ( -
- {content} -
- ) : ( - <> - + {/* The nav and the user's documents scroll together, so a long list + never squeezes the nav. The documents hide while the column is the + icon rail; the workspace has its own way to them there. */} +
+ + +
- {/* Navigation above is flex-1, so this sits at the bottom of the column. - Only covers 768px to the right sidebar's breakpoint: below that the - bar is docked over the mobile bottom nav, and above it the funding - power card is in the right sidebar. */} -
- -
+ {/* The scroll area above is flex-1, so this sits at the bottom of the column. + Only covers 768px to the right sidebar's breakpoint: below that the + bar is docked over the mobile bottom nav, and above it the funding + power card is in the right sidebar. */} +
+ +
-
- -
- - )} +
+ +
); }; diff --git a/app/layouts/Navigation.tsx b/app/layouts/Navigation.tsx index bc88bb1c4..1917c5614 100644 --- a/app/layouts/Navigation.tsx +++ b/app/layouts/Navigation.tsx @@ -36,6 +36,8 @@ interface NavigationProps { currentPath: string; onUnimplementedFeature: (featureName: string) => void; forceMinimize?: boolean; + /** A parent scrolls the nav along with what follows it, so it neither grows nor scrolls itself. */ + inScrollArea?: boolean; } const navIconMap: Record = { @@ -57,6 +59,7 @@ export const Navigation: React.FC = ({ currentPath, onUnimplementedFeature, forceMinimize = false, + inScrollArea = false, }) => { const navigationItems: NavigationItem[] = [ { @@ -210,7 +213,8 @@ export const Navigation: React.FC = ({