Skip to content

Commit 407c1bf

Browse files
kishore08-07kishore08-07
committed
drawer sistent component docs
Signed-off-by: kishore08-07 <kishorebsm8@gmail.com>
1 parent cf97a95 commit 407c1bf

2 files changed

Lines changed: 165 additions & 215 deletions

File tree

‎src/sections/Projects/Sistent/components/drawer/guidance.js‎

Lines changed: 155 additions & 203 deletions
Original file line numberDiff line numberDiff line change
@@ -3,100 +3,20 @@ import { navigate } from "gatsby";
33
import { useLocation } from "@reach/router";
44
import { Box, Button, Drawer, List, ListItem, SistentThemeProvider, Typography } from "@sistent/sistent";
55
import { SistentLayout } from "../../sistent-layout";
6+
import { Row } from "../../../../../reusecore/Layout";
67
import TabButton from "../../../../../reusecore/Button";
78
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
89
import MenuIcon from "@mui/icons-material/Menu";
910
import SettingsIcon from "@mui/icons-material/Settings";
1011
import FilterListIcon from "@mui/icons-material/FilterList";
1112

12-
// Navigation drawer example component
13-
const DrawerNavigationExample = ({ isDark }) => {
14-
const [open, setOpen] = React.useState(false);
15-
return (
16-
<Box sx={{ maxWidth: 500, margin: "0 auto" }}>
17-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
18-
<Button
19-
onClick={() => setOpen(true)}
20-
variant="contained"
21-
startIcon={<MenuIcon />}
22-
label="Open Navigation"
23-
/>
24-
<Drawer open={open} onClose={() => setOpen(false)}>
25-
<Box sx={{ width: 250, p: 2 }}>
26-
<Typography variant="h6" sx={{ mb: 2 }}>Main Menu</Typography>
27-
<List>
28-
<ListItem><Typography>Home</Typography></ListItem>
29-
<ListItem><Typography>Products</Typography></ListItem>
30-
<ListItem><Typography>Services</Typography></ListItem>
31-
<ListItem><Typography>About</Typography></ListItem>
32-
<ListItem><Typography>Contact</Typography></ListItem>
33-
</List>
34-
</Box>
35-
</Drawer>
36-
</SistentThemeProvider>
37-
</Box>
38-
);
39-
};
40-
41-
// Settings drawer example component
42-
const DrawerSettingsExample = ({ isDark }) => {
43-
const [open, setOpen] = React.useState(false);
44-
return (
45-
<Box sx={{ maxWidth: 500, margin: "0 auto" }}>
46-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
47-
<Button
48-
onClick={() => setOpen(true)}
49-
variant="outlined"
50-
startIcon={<SettingsIcon />}
51-
label="Settings"
52-
/>
53-
<Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
54-
<Box sx={{ width: 280, p: 2 }}>
55-
<Typography variant="h6" sx={{ mb: 2 }}>Settings</Typography>
56-
<List>
57-
<ListItem><Typography>Account</Typography></ListItem>
58-
<ListItem><Typography>Preferences</Typography></ListItem>
59-
<ListItem><Typography>Notifications</Typography></ListItem>
60-
<ListItem><Typography>Privacy</Typography></ListItem>
61-
</List>
62-
</Box>
63-
</Drawer>
64-
</SistentThemeProvider>
65-
</Box>
66-
);
67-
};
68-
69-
// Filter drawer example component
70-
const DrawerFilterExample = ({ isDark }) => {
71-
const [open, setOpen] = React.useState(false);
72-
return (
73-
<Box sx={{ maxWidth: 500, margin: "0 auto" }}>
74-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
75-
<Button
76-
onClick={() => setOpen(true)}
77-
variant="outlined"
78-
startIcon={<FilterListIcon />}
79-
label="Filters"
80-
/>
81-
<Drawer open={open} onClose={() => setOpen(false)}>
82-
<Box sx={{ width: 260, p: 2 }}>
83-
<Typography variant="h6" sx={{ mb: 2 }}>Filter Options</Typography>
84-
<List>
85-
<ListItem><Typography>Category</Typography></ListItem>
86-
<ListItem><Typography>Price Range</Typography></ListItem>
87-
<ListItem><Typography>Brand</Typography></ListItem>
88-
<ListItem><Typography>Rating</Typography></ListItem>
89-
</List>
90-
</Box>
91-
</Drawer>
92-
</SistentThemeProvider>
93-
</Box>
94-
);
95-
};
96-
9713
const DrawerGuidance = () => {
9814
const location = useLocation();
9915
const { isDark } = useStyledDarkMode();
16+
17+
const [navOpen, setNavOpen] = React.useState(false);
18+
const [settingsOpen, setSettingsOpen] = React.useState(false);
19+
const [filterOpen, setFilterOpen] = React.useState(false);
10020

10121
return (
10222
<SistentLayout title="Drawer">
@@ -143,124 +63,156 @@ const DrawerGuidance = () => {
14363
</div>
14464

14565
<div className="main-content">
146-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
147-
148-
<a id="when-to-use">
149-
<h2>When to Use Drawers</h2>
150-
</a>
151-
<p>
152-
Drawers are best suited for:
153-
</p>
154-
<ul>
155-
<li>Primary navigation menus in mobile and responsive applications</li>
156-
<li>Filtering and sorting options that need to be easily accessible but not always visible</li>
157-
<li>Settings panels that complement the main interface</li>
158-
<li>Secondary navigation or contextual information</li>
159-
<li>Multi-level navigation hierarchies</li>
160-
</ul>
161-
162-
<a id="variant-selection">
163-
<h2>Choosing the Right Variant</h2>
164-
</a>
165-
166-
<h3>Temporary Drawer</h3>
167-
<p>
168-
<strong>When to use:</strong> Mobile apps, responsive layouts, or when screen space is limited
169-
</p>
170-
<ul>
171-
<li>Overlays content with a backdrop</li>
172-
<li>Dismissed by clicking outside or pressing Escape</li>
173-
<li>Best for occasional access to navigation or settings</li>
174-
<li>Use temporary drawers for mobile and small tablet devices (&lt; 960px)</li>
175-
</ul>
176-
177-
<h3>Persistent Drawer</h3>
178-
<p>
179-
<strong>When to use:</strong> Desktop apps where users frequently toggle navigation visibility
180-
</p>
181-
<ul>
182-
<li>Sits alongside content, pushing it to the side</li>
183-
<li>Remains open until explicitly closed</li>
184-
<li>State is remembered across sessions</li>
185-
<li>Best for desktop applications with screen widths &gt; 960px</li>
186-
</ul>
187-
188-
<h3>Permanent Drawer</h3>
189-
<p>
190-
<strong>When to use:</strong> Desktop-first apps where navigation is always needed
191-
</p>
192-
<ul>
193-
<li>Always visible, cannot be closed</li>
194-
<li>Fixed at the edge of the viewport</li>
195-
<li>Best for large screens (&gt; 1280px) and complex applications</li>
196-
<li>Ideal for enterprise dashboards and multi-section interfaces</li>
197-
</ul>
198-
<a id="anchor-positions">
199-
<h2>Where to Position Drawers</h2>
200-
</a>
201-
202-
<h3>Left Anchor</h3>
203-
<p>
204-
<strong>Best for:</strong> Primary navigation, main menus, hierarchical navigation
205-
</p>
206-
<ul>
207-
<li>Most common position for navigation drawers</li>
208-
<li>Natural reading flow in LTR (left-to-right) interfaces</li>
209-
<li>Consistent with user expectations for menu placement</li>
210-
</ul>
211-
212-
<h3>Right Anchor</h3>
213-
<p>
214-
<strong>Best for:</strong> Settings, filters, shopping carts, detail panels
215-
</p>
216-
<ul>
217-
<li>Secondary or supplementary information</li>
218-
<li>Configuration and preferences</li>
219-
<li>Doesn't conflict with primary navigation on the left</li>
220-
</ul>
221-
222-
<h3>Top and Bottom Anchors</h3>
223-
<p>
224-
<strong>Top:</strong> Notifications, alerts, expandable headers<br/>
225-
<strong>Bottom:</strong> Mobile action sheets, quick actions, mobile-optimized panels
226-
</p>
227-
228-
<a id="best-practices">
229-
<h2>Best Practices</h2>
230-
</a>
231-
<br/>
232-
<h3>Content Organization</h3>
233-
<ul>
234-
<li>Keep drawer content focused on a single purpose</li>
235-
<li>Prioritize frequently used items at the top</li>
236-
<li>Group related items with visual separators</li>
237-
<li>Limit nesting to 2-3 levels maximum</li>
238-
</ul>
239-
240-
<h3>Accessibility</h3>
241-
<ul>
242-
<li>Ensure keyboard navigation works (Tab, Escape keys)</li>
243-
<li>Trap focus within the drawer when open</li>
244-
<li>Provide clear ARIA labels for screen readers</li>
245-
<li>Return focus to trigger element when closing</li>
246-
</ul>
247-
248-
<h3>Responsive Behavior</h3>
249-
<ul>
250-
<li>Use temporary drawers on mobile (&lt; 960px)</li>
251-
<li>Consider persistent or permanent on desktop (&gt; 960px)</li>
252-
<li>Adjust drawer width based on screen size</li>
253-
<li>Test on actual devices, not just browser resize</li>
254-
</ul>
255-
256-
<h3>User Experience</h3>
257-
<ul>
258-
<li>Make drawer triggers easily discoverable</li>
259-
<li>Provide smooth open/close animations</li>
260-
<li>Include a visible close button or clear dismiss method</li>
261-
<li>Maintain consistent behavior across your application</li>
262-
</ul>
263-
</SistentThemeProvider>
66+
<a id="Usage">
67+
<h2>Usage</h2>
68+
</a>
69+
<p>
70+
Drawers provide access to destinations and app functionality without navigating away from the current page. They help organize secondary content and actions, making your interface cleaner and more focused.
71+
</p>
72+
<ul>
73+
<li>Use drawers for navigation menus in mobile and responsive applications</li>
74+
<li>Organize filters and sorting options that need to be accessible but not always visible</li>
75+
<li>Present settings panels that complement the main interface</li>
76+
<li>Display contextual information without disrupting the user's workflow</li>
77+
</ul>
78+
79+
<a id="Basic Example">
80+
<h3>Basic Example</h3>
81+
</a>
82+
<p>
83+
A simple navigation drawer that slides in from the left side of the screen.
84+
</p>
85+
<Row className="image-container">
86+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
87+
<div style={{ width: "100%" }}>
88+
<Button
89+
onClick={() => setNavOpen(true)}
90+
variant="contained"
91+
startIcon={<MenuIcon />}
92+
label="Open Navigation"
93+
/>
94+
<Drawer open={navOpen} onClose={() => setNavOpen(false)}>
95+
<Box sx={{ width: 250, p: 2 }}>
96+
<Typography variant="h6" sx={{ mb: 2 }}>Main Menu</Typography>
97+
<List>
98+
<ListItem><Typography>Home</Typography></ListItem>
99+
<ListItem><Typography>Products</Typography></ListItem>
100+
<ListItem><Typography>Services</Typography></ListItem>
101+
<ListItem><Typography>About</Typography></ListItem>
102+
<ListItem><Typography>Contact</Typography></ListItem>
103+
</List>
104+
</Box>
105+
</Drawer>
106+
</div>
107+
</SistentThemeProvider>
108+
</Row>
109+
110+
<a id="When to Use">
111+
<h2>When to Use</h2>
112+
</a>
113+
<p>
114+
Drawers are best suited for specific use cases where content needs to be accessible but not always visible. Here are common scenarios:
115+
</p>
116+
117+
<h3>Navigation Menus</h3>
118+
<p>
119+
Drawers are ideal for primary navigation in mobile and responsive applications, providing access to main sections without cluttering the interface.
120+
</p>
121+
122+
<h3>Settings and Configuration</h3>
123+
<p>
124+
Use right-anchored drawers for settings panels that allow users to configure preferences without leaving their current context.
125+
</p>
126+
<Row className="image-container">
127+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
128+
<div style={{ width: "100%" }}>
129+
<Button
130+
onClick={() => setSettingsOpen(true)}
131+
variant="outlined"
132+
startIcon={<SettingsIcon />}
133+
label="Settings"
134+
/>
135+
<Drawer anchor="right" open={settingsOpen} onClose={() => setSettingsOpen(false)}>
136+
<Box sx={{ width: 280, p: 2 }}>
137+
<Typography variant="h6" sx={{ mb: 2 }}>Settings</Typography>
138+
<List>
139+
<ListItem><Typography>Account</Typography></ListItem>
140+
<ListItem><Typography>Preferences</Typography></ListItem>
141+
<ListItem><Typography>Notifications</Typography></ListItem>
142+
<ListItem><Typography>Privacy</Typography></ListItem>
143+
</List>
144+
</Box>
145+
</Drawer>
146+
</div>
147+
</SistentThemeProvider>
148+
</Row>
149+
150+
<h3>Filters and Sorting</h3>
151+
<p>
152+
Drawers work well for filter panels in e-commerce or data-heavy applications, allowing users to refine content without losing their place.
153+
</p>
154+
<Row className="image-container">
155+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
156+
<div style={{ width: "100%" }}>
157+
<Button
158+
onClick={() => setFilterOpen(true)}
159+
variant="outlined"
160+
startIcon={<FilterListIcon />}
161+
label="Filters"
162+
/>
163+
<Drawer open={filterOpen} onClose={() => setFilterOpen(false)}>
164+
<Box sx={{ width: 260, p: 2 }}>
165+
<Typography variant="h6" sx={{ mb: 2 }}>Filter Options</Typography>
166+
<List>
167+
<ListItem><Typography>Category</Typography></ListItem>
168+
<ListItem><Typography>Price Range</Typography></ListItem>
169+
<ListItem><Typography>Brand</Typography></ListItem>
170+
<ListItem><Typography>Rating</Typography></ListItem>
171+
</List>
172+
</Box>
173+
</Drawer>
174+
</div>
175+
</SistentThemeProvider>
176+
</Row>
177+
178+
<a id="Best Practices">
179+
<h2>Best Practices</h2>
180+
</a>
181+
<p>
182+
Follow these guidelines to ensure drawers are effective and user-friendly:
183+
</p>
184+
<ul>
185+
<li>
186+
<strong>Clear Purpose:</strong> Use drawers for navigation, filters, or supplementary content. Avoid using them for critical actions or primary content.
187+
</li>
188+
<li>
189+
<strong>Appropriate Width:</strong> Keep drawer width between 240-360px on desktop. On mobile, drawers can be up to 80% of screen width.
190+
</li>
191+
<li>
192+
<strong>Positioning:</strong> Use left anchors for primary navigation, right anchors for settings/filters, and top/bottom for mobile-specific patterns.
193+
</li>
194+
<li>
195+
<strong>Responsive Behavior:</strong> Use temporary drawers on mobile (&lt; 960px) and consider persistent or permanent drawers on desktop (&gt; 960px).
196+
</li>
197+
<li>
198+
<strong>Keyboard Support:</strong> Ensure drawers can be opened/closed with keyboard (Escape key) and focus is managed properly.
199+
</li>
200+
<li>
201+
<strong>Clear Dismissal:</strong> Provide multiple ways to close temporary drawers: backdrop click, close button, or Escape key.
202+
</li>
203+
<li>
204+
<strong>Content Organization:</strong> Keep drawer content focused and well-organized. Use lists, dividers, and headers to structure information.
205+
</li>
206+
<li>
207+
<strong>Performance:</strong> Lazy load drawer content when possible to improve initial page load performance.
208+
</li>
209+
<li>
210+
<strong>Accessibility:</strong> Use proper ARIA labels, manage focus trap within the drawer, and ensure screen reader compatibility.
211+
</li>
212+
<li>
213+
<strong>Animation:</strong> Use smooth slide-in/out transitions. Avoid overly long animations that slow down user interactions.
214+
</li>
215+
</ul>
264216
</div>
265217
</div>
266218
</SistentLayout>

0 commit comments

Comments
 (0)