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 { interface AppSelectorProps {
render: () => void render: () => void
onSelect?: () => void onSelect?: () => void
onDashboard?: () => void
collapsed?: boolean collapsed?: boolean
switcherStyle?: CSSProperties switcherStyle?: CSSProperties
listStyle?: 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) => { const selectApp = (name: string) => {
setSelectedApp(name) setSelectedApp(name)
onSelect?.() onSelect?.()
@ -51,6 +52,16 @@ export function AppSelector({ render, onSelect, collapsed, switcherStyle, listSt
</SectionSwitcher> </SectionSwitcher>
)} )}
<AppList style={listStyle}> <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 => ( {activeApps.map(app => (
<AppItem <AppItem
key={app.name} key={app.name}

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

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