54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { openNewAppModal } from '../modals'
|
|
import {
|
|
setSidebarCollapsed,
|
|
sidebarCollapsed,
|
|
} from '../state'
|
|
import {
|
|
HamburgerButton,
|
|
HamburgerLine,
|
|
Logo,
|
|
LogoLink,
|
|
NewAppButton,
|
|
Sidebar as SidebarContainer,
|
|
SidebarFooter,
|
|
} from '../styles'
|
|
import { AppSelector } from './AppSelector'
|
|
|
|
export function Sidebar({ render }: { render: () => void }) {
|
|
const toggleSidebar = () => {
|
|
setSidebarCollapsed(!sidebarCollapsed)
|
|
render()
|
|
}
|
|
|
|
return (
|
|
<SidebarContainer style={sidebarCollapsed ? { width: 'auto' } : undefined}>
|
|
{sidebarCollapsed ? (
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '12px 0' }}>
|
|
<HamburgerButton onClick={toggleSidebar} title="Show sidebar">
|
|
<HamburgerLine />
|
|
<HamburgerLine />
|
|
<HamburgerLine />
|
|
</HamburgerButton>
|
|
</div>
|
|
) : (
|
|
<Logo>
|
|
<LogoLink href="/" title="Go to dashboard">
|
|
🐾 Toes
|
|
</LogoLink>
|
|
<HamburgerButton onClick={toggleSidebar} title="Hide sidebar">
|
|
<HamburgerLine />
|
|
<HamburgerLine />
|
|
<HamburgerLine />
|
|
</HamburgerButton>
|
|
</Logo>
|
|
)}
|
|
<AppSelector render={render} collapsed={sidebarCollapsed} />
|
|
{!sidebarCollapsed && (
|
|
<SidebarFooter>
|
|
<NewAppButton onClick={openNewAppModal}>+ New App</NewAppButton>
|
|
</SidebarFooter>
|
|
)}
|
|
</SidebarContainer>
|
|
)
|
|
}
|