defunkt/toes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize collapsed sidebar to show hamburger button without logo and add dashboard shortcut icon to AppSelector

Browse Source
This commit is contained in:
Chris Wanstrath 2026-02-19 10:12:48 -08:00
parent 8e71699ceb
commit fca779b064
2 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/client/components/AppSelector.tsx
View File

@ -17,12 +17,13 @@ import {
interface AppSelectorProps {
render: () => void
onSelect?: () => void
onDashboard?: () => void
collapsed?: boolean
switcherStyle?: CSSProperties
listStyle?: CSSProperties
}
export function AppSelector({ render, onSelect, collapsed, switcherStyle, listStyle }: AppSelectorProps) {
export function AppSelector({ render, onSelect, onDashboard, collapsed, switcherStyle, listStyle }: AppSelectorProps) {
const selectApp = (name: string) => {
setSelectedApp(name)
onSelect?.()
@ -51,6 +52,16 @@ export function AppSelector({ render, onSelect, collapsed, switcherStyle, listSt
</SectionSwitcher>
)}
<AppList style={listStyle}>
{collapsed && onDashboard && (
<AppItem
onClick={onDashboard}
selected={!selectedApp ? true : undefined}
style={{ justifyContent: 'center', padding: '10px 12px' }}
title="Toes"
>
<span style={{ fontSize: 18 }}>🐾</span>
</AppItem>
)}
{activeApps.map(app => (
<AppItem
key={app.name}

32
src/client/components/Sidebar.tsx
View File

@ -30,17 +30,27 @@ export function Sidebar({ render }: { render: () => void }) {
return (
<SidebarContainer style={sidebarCollapsed ? { width: 'auto' } : undefined}>
<Logo>
<LogoLink onClick={goToDashboard} title="Go to dashboard">
{sidebarCollapsed ? '🐾' : '🐾 Toes'}
</LogoLink>
<HamburgerButton onClick={toggleSidebar} title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}>
<HamburgerLine />
<HamburgerLine />
<HamburgerLine />
</HamburgerButton>
</Logo>
<AppSelector render={render} collapsed={sidebarCollapsed} />
{sidebarCollapsed ? (
<div style={{ display: 'flex', justifyContent: 'center', padding: '12px 0' }}>
<HamburgerButton onClick={toggleSidebar} title="Show sidebar">
<HamburgerLine />
<HamburgerLine />
<HamburgerLine />
</HamburgerButton>
</div>
) : (
<Logo>
<LogoLink onClick={goToDashboard} title="Go to dashboard">
🐾 Toes
</LogoLink>
<HamburgerButton onClick={toggleSidebar} title="Hide sidebar">
<HamburgerLine />
<HamburgerLine />
<HamburgerLine />
</HamburgerButton>
</Logo>
)}
<AppSelector render={render} collapsed={sidebarCollapsed} onDashboard={goToDashboard} />
{!sidebarCollapsed && (
<SidebarFooter>
<NewAppButton onClick={openNewAppModal}>+ New App</NewAppButton>