Skip to content

Commit f3e8e02

Browse files
paanSinghCoderrohanchkrabrty
paanSinghCoder
and
rohanchkrabrty
authored
feat (Sidebar): add fallback and other changes (#478)
* feat: add fallback and rename icon prop * refactor: rename logo prop * chore: remove comment * refactor: change header structure * feat: add asChild support * docs: update mdx * chore: remove headerIcon and title * refactor: rename name to label in Group * docs: update docs * chore: update examples page * fix: remove unused props in sidebar * fix: update docs --------- Co-authored-by: Rohan Chakraborty <irohan1999@gmail.com>
1 parent 25d7873 commit f3e8e02

File tree

8 files changed

+247
-243
lines changed

8 files changed

+247
-243
lines changed

‎apps/www/src/app/examples/page.tsx

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
'use client';
2-
import { IconButtonExamples } from '@/components/playground';
32
import {
43
Amount,
54
Avatar,
@@ -11,6 +10,7 @@ import {
1110
DropdownMenu,
1211
EmptyState,
1312
Flex,
13+
IconButton,
1414
Indicator,
1515
InputField,
1616
Popover,
@@ -70,50 +70,45 @@ const Page = () => {
7070
}}
7171
>
7272
<Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen}>
73-
<Sidebar.Header
74-
logo={<BellIcon width={24} height={24} />}
75-
title='Raystack'
76-
onLogoClick={() => console.log('Logo clicked')}
77-
/>
73+
<Sidebar.Header>
74+
<Flex align='center' gap={3}>
75+
<IconButton
76+
size={4}
77+
onClick={() => console.log('Logo clicked')}
78+
aria-label='Logo'
79+
>
80+
<BellIcon width={24} height={24} />
81+
</IconButton>
82+
<Text size={4} weight='medium'>
83+
Raystack
84+
</Text>
85+
</Flex>
86+
</Sidebar.Header>
7887

7988
<Sidebar.Main>
80-
<Sidebar.Item href='#' icon={<BellIcon />} active>
89+
<Sidebar.Item href='#' active>
8190
Dashboard
8291
</Sidebar.Item>
8392

84-
<Sidebar.Item href='#' icon={<BellIcon />}>
85-
Analytics
86-
</Sidebar.Item>
93+
<Sidebar.Item href='#'>Analytics</Sidebar.Item>
8794

88-
<Sidebar.Group name='Resources'>
89-
<Sidebar.Item href='#' icon={<FilterIcon />}>
90-
Reports
91-
</Sidebar.Item>
95+
<Sidebar.Group label='Resources' leadingIcon={<FilterIcon />}>
96+
<Sidebar.Item href='#'>Reports</Sidebar.Item>
9297

93-
<Sidebar.Item href='#' icon={<FilterIcon />}>
94-
Activities
95-
</Sidebar.Item>
98+
<Sidebar.Item href='#'>Activities</Sidebar.Item>
9699
</Sidebar.Group>
97100

98-
<Sidebar.Group name='Account'>
99-
<Sidebar.Item href='#' icon={<FilterIcon />}>
100-
Settings
101-
</Sidebar.Item>
101+
<Sidebar.Group label='Account'>
102+
<Sidebar.Item href='#'>Settings</Sidebar.Item>
102103

103-
<Sidebar.Item href='#' icon={<BellIcon />}>
104-
Notifications
105-
</Sidebar.Item>
104+
<Sidebar.Item href='#'>Notifications</Sidebar.Item>
106105
</Sidebar.Group>
107106
</Sidebar.Main>
108107

109108
<Sidebar.Footer>
110-
<Sidebar.Item href='#' icon={<OrganizationIcon />}>
111-
Help & Support
112-
</Sidebar.Item>
109+
<Sidebar.Item href='#'>Help & Support</Sidebar.Item>
113110

114-
<Sidebar.Item href='#' icon={<SidebarIcon />}>
115-
Preferences
116-
</Sidebar.Item>
111+
<Sidebar.Item href='#'>Preferences</Sidebar.Item>
117112
</Sidebar.Footer>
118113
</Sidebar>
119114

@@ -1024,8 +1019,6 @@ const Page = () => {
10241019
</Flex>
10251020
</Flex>
10261021

1027-
<IconButtonExamples />
1028-
10291022
<Search
10301023
placeholder='Default small search'
10311024
size='small'

‎apps/www/src/components/playground/sidebar-examples.tsx

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,61 @@
1-
"use client";
1+
'use client';
22

3-
import { Flex, Sidebar } from "@raystack/apsara";
4-
import { Home, Info } from "lucide-react";
5-
import PlaygroundLayout from "./playground-layout";
3+
import { Flex, IconButton, Sidebar, Text } from '@raystack/apsara';
4+
import { Home, Info } from 'lucide-react';
5+
import PlaygroundLayout from './playground-layout';
66

77
export function SidebarExamples() {
88
return (
9-
<PlaygroundLayout title="Sidebar">
10-
<Flex gap="large" wrap="wrap">
9+
<PlaygroundLayout title='Sidebar'>
10+
<Flex gap='large' wrap='wrap'>
1111
<Sidebar open={false}>
12-
<Sidebar.Header logo={<Home />} title="Company Name" />
12+
<Sidebar.Header>
13+
<Flex align='center' gap={3}>
14+
<IconButton size={4} aria-label='Home'>
15+
<Home />
16+
</IconButton>
17+
<Text size={4} weight='medium'>
18+
Company Name
19+
</Text>
20+
</Flex>
21+
</Sidebar.Header>
1322
<Sidebar.Main>
14-
<Sidebar.Item href="#" icon={<Info />} active>
23+
<Sidebar.Item href='#' leadingIcon={<Info />} active>
1524
Dashboard
1625
</Sidebar.Item>
17-
<Sidebar.Item href="#" icon={<Info />} disabled>
26+
<Sidebar.Item href='#' leadingIcon={<Info />} disabled>
1827
Settings
1928
</Sidebar.Item>
2029
</Sidebar.Main>
2130
</Sidebar>
2231
<Sidebar open={true}>
23-
<Sidebar.Header logo={<Home />} title="Apasara" />
32+
<Sidebar.Header>
33+
<Flex align='center' gap={3}>
34+
<IconButton size={4} aria-label='Home'>
35+
<Home />
36+
</IconButton>
37+
<Text size={4} weight='medium'>
38+
Apsara
39+
</Text>
40+
</Flex>
41+
</Sidebar.Header>
2442
<Sidebar.Main>
25-
<Sidebar.Group name="Main">
26-
<Sidebar.Item href="#" icon={<Info />} active>
43+
<Sidebar.Group label='Main' leadingIcon={<Info />}>
44+
<Sidebar.Item href='#' leadingIcon={<Info />} active>
2745
Dashboard
2846
</Sidebar.Item>
29-
<Sidebar.Item href="#" icon={<Info />} disabled>
47+
<Sidebar.Item href='#' leadingIcon={<Info />} disabled>
3048
Settings
3149
</Sidebar.Item>
3250
</Sidebar.Group>
33-
<Sidebar.Group name="Support">
34-
<Sidebar.Item href="#" icon={<Info />}>
51+
<Sidebar.Group label='Support'>
52+
<Sidebar.Item href='#' leadingIcon={<Info />}>
3553
Help
3654
</Sidebar.Item>
3755
</Sidebar.Group>
3856
</Sidebar.Main>
3957
<Sidebar.Footer>
40-
<Sidebar.Item href="#" icon={<Info />}>
58+
<Sidebar.Item href='#' leadingIcon={<Info />}>
4159
Help
4260
</Sidebar.Item>
4361
</Sidebar.Footer>

‎apps/www/src/content/docs/components/sidebar/demo.ts

Lines changed: 71 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,118 @@
1-
"use client";
1+
'use client';
22

33
export const preview = {
4-
type: "code",
4+
type: 'code',
55
code: `
66
<Sidebar open={true}>
7-
<Sidebar.Header logo={<Home />} title="Apasara" />
7+
<Sidebar.Header>
8+
<Flex align="center" gap={3}>
9+
<IconButton size={4} aria-label="Logo">
10+
<Home />
11+
</IconButton>
12+
<Text size={4} weight="medium">Apsara</Text>
13+
</Flex>
14+
</Sidebar.Header>
815
<Sidebar.Main>
9-
<Sidebar.Group name="Main">
10-
<Sidebar.Item href="#" icon={<Info />} active>
16+
<Sidebar.Group label="Main" leadingIcon={<Info />}>
17+
<Sidebar.Item href="#" leadingIcon={<Info />} active>
1118
Dashboard
1219
</Sidebar.Item>
13-
<Sidebar.Item href="#" icon={<Info />} disabled>
20+
<Sidebar.Item href="#" leadingIcon={<Info />} disabled>
1421
Settings
1522
</Sidebar.Item>
1623
</Sidebar.Group>
17-
<Sidebar.Group name="Support">
18-
<Sidebar.Item href="#" icon={<Info />}>
24+
<Sidebar.Group label="Support">
25+
<Sidebar.Item href="#" leadingIcon={<Info />}>
1926
Help
2027
</Sidebar.Item>
2128
</Sidebar.Group>
2229
</Sidebar.Main>
2330
<Sidebar.Footer>
24-
<Sidebar.Item href="#" icon={<Info />}>
31+
<Sidebar.Item href="#" leadingIcon={<Info />}>
2532
Help
2633
</Sidebar.Item>
2734
</Sidebar.Footer>
28-
</Sidebar>`,
35+
</Sidebar>`
2936
};
3037

3138
export const positionDemo = {
32-
type: "code",
39+
type: 'code',
3340
tabs: [
3441
{
35-
name: "Left",
42+
name: 'Left',
3643
code: `
3744
<Sidebar open={true} position="left">
38-
<Sidebar.Header logo={<Home />} title="Company Name" />
45+
<Sidebar.Header>
46+
<Flex align="center" gap={3}>
47+
<IconButton size={4} aria-label="Logo">
48+
<Home />
49+
</IconButton>
50+
<Text size={4} weight="medium">Company Name</Text>
51+
</Flex>
52+
</Sidebar.Header>
3953
<Sidebar.Main>
40-
<Sidebar.Item href="#" icon={<Info />} active>Dashboard</Sidebar.Item>
41-
<Sidebar.Item href="#" icon={<Info />} disabled>Settings</Sidebar.Item>
54+
<Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
55+
<Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
4256
</Sidebar.Main>
43-
</Sidebar>`,
57+
</Sidebar>`
4458
},
4559
{
46-
name: "Right",
60+
name: 'Right',
4761
code: `
4862
<Sidebar open={true} position="right">
49-
<Sidebar.Header logo={<Home />} title="Company Name" />
63+
<Sidebar.Header>
64+
<Flex align="center" gap={3}>
65+
<IconButton size={4} aria-label="Logo">
66+
<Home />
67+
</IconButton>
68+
<Text size={4} weight="medium">Company Name</Text>
69+
</Flex>
70+
</Sidebar.Header>
5071
<Sidebar.Main>
51-
<Sidebar.Item href="#" icon={<Info />} active>Dashboard</Sidebar.Item>
52-
<Sidebar.Item href="#" icon={<Info />} disabled>Settings</Sidebar.Item>
72+
<Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
73+
<Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
5374
</Sidebar.Main>
54-
</Sidebar>`,
55-
},
56-
],
75+
</Sidebar>`
76+
}
77+
]
5778
};
5879

5980
export const stateDemo = {
60-
type: "code",
81+
type: 'code',
6182
tabs: [
6283
{
63-
name: "Expanded",
84+
name: 'Expanded',
6485
code: `<Sidebar open={true}>
65-
<Sidebar.Header logo={<Home />} title="Company Name" />
86+
<Sidebar.Header>
87+
<Flex align="center" gap={3}>
88+
<IconButton size={4} aria-label="Logo">
89+
<Home />
90+
</IconButton>
91+
<Text size={4} weight="medium">Company Name</Text>
92+
</Flex>
93+
</Sidebar.Header>
6694
<Sidebar.Main>
67-
<Sidebar.Item href="#" icon={<Info />} active>Dashboard</Sidebar.Item>
68-
<Sidebar.Item href="#" icon={<Info />} disabled>Settings</Sidebar.Item>
95+
<Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
96+
<Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
6997
</Sidebar.Main>
70-
</Sidebar>`,
98+
</Sidebar>`
7199
},
72100
{
73-
name: "Collapsed",
101+
name: 'Collapsed',
74102
code: `<Sidebar open={false}>
75-
<Sidebar.Header logo={<Home />} title="Company Name" />
103+
<Sidebar.Header>
104+
<Flex align="center" gap={3}>
105+
<IconButton size={4} aria-label="Logo">
106+
<Home />
107+
</IconButton>
108+
<Text size={4} weight="medium">Company Name</Text>
109+
</Flex>
110+
</Sidebar.Header>
76111
<Sidebar.Main>
77-
<Sidebar.Item href="#" icon={<Info />} active>Dashboard</Sidebar.Item>
78-
<Sidebar.Item href="#" icon={<Info />} disabled>Settings</Sidebar.Item>
112+
<Sidebar.Item href="#" leadingIcon={<Info />} active>Dashboard</Sidebar.Item>
113+
<Sidebar.Item href="#" leadingIcon={<Info />} disabled>Settings</Sidebar.Item>
79114
</Sidebar.Main>
80-
</Sidebar>`,
81-
},
82-
],
115+
</Sidebar>`
116+
}
117+
]
83118
};

‎apps/www/src/content/docs/components/sidebar/index.mdx

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,36 @@ import { preview, positionDemo, stateDemo } from "./demo.ts";
1212
The Sidebar component provides a collapsible navigation panel with header, main content, groups, and footer sections.
1313

1414
```tsx
15-
import { Sidebar } from "@raystack/apsara";
15+
import { Sidebar, Flex, Text, IconButton } from "@raystack/apsara";
1616

1717
export default function App() {
1818
return (
1919
<Sidebar open={true}>
20-
<Sidebar.Header logo={<Home />} title="Company Name" />
20+
<Sidebar.Header>
21+
<Flex align="center" gap={3}>
22+
<IconButton size={4} onClick={() => console.log('Icon clicked')} aria-label="Logo">
23+
<Home />
24+
</IconButton>
25+
<Text size={4} weight="medium">Company Name</Text>
26+
</Flex>
27+
</Sidebar.Header>
2128
<Sidebar.Main>
22-
<Sidebar.Group name="Main">
23-
<Sidebar.Item href="#" icon={<Info />} active>
29+
<Sidebar.Group label="Main" leadingIcon={<Info />}>
30+
<Sidebar.Item href="#" leadingIcon={<Info />} active>
2431
Dashboard
2532
</Sidebar.Item>
26-
<Sidebar.Item href="#" icon={<Info />} disabled>
33+
<Sidebar.Item href="#" leadingIcon={<Info />} disabled>
2734
Settings
2835
</Sidebar.Item>
2936
</Sidebar.Group>
30-
<Sidebar.Group name="Support">
31-
<Sidebar.Item href="#" icon={<Info />}>
37+
<Sidebar.Group label="Support">
38+
<Sidebar.Item href="#" leadingIcon={<Info />}>
3239
Help
3340
</Sidebar.Item>
3441
</Sidebar.Group>
3542
</Sidebar.Main>
3643
<Sidebar.Footer>
37-
<Sidebar.Item href="#" icon={<Info />}>
44+
<Sidebar.Item href="#" leadingIcon={<Info />}>
3845
Help
3946
</Sidebar.Item>
4047
</Sidebar.Footer>
@@ -49,7 +56,7 @@ export default function App() {
4956

5057
### Sidebar.Header Props
5158

52-
<auto-type-table path="./props.ts" name="SidebarHeaderProps" />
59+
The header section is a container component that accepts all `div` props. It's commonly used to create a header with an icon and title.
5360

5461
### Sidebar.Group Props
5562

0 commit comments

Comments
 (0)