Page Templates

1import {
2Container,
3Title,
4Text,
5Button,
6SidebarNavigationItem,
7SidebarCollapsibleItem,
8SidebarNavigationTitle,
9Avatar,
10Icon,
11Spacer,
12Panel,
13} from '@clickhouse/click-ui'
14import { useState } from 'react'
15
16function ApplicationLayout() {
17const [selectedNav, setSelectedNav] = useState('dashboards')
18const [serviceOpen, setServiceOpen] = useState(true)
19
20return (
21  <Container orientation='horizontal' fillHeight>
22    {/* Sidebar */}
23    <Container
24      orientation='vertical'
25      gap='md'
26      padding='md'
27      fillWidth={false}
28      style={{ width: '240px' }}
29    >
30      <SidebarCollapsibleItem
31        label='Analytics service'
32        icon='aws'
33        open={serviceOpen}
34        onOpenChange={setServiceOpen}
35      >
36        <SidebarNavigationItem
37          label='SQL console'
38          icon='monitor'
39          selected={selectedNav === 'sql'}
40          onClick={() => setSelectedNav('sql')}
41          level={1}
42        />
43        <SidebarNavigationItem
44          label='Dashboards'
45          icon='bar-chart'
46          selected={selectedNav === 'dashboards'}
47          onClick={() => setSelectedNav('dashboards')}
48          level={1}
49        />
50        <SidebarNavigationItem
51          label='Data sources'
52          icon='globe'
53          selected={selectedNav === 'sources'}
54          onClick={() => setSelectedNav('sources')}
55          level={1}
56        />
57        <SidebarNavigationItem
58          label='Backups'
59          icon='refresh'
60          selected={selectedNav === 'backups'}
61          onClick={() => setSelectedNav('backups')}
62          level={1}
63        />
64      </SidebarCollapsibleItem>
65
66      <SidebarNavigationItem
67        label='Settings'
68        icon='sliders'
69        selected={selectedNav === 'settings'}
70        onClick={() => setSelectedNav('settings')}
71      />
72      <SidebarNavigationItem
73        label='Monitoring'
74        icon='camera'
75        selected={selectedNav === 'monitoring'}
76        onClick={() => setSelectedNav('monitoring')}
77      />
78      <SidebarNavigationItem
79        label='Help'
80        icon='help-circle'
81        selected={selectedNav === 'help'}
82        onClick={() => setSelectedNav('help')}
83      />
84
85      <Spacer size='md' />
86
87      <Container orientation='vertical' gap='sm'>
88        <Button type='primary' label='Connect' iconLeft='plug' fillWidth />
89        <Button type='secondary' label='Ask AI' iconLeft='sparkles' fillWidth />
90      </Container>
91
92      <Spacer size='lg' />
93
94      <Container orientation='vertical' gap='sm'>
95        <Panel padding='sm' color='muted'>
96          <Container orientation='horizontal' gap='xs' alignItems='center'>
97            <Icon name='clock' size='sm' />
98            <Text size='sm' color='muted'>Your trial will expire in 23 days</Text>
99          </Container>
100        </Panel>
101
102        <SidebarNavigationTitle label='Organization' />
103        <SidebarNavigationItem
104          label='Rhubarb Inc'
105          icon='file'
106          iconDir='end'
107        />
108
109        <Spacer size='sm' />
110
111        <SidebarNavigationItem
112          label='Integrations'
113          icon='settings'
114        />
115        <SidebarNavigationItem
116          label='Chat with Support'
117          icon='message-circle'
118        />
119        <SidebarNavigationItem
120          label='All systems operational'
121          icon='check-circle'
122        />
123      </Container>
124    </Container>
125
126    {/* Main Content Area */}
127    <Container orientation='vertical' fillWidth>
128      {/* Header */}
129      <Panel
130        orientation='horizontal'
131        justifyContent='space-between'
132        alignItems='center'
133        padding='md'
134        hasBorder
135        style={{ borderTop: 'none', borderLeft: 'none', borderRight: 'none' }}
136      >
137        <Container orientation='horizontal' gap='sm' alignItems='center'>
138          <Icon name='clickhouse' size='lg' />
139          <Title type='h2' size='md'>Page title</Title>
140        </Container>
141
142        <Container orientation='horizontal' gap='sm' alignItems='center'>
143          <Button type='empty' iconLeft='bell' />
144          <Avatar text='CM' textSize='sm' />
145          <Button type='primary' label='Add new object' />
146        </Container>
147      </Panel>
148
149      {/* Main Content */}
150      <Container orientation='vertical' gap='lg' padding='lg' fillWidth>
151        <Text>Main content area - add your page content here</Text>
152      </Container>
153    </Container>
154  </Container>
155)
156}