Skip to content

Commit 7b0d458

Browse files
rohithandiquerohithandique
committed
added a sidebar
1 parent 80470d7 commit 7b0d458

5 files changed

Lines changed: 198 additions & 32 deletions

File tree

‎src/pages/dashboard/ui/Dashboard.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
import { Sidebar } from '@/widgets/sidebar';
2+
import { Box, Flex, rem } from '@mantine/core';
3+
14
export function Dashboard() {
2-
return <div>Dashboard</div>;
5+
return (
6+
<Flex align="stretch" style={{ height: `calc(100vh - ${rem(70)})` }}>
7+
<Sidebar />
8+
<Box p="md" style={{ flex: 1 }}>
9+
<div>Dashboard Content</div>
10+
</Box>
11+
</Flex>
12+
);
313
}

‎src/shared/ui/AppTitle.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Flex, Text } from '@mantine/core';
2+
import ReactLogo from '@/shared/assets/react.svg?react';
3+
4+
export default function AppTitle() {
5+
return (
6+
<Flex>
7+
<ReactLogo
8+
width={25}
9+
height={25}
10+
style={{ filter: 'grayscale(1) brightness(0) invert(1)' }}
11+
/>
12+
<Text size="lg" fw={500} ml={8}>
13+
Generic
14+
</Text>
15+
</Flex>
16+
);
17+
}

‎src/widgets/header/ui/Header.tsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,42 @@
1-
import { Box, Button, Flex, Group, rem, Text } from '@mantine/core';
2-
import ReactLogo from '@/shared/assets/react.svg?react';
1+
import { Button, rem, Group, Box } from '@mantine/core';
2+
import AppTitle from '@/shared/ui/AppTitle';
3+
import { useLocation } from '@tanstack/react-router';
34

45
export function Header() {
6+
const SIDEBAR_WIDTH = rem(300);
7+
const location = useLocation();
58
return (
6-
<Box>
7-
<header
8-
style={{
9-
height: rem(60),
10-
paddingLeft: 'var(--mantine-spacing-md)',
11-
paddingRight: 'var(--mantine-spacing-md)',
12-
borderBottom: `${rem(1)} solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-3))`,
13-
}}
14-
>
15-
<Group justify="space-between" h="100%">
16-
<Flex
17-
mih={50}
18-
gap="md"
19-
justify="center"
20-
align="center"
21-
direction="row"
22-
wrap="wrap"
23-
>
24-
<ReactLogo
25-
width={25}
26-
height={25}
27-
style={{ filter: 'grayscale(1) brightness(0) invert(1)' }}
28-
/>
29-
<Text size="lg">Generic</Text>
30-
</Flex>
31-
<Group visibleFrom="sm">
32-
<Button variant="default">Sign In</Button>
33-
</Group>
9+
<Box
10+
component="header"
11+
style={{
12+
height: rem(70),
13+
borderBottom: `${rem(1)} solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-4))`,
14+
}}
15+
>
16+
<Group h="100%" gap={0} align="stretch">
17+
<Group
18+
w={SIDEBAR_WIDTH}
19+
px="xl"
20+
gap="xs"
21+
style={{
22+
borderRight: `${rem(1)} solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-4))`,
23+
}}
24+
>
25+
{location.pathname != '/' && <AppTitle />}
3426
</Group>
35-
</header>
27+
<Group justify="space-between" px="xl" style={{ flex: 1 }}>
28+
<Box> {location.pathname == '/' && <AppTitle />}</Box>
29+
<Button variant="default">Sign In</Button>
30+
</Group>
31+
<Group
32+
w={SIDEBAR_WIDTH}
33+
px="xl"
34+
gap="xs"
35+
style={{
36+
borderLeft: `${rem(1)} solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-4))`,
37+
}}
38+
></Group>
39+
</Group>
3640
</Box>
3741
);
3842
}

‎src/widgets/sidebar/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Sidebar as Sidebar } from './ui/Sidebar';

‎src/widgets/sidebar/ui/Sidebar.tsx‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import {
2+
ActionIcon,
3+
Box,
4+
Code,
5+
Group,
6+
Text,
7+
TextInput,
8+
Tooltip,
9+
UnstyledButton,
10+
rem,
11+
MantineTheme,
12+
} from '@mantine/core';
13+
14+
const collections = [
15+
{ emoji: '👍', label: 'Sales' },
16+
{ emoji: '🚚', label: 'Deliveries' },
17+
{ emoji: '💸', label: 'Discounts' },
18+
{ emoji: '💰', label: 'Profits' },
19+
{ emoji: '✨', label: 'Reports' },
20+
{ emoji: '🛒', label: 'Orders' },
21+
{ emoji: '📅', label: 'Events' },
22+
{ emoji: '🙈', label: 'Debts' },
23+
{ emoji: '💁‍♀️', label: 'Customers' },
24+
];
25+
26+
// --- Sub-component: UserButton ---
27+
function UserButton() {
28+
return (
29+
<UnstyledButton
30+
p="md"
31+
style={(theme: MantineTheme) => ({
32+
display: 'block',
33+
width: '100%',
34+
borderRadius: theme.radius.sm,
35+
})}
36+
>
37+
<Group>
38+
<Box style={{ flex: 1 }}>
39+
<Text size="sm" fw={500}>
40+
Rohit Handique
41+
</Text>
42+
<Text c="dimmed" size="xs">
43+
rohit.handique@gmail.com
44+
</Text>
45+
</Box>
46+
</Group>
47+
</UnstyledButton>
48+
);
49+
}
50+
51+
// --- Main Component ---
52+
export function Sidebar() {
53+
const collectionLinks = collections.map((collection) => (
54+
<Box
55+
component="a"
56+
href="#"
57+
key={collection.label}
58+
onClick={(event) => event.preventDefault()}
59+
style={(theme: MantineTheme) => ({
60+
display: 'block',
61+
padding: `${rem(8)} ${theme.spacing.xs}`,
62+
textDecoration: 'none',
63+
borderRadius: theme.radius.sm,
64+
fontSize: theme.fontSizes.xs,
65+
lineHeight: 1,
66+
fontWeight: 500,
67+
color:
68+
'light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0))',
69+
})}
70+
>
71+
<Box component="span" mr={9} fz={16}>
72+
{collection.emoji}
73+
</Box>
74+
{collection.label}
75+
</Box>
76+
));
77+
78+
return (
79+
<Box
80+
component="nav"
81+
style={(theme: MantineTheme) => ({
82+
backgroundColor: 'var(--mantine-color-body)',
83+
height: '100%',
84+
width: rem(300),
85+
padding: theme.spacing.md,
86+
display: 'flex',
87+
flexDirection: 'column',
88+
borderRight: `1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))`,
89+
})}
90+
>
91+
<Box style={{ height: `calc(100vh - ${rem(140)})` }}>
92+
<TextInput
93+
placeholder="Search"
94+
size="xs"
95+
rightSectionWidth={70}
96+
rightSection={
97+
<Code style={{ fontSize: rem(10), fontWeight: 700 }}>Ctrl + K</Code>
98+
}
99+
styles={{ section: { pointerEvents: 'none' } }}
100+
mb="sm"
101+
/>
102+
103+
<Box
104+
pt="md"
105+
style={{
106+
borderTop:
107+
'1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))',
108+
}}
109+
>
110+
<Group justify="space-between" mb={5} px="xs">
111+
<Text size="xs" fw={500} c="dimmed">
112+
Collections
113+
</Text>
114+
<Tooltip label="Create collection" withArrow position="right">
115+
<ActionIcon variant="default" size={18}></ActionIcon>
116+
</Tooltip>
117+
</Group>
118+
<Box>{collectionLinks}</Box>
119+
</Box>
120+
</Box>
121+
<Box
122+
mx={`calc(var(--mantine-spacing-md) * -1)`}
123+
mb="md"
124+
style={{
125+
borderTop:
126+
'1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))',
127+
}}
128+
h={rem(70)}
129+
>
130+
<UserButton />
131+
</Box>
132+
</Box>
133+
);
134+
}

0 commit comments

Comments
 (0)