react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
176 lines (172 loc) • 32.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Sidebar } from '../../components/organisms/Sidebar';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Card } from '../../components/atoms/Card';
import { Alert } from '../../components/atoms/Alert';
import { Icon } from '../../components/atoms/Icon';
import { Button } from '../../components/atoms/Button';
const SidebarDocumentation = () => {
const [isLeftOpen, setIsLeftOpen] = useState(false);
const [isRightOpen, setIsRightOpen] = useState(false);
const [isTopOpen, setIsTopOpen] = useState(false);
const [isBottomOpen, setIsBottomOpen] = useState(false);
const [isCustomOpen, setIsCustomOpen] = useState(false);
const handleClose = (setter) => {
setter(false);
};
return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsxs(Link, { to: "/documentation", className: "back-link", children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), "Back to Documentation"] }), _jsx("h1", { children: "Sidebar Component" }), _jsx("p", { className: "component-description", children: "A flexible sidebar component that can slide in from any direction. Perfect for navigation menus, settings panels, and mobile overlays." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { Sidebar } } from '../../components/atoms/Sidebar';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", onClick: () => setIsLeftOpen(true), leftIcon: "menu", children: "Open Left Sidebar" }), _jsx(Sidebar, { isOpen: isLeftOpen, onClose: () => handleClose(setIsLeftOpen), direction: "left", children: _jsxs("div", { style: { padding: '1rem' }, children: [_jsx("h3", { children: "Left Sidebar Content" }), _jsx("p", { children: "This is a basic sidebar that slides in from the left." }), _jsxs("ul", { children: [_jsx("li", { children: "Navigation item 1" }), _jsx("li", { children: "Navigation item 2" }), _jsx("li", { children: "Navigation item 3" })] })] }) })] }), _jsx(CodeBlock, { code: `const [isOpen, setIsOpen] = useState(false);
const handleClose = () => {
setIsOpen(false);
};
<Button onClick={() => setIsOpen(true)}>
Open Sidebar
</Button>
<Sidebar
isOpen={isOpen}
onClose={handleClose}
direction="left"
>
<div style={{ padding: '1rem' }}>
<h3>Sidebar Content</h3>
<p>Your sidebar content goes here.</p>
</div>
</Sidebar>`, language: "tsx" })] })] }), _jsxs("section", { className: "directions-section", children: [_jsx("h2", { children: "Directions" }), _jsx("p", { children: "Sidebars can slide in from any direction." }), _jsxs("div", { className: "directions-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "direction-card", children: [_jsx("h3", { children: "Left Sidebar" }), _jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", size: "sm", onClick: () => setIsLeftOpen(true), leftIcon: "menu", children: "Open Left" }), _jsx(Sidebar, { isOpen: isLeftOpen, onClose: () => handleClose(setIsLeftOpen), direction: "left", children: _jsxs("div", { style: { padding: '1rem' }, children: [_jsx("h3", { children: "Left Sidebar" }), _jsx("p", { children: "Slides in from the left side of the screen." }), _jsxs("ul", { children: [_jsx("li", { children: "Navigation menu" }), _jsx("li", { children: "Settings panel" }), _jsx("li", { children: "User profile" })] })] }) })] }), _jsx(CodeBlock, { code: `<Sidebar direction="left" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "direction-card", children: [_jsx("h3", { children: "Right Sidebar" }), _jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", size: "sm", onClick: () => setIsRightOpen(true), leftIcon: "menu", children: "Open Right" }), _jsx(Sidebar, { isOpen: isRightOpen, onClose: () => handleClose(setIsRightOpen), direction: "right", children: _jsxs("div", { style: { padding: '1rem' }, children: [_jsx("h3", { children: "Right Sidebar" }), _jsx("p", { children: "Slides in from the right side of the screen." }), _jsxs("ul", { children: [_jsx("li", { children: "Notifications" }), _jsx("li", { children: "Quick actions" }), _jsx("li", { children: "Help panel" })] })] }) })] }), _jsx(CodeBlock, { code: `<Sidebar direction="right" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "direction-card", children: [_jsx("h3", { children: "Top Sidebar" }), _jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", size: "sm", onClick: () => setIsTopOpen(true), leftIcon: "menu", children: "Open Top" }), _jsx(Sidebar, { isOpen: isTopOpen, onClose: () => handleClose(setIsTopOpen), direction: "top", children: _jsxs("div", { style: { padding: '1rem' }, children: [_jsx("h3", { children: "Top Sidebar" }), _jsx("p", { children: "Slides down from the top of the screen." }), _jsxs("ul", { children: [_jsx("li", { children: "Search bar" }), _jsx("li", { children: "Quick filters" }), _jsx("li", { children: "Breadcrumbs" })] })] }) })] }), _jsx(CodeBlock, { code: `<Sidebar direction="top" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "direction-card", children: [_jsx("h3", { children: "Bottom Sidebar" }), _jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", size: "sm", onClick: () => setIsBottomOpen(true), leftIcon: "menu", children: "Open Bottom" }), _jsx(Sidebar, { isOpen: isBottomOpen, onClose: () => handleClose(setIsBottomOpen), direction: "bottom", children: _jsxs("div", { style: { padding: '1rem' }, children: [_jsx("h3", { children: "Bottom Sidebar" }), _jsx("p", { children: "Slides up from the bottom of the screen." }), _jsxs("ul", { children: [_jsx("li", { children: "Action sheet" }), _jsx("li", { children: "Media controls" }), _jsx("li", { children: "Quick settings" })] })] }) })] }), _jsx(CodeBlock, { code: `<Sidebar direction="bottom" />`, language: "tsx" })] })] })] }), _jsxs("section", { className: "custom-header-section", children: [_jsx("h2", { children: "Custom Header" }), _jsx("p", { children: "Customize the sidebar header with your own content." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", onClick: () => setIsCustomOpen(true), leftIcon: "settings", children: "Open Custom Sidebar" }), _jsx(Sidebar, { isOpen: isCustomOpen, onClose: () => handleClose(setIsCustomOpen), direction: "right", headerContent: _jsxs("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '1rem',
borderBottom: '1px solid var(--color-border)'
}, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(Icon, { name: "settings", size: "lg", color: "var(--color-primary)" }), _jsx("h3", { style: { margin: 0 }, children: "Settings Panel" })] }), _jsx(Button, { colorScheme: "ghost", size: "sm", onClick: () => handleClose(setIsCustomOpen), leftIcon: "close", children: "Close" })] }), children: _jsxs("div", { style: { padding: '1rem' }, children: [_jsx("h4", { children: "Account Settings" }), _jsx("p", { children: "Manage your account preferences and settings." }), _jsxs("div", { style: { marginTop: '1rem' }, children: [_jsx("h5", { children: "Profile" }), _jsx("p", { children: "Update your personal information" }), _jsx("h5", { children: "Security" }), _jsx("p", { children: "Manage passwords and security settings" }), _jsx("h5", { children: "Notifications" }), _jsx("p", { children: "Configure notification preferences" })] })] }) })] }), _jsx(CodeBlock, { code: `<Sidebar
isOpen={isOpen}
onClose={handleClose}
direction="right"
headerContent={
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Icon name="settings" size="lg" />
<h3>Settings Panel</h3>
</div>
<Button onClick={handleClose}>Close</Button>
</div>
}
>
{/* Sidebar content */}
</Sidebar>`, language: "tsx" })] })] }), _jsxs("section", { className: "no-header-section", children: [_jsx("h2", { children: "No Header" }), _jsx("p", { children: "Create sidebars without a header for full-content control." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "secondary", onClick: () => setIsCustomOpen(true), leftIcon: "menu", children: "Open Full Content Sidebar" }), _jsx(Sidebar, { isOpen: isCustomOpen, onClose: () => handleClose(setIsCustomOpen), direction: "left", showHeader: false, children: _jsxs("div", { style: {
padding: '2rem',
height: '100%',
display: 'flex',
flexDirection: 'column'
}, children: [_jsxs("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '2rem'
}, children: [_jsx("h2", { style: { margin: 0 }, children: "Navigation Menu" }), _jsx(Button, { colorScheme: "ghost", size: "sm", onClick: () => handleClose(setIsCustomOpen), leftIcon: "close" })] }), _jsx("nav", { style: { flex: 1 }, children: _jsxs("ul", { style: { listStyle: 'none', padding: 0, margin: 0 }, children: [_jsx("li", { style: { marginBottom: '1rem' }, children: _jsxs("a", { href: "#", style: {
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
padding: '0.75rem',
borderRadius: '0.5rem',
textDecoration: 'none',
color: 'var(--color-text)',
backgroundColor: 'var(--color-background-hover)'
}, children: [_jsx(Icon, { name: "home", size: "sm" }), "Home"] }) }), _jsx("li", { style: { marginBottom: '1rem' }, children: _jsxs("a", { href: "#", style: {
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
padding: '0.75rem',
borderRadius: '0.5rem',
textDecoration: 'none',
color: 'var(--color-text)'
}, children: [_jsx(Icon, { name: "user", size: "sm" }), "Profile"] }) }), _jsx("li", { style: { marginBottom: '1rem' }, children: _jsxs("a", { href: "#", style: {
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
padding: '0.75rem',
borderRadius: '0.5rem',
textDecoration: 'none',
color: 'var(--color-text)'
}, children: [_jsx(Icon, { name: "settings", size: "sm" }), "Settings"] }) })] }) })] }) })] }), _jsx(CodeBlock, { code: `<Sidebar
isOpen={isOpen}
onClose={handleClose}
direction="left"
showHeader={false}
>
{/* Full content control */}
<div style={{ padding: '2rem' }}>
<h2>Navigation Menu</h2>
{/* Your custom navigation content */}
</div>
</Sidebar>`, language: "tsx" })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world sidebar implementations." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Navigation Sidebar" }), _jsx("p", { children: "Complete navigation menu with categories and icons." }), _jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", size: "sm", onClick: () => setIsCustomOpen(true), leftIcon: "menu", children: "Open Navigation" }), _jsx(Sidebar, { isOpen: isCustomOpen, onClose: () => handleClose(setIsCustomOpen), direction: "left", headerContent: _jsxs("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '1rem'
}, children: [_jsx("h3", { style: { margin: 0 }, children: "Main Menu" }), _jsx(Button, { colorScheme: "ghost", size: "sm", onClick: () => handleClose(setIsCustomOpen), leftIcon: "close" })] }), children: _jsxs("div", { style: { padding: '1rem' }, children: [_jsxs("div", { style: { marginBottom: '2rem' }, children: [_jsx("h4", { style: { marginBottom: '1rem' }, children: "Dashboard" }), _jsxs("ul", { style: { listStyle: 'none', padding: 0 }, children: [_jsx("li", { style: { marginBottom: '0.5rem' }, children: _jsxs("a", { href: "#", style: {
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
padding: '0.5rem',
borderRadius: '0.25rem',
textDecoration: 'none',
color: 'var(--color-text)'
}, children: [_jsx(Icon, { name: "home", size: "sm" }), "Overview"] }) }), _jsx("li", { style: { marginBottom: '0.5rem' }, children: _jsxs("a", { href: "#", style: {
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
padding: '0.5rem',
borderRadius: '0.25rem',
textDecoration: 'none',
color: 'var(--color-text)'
}, children: [_jsx(Icon, { name: "activity", size: "sm" }), "Analytics"] }) })] })] }), _jsxs("div", { style: { marginBottom: '2rem' }, children: [_jsx("h4", { style: { marginBottom: '1rem' }, children: "Management" }), _jsxs("ul", { style: { listStyle: 'none', padding: 0 }, children: [_jsx("li", { style: { marginBottom: '0.5rem' }, children: _jsxs("a", { href: "#", style: {
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
padding: '0.5rem',
borderRadius: '0.25rem',
textDecoration: 'none',
color: 'var(--color-text)'
}, children: [_jsx(Icon, { name: "users", size: "sm" }), "Users"] }) }), _jsx("li", { style: { marginBottom: '0.5rem' }, children: _jsxs("a", { href: "#", style: {
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
padding: '0.5rem',
borderRadius: '0.25rem',
textDecoration: 'none',
color: 'var(--color-text)'
}, children: [_jsx(Icon, { name: "settings", size: "sm" }), "Settings"] }) })] })] })] }) })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Settings Panel" }), _jsx("p", { children: "Configuration panel with form controls and sections." }), _jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: () => setIsCustomOpen(true), leftIcon: "settings", children: "Open Settings" }), _jsx(Sidebar, { isOpen: isCustomOpen, onClose: () => handleClose(setIsCustomOpen), direction: "right", headerContent: _jsxs("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '1rem'
}, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(Icon, { name: "settings", size: "lg", color: "var(--color-primary)" }), _jsx("h3", { style: { margin: 0 }, children: "Settings" })] }), _jsx(Button, { colorScheme: "ghost", size: "sm", onClick: () => handleClose(setIsCustomOpen), leftIcon: "close" })] }), children: _jsxs("div", { style: { padding: '1rem' }, children: [_jsxs("div", { style: { marginBottom: '2rem' }, children: [_jsx("h4", { children: "Account" }), _jsx("p", { style: { fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: "Manage your account settings" })] }), _jsxs("div", { style: { marginBottom: '2rem' }, children: [_jsx("h4", { children: "Notifications" }), _jsx("p", { style: { fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: "Configure notification preferences" })] }), _jsxs("div", { style: { marginBottom: '2rem' }, children: [_jsx("h4", { children: "Privacy" }), _jsx("p", { style: { fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: "Control your privacy settings" })] })] }) })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Mobile Menu" }), _jsx("p", { children: "Mobile-first navigation with touch-friendly design." }), _jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", size: "sm", onClick: () => setIsCustomOpen(true), leftIcon: "hamburger", children: "Open Mobile Menu" }), _jsx(Sidebar, { isOpen: isCustomOpen, onClose: () => handleClose(setIsCustomOpen), direction: "left", showHeader: false, children: _jsxs("div", { style: {
padding: '1rem',
height: '100%',
display: 'flex',
flexDirection: 'column'
}, children: [_jsxs("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '2rem',
paddingBottom: '1rem',
borderBottom: '1px solid var(--color-border)'
}, children: [_jsx("h2", { style: { margin: 0 }, children: "Menu" }), _jsx(Button, { colorScheme: "ghost", size: "sm", onClick: () => handleClose(setIsCustomOpen), leftIcon: "close" })] }), _jsxs("nav", { style: { flex: 1 }, children: [_jsxs("div", { style: { marginBottom: '2rem' }, children: [_jsx("h4", { style: { marginBottom: '1rem' }, children: "Main" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsx(Button, { colorScheme: "ghost", leftIcon: "home", style: { justifyContent: 'flex-start' }, children: "Home" }), _jsx(Button, { colorScheme: "ghost", leftIcon: "user", style: { justifyContent: 'flex-start' }, children: "Profile" }), _jsx(Button, { colorScheme: "ghost", leftIcon: "settings", style: { justifyContent: 'flex-start' }, children: "Settings" })] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '1rem' }, children: "Support" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsx(Button, { colorScheme: "ghost", leftIcon: "help-circle", style: { justifyContent: 'flex-start' }, children: "Help" }), _jsx(Button, { colorScheme: "ghost", leftIcon: "message", style: { justifyContent: 'flex-start' }, children: "Contact" })] })] })] })] }) })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Quick Actions" }), _jsx("p", { children: "Bottom sheet for quick actions and shortcuts." }), _jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: () => setIsCustomOpen(true), leftIcon: "plus", children: "Quick Actions" }), _jsx(Sidebar, { isOpen: isCustomOpen, onClose: () => handleClose(setIsCustomOpen), direction: "bottom", showHeader: false, children: _jsxs("div", { style: {
padding: '1rem',
borderTopLeftRadius: '1rem',
borderTopRightRadius: '1rem'
}, children: [_jsxs("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '1rem'
}, children: [_jsx("h3", { style: { margin: 0 }, children: "Quick Actions" }), _jsx(Button, { colorScheme: "ghost", size: "sm", onClick: () => handleClose(setIsCustomOpen), leftIcon: "close" })] }), _jsxs("div", { style: {
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '1rem',
marginBottom: '1rem'
}, children: [_jsxs(Button, { colorScheme: "ghost", leftIcon: "plus", style: { flexDirection: 'column', height: 'auto', padding: '1rem' }, children: [_jsx(Icon, { name: "plus", size: "lg" }), _jsx("span", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "New Item" })] }), _jsxs(Button, { colorScheme: "ghost", leftIcon: "upload", style: { flexDirection: 'column', height: 'auto', padding: '1rem' }, children: [_jsx(Icon, { name: "upload", size: "lg" }), _jsx("span", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "Upload" })] }), _jsxs(Button, { colorScheme: "ghost", leftIcon: "share", style: { flexDirection: 'column', height: 'auto', padding: '1rem' }, children: [_jsx(Icon, { name: "share", size: "lg" }), _jsx("span", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "Share" })] })] })] }) })] })] })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "children" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Content to display inside the sidebar" })] }), _jsxs("tr", { children: [_jsx("td", { children: "className" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes" })] }), _jsxs("tr", { children: [_jsx("td", { children: "direction" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'left'" }), _jsx("td", { children: "Direction to slide from (left, right, top, bottom)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isOpen" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Whether the sidebar is open" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onClose" }), _jsx("td", { children: "function" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Callback when sidebar should close" })] }), _jsxs("tr", { children: [_jsx("td", { children: "showHeader" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "true" }), _jsx("td", { children: "Whether to show the header" })] }), _jsxs("tr", { children: [_jsx("td", { children: "headerContent" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Custom header content" })] })] })] }) }) })] }), _jsxs("section", { className: "best-practices-section", children: [_jsx("h2", { children: "Best Practices" }), _jsxs("div", { className: "practices-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u2705 Do" }), _jsxs("ul", { children: [_jsx("li", { children: "Use appropriate directions for different use cases" }), _jsx("li", { children: "Provide clear close buttons or gestures" }), _jsx("li", { children: "Keep content focused and organized" }), _jsx("li", { children: "Use consistent spacing and typography" }), _jsx("li", { children: "Test on different screen sizes" }), _jsx("li", { children: "Provide keyboard navigation support" }), _jsx("li", { children: "Use appropriate overlay behavior" }), _jsx("li", { children: "Consider mobile-first design" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u274C Don't" }), _jsxs("ul", { children: [_jsx("li", { children: "Don't overload sidebars with too much content" }), _jsx("li", { children: "Don't forget to handle body scroll locking" }), _jsx("li", { children: "Don't use sidebars for critical navigation only" }), _jsx("li", { children: "Don't ignore accessibility requirements" }), _jsx("li", { children: "Don't use inconsistent close behaviors" }), _jsx("li", { children: "Don't forget to test on mobile devices" }), _jsx("li", { children: "Don't use sidebars for temporary content" }), _jsx("li", { children: "Don't ignore performance considerations" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Sidebar component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA labels and roles" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "Focus management and trapping" }), _jsx("li", { children: "Screen reader announcements" }), _jsx("li", { children: "Body scroll locking for better UX" }), _jsx("li", { children: "Escape key to close functionality" }), _jsx("li", { children: "High contrast support" }), _jsx("li", { children: "Touch-friendly design for mobile" })] })] })] })] }) }));
};
export default SidebarDocumentation;