Skip to content

feat: sidebar improvements #665

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
paanSinghCoder wants to merge 12 commits into
base: main
Choose a base branch
from
Open

feat: sidebar improvements #665

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cccea5b
fix: sidebar css fixes
paanSinghCoder Mar 3, 2026
6c07c92
feat: update Sidebar item with BellIcon and enhance documentation for…
paanSinghCoder Mar 3, 2026
b8cee0e
feat: enhance DemoPreview component with customizable preview styles …
paanSinghCoder Mar 3, 2026
b522346
feat: add collapsible and hide tooltip demos to Sidebar documentation
paanSinghCoder Mar 3, 2026
c1a313b
refactor: update SidebarItem tooltip implementation for better structure
paanSinghCoder Mar 3, 2026
b7efa0f
refactor: update ARIA roles in Sidebar components for improved access…
paanSinghCoder Mar 3, 2026
6ae09de
style: replace inline cursor style with CSS class for SidebarItem fal…
paanSinghCoder Mar 3, 2026
51d4ec8
style: update SidebarItem to always display text and improve hidden s…
paanSinghCoder Mar 3, 2026
a2f8abc
style: refine Sidebar CSS for reduced motion preference and update te…
paanSinghCoder Mar 3, 2026
3f9e3dd
Merge branch 'main' into fix/sidebar-css
paanSinghCoder Mar 12, 2026
e9423e5
chore: do not renderf collapsed label
paanSinghCoder Mar 12, 2026
9e8d157
chore: remove class and fix css
paanSinghCoder Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/www/src/app/examples/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const Page = () => {
Dashboard
</Sidebar.Item>

<Sidebar.Item href='#' leadingIcon={0}>
<Sidebar.Item href='#' leadingIcon={<BellIcon />}>
Analytics
</Sidebar.Item>

Expand Down
10 changes: 10 additions & 0 deletions apps/www/src/components/demo/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ import {
UploadIcon
} from '@radix-ui/react-icons';
import * as Apsara from '@raystack/apsara';
import {
BellIcon,
FilterIcon,
OrganizationIcon,
SidebarIcon
} from '@raystack/apsara/icons';
import dayjs from 'dayjs';
import { Home, Info, Laugh, X } from 'lucide-react';
import NextLink from 'next/link';
Expand All @@ -24,6 +30,10 @@ export default function Demo(props: DemoProps) {
data,
scope = {
...Apsara,
BellIcon,
FilterIcon,
OrganizationIcon,
SidebarIcon,
DataTableDemo,
LinearMenuDemo,
PopoverColorPicker,
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/components/preview/preview.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.preview {
padding: 40px 20px;
padding: 0;
width: 100%;
height: 100%;
display: flex;
Expand Down
195 changes: 151 additions & 44 deletions apps/www/src/content/docs/components/sidebar/demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,115 @@
'use client';

const mainAreaStyle = `{{ flex: 1, border: '2px dashed var(--rs-color-border-base-secondary)', margin: 'var(--rs-space-4)', boxSizing: 'border-box' }}`;

const sidebarLayout = (sidebar: string) =>
`<Flex style={{ width: '100%', height: 480 }}>
${sidebar.trim()}
<Flex style=${mainAreaStyle} />
</Flex>`;

const sidebarLayoutRight = (sidebar: string) =>
`<Flex style={{ width: '100%', height: 480 }}>
<Flex style=${mainAreaStyle} />
${sidebar.trim()}
</Flex>`;

export const preview = {
type: 'code',
code: `
code: sidebarLayout(`
<Sidebar defaultOpen>
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<Home />
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Group label="Main" leadingIcon={<Info size={16} />}>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>
Dashboard
</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>
Analytics
</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>
Settings
</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Resources">
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>
Reports
</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>
Activities
</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Support">
<Sidebar.Item href="#" leadingIcon={<Info size={16} />}>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>
Help
</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
<Sidebar.Footer>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />}>
Help
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>
Help & Support
</Sidebar.Item>
</Sidebar.Footer>
</Sidebar>`
</Sidebar>`)
};

export const positionDemo = {
type: 'code',
tabs: [
{
name: 'Left',
code: `
code: sidebarLayout(`
<Sidebar open={true} position="left">
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<Home width={24} height={24}/>
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>Analytics</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Settings</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Support">
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Help</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`
</Sidebar>`)
},
{
name: 'Right',
code: `
code: sidebarLayoutRight(`
<Sidebar open={true} position="right">
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<Home width={24} height={24}/>
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>Analytics</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Settings</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Support">
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Help</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`
</Sidebar>`)
}
]
};
Expand All @@ -82,92 +119,162 @@ export const stateDemo = {
tabs: [
{
name: 'Expanded',
code: `<Sidebar open={true}>
code: sidebarLayout(`<Sidebar open={true}>
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<Home width={24} height={24}/>
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>Analytics</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Settings</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Support">
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Help</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`
</Sidebar>`)
},
{
name: 'Collapsed',
code: `<Sidebar open={false}>
code: sidebarLayout(`<Sidebar open={false}>
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<Home width={24} height={24}/>
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>Analytics</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Settings</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Support">
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Help</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`
</Sidebar>`)
},
{
name: 'Uncontrolled',
code: `<Sidebar>
code: sidebarLayout(`<Sidebar>
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<Home width={24} height={24}/>
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>Analytics</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Settings</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Support">
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Help</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`
</Sidebar>`)
},
{
name: 'Uncontrolled (default open)',
code: `<Sidebar defaultOpen>
code: sidebarLayout(`<Sidebar defaultOpen>
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<Home width={24} height={24}/>
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>Analytics</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Settings</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Support">
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Help</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`
</Sidebar>`)
}
]
};

export const tooltipDemo = {
type: 'code',
code: `<Sidebar
code: sidebarLayout(`<Sidebar
defaultOpen
tooltipMessage="Toggle navigation"
>
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<Home width={24} height={24}/>
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>Analytics</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Settings</Sidebar.Item>
</Sidebar.Group>
<Sidebar.Group label="Support">
<Sidebar.Item href="#" leadingIcon={<OrganizationIcon width={16} height={16} />}>Help</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`)
};

export const collapsibleDemo = {
type: 'code',
code: sidebarLayout(`<Sidebar defaultOpen collapsible={false}>
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>Analytics</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`)
};

export const hideTooltipDemo = {
type: 'code',
code: sidebarLayout(`<Sidebar defaultOpen={false} hideCollapsedItemTooltip>
<Sidebar.Header>
<Flex align="center" gap={3}>
<IconButton size={4} aria-label="Logo">
<BellIcon width={24} height={24} />
</IconButton>
<Text size={4} weight="medium" data-collapse-hidden>Apsara</Text>
</Flex>
</Sidebar.Header>
<Sidebar.Main>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<Info size={16} />} disabled>Settings</Sidebar.Item>
<Sidebar.Group label="Main">
<Sidebar.Item href="#" leadingIcon={<BellIcon width={16} height={16} />} active>Dashboard</Sidebar.Item>
<Sidebar.Item href="#" leadingIcon={<FilterIcon width={16} height={16} />}>Settings</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Main>
</Sidebar>`
</Sidebar>`)
};
Loading
Loading