52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { openNewAppModal } from '../modals'
|
|
import {
|
|
setCurrentView,
|
|
setSelectedApp,
|
|
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 goToDashboard = () => {
|
|
setSelectedApp(null)
|
|
setCurrentView('dashboard')
|
|
render()
|
|
}
|
|
|
|
const toggleSidebar = () => {
|
|
setSidebarCollapsed(!sidebarCollapsed)
|
|
render()
|
|
}
|
|
|
|
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 && (
|
|
<SidebarFooter>
|
|
<NewAppButton onClick={openNewAppModal}>+ New App</NewAppButton>
|
|
</SidebarFooter>
|
|
)}
|
|
</SidebarContainer>
|
|
)
|
|
}
|