Skip to content

Commit a5240da

Browse files
RajGajjar-01RajGajjar-01
authored
Merge branch 'master' into fix/update-meshery-playground-screenshots
2 parents 4ca33b7 + 5ff13a1 commit a5240da

6 files changed

Lines changed: 477 additions & 0 deletions

File tree

‎src/collections/members/APIPAWE-KATOTO-Daniel/Apipawe-katoto.jpeg‎

524 KB
Loading

‎src/collections/members/APIPAWE-KATOTO-Daniel/index.mdx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
name: Apipawe Katoto Daniel
3+
position: Contributor
4+
image_path: ./Apipawe-katoto.jpeg
5+
github: Katotodan
6+
layer5: 7e926cc5-8cde-4383-8c69-56ab6276b537
7+
location: Kampala,Uganda
8+
linkedin: apipawe-katoto-daniel-68a94422b
9+
twitter: DanielKatoto
10+
bio: I'm passionate about software engineering, with experience in frontend development using JavaScript and TypeScript, and backend development with JavaScript, TypeScript, Python, and Go. Currently, I'm exploring the cloud-native ecosystem, contributing to open source, and continuously learning new technologies and best practices.
11+
status: Active
12+
published: true
13+
---

‎src/collections/sistent/components/appbar/code.mdx‎

Lines changed: 370 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,370 @@
1+
---
2+
title: AppBar Code
3+
component: appbar
4+
description: An app bar is a header component that displays information and actions relating to the current screen, providing navigation, branding, and key functionality.
5+
---
6+
7+
import { useState } from 'react';
8+
import {
9+
AppBar, Toolbar, Typography, IconButton, Button,
10+
Menu, MenuIcon, MenuItem, Box, Avatar, Container, Tooltip
11+
} from "@sistent/sistent";
12+
13+
export const basicCode = `import { AppBar, Toolbar, Typography } from "@sistent/sistent";
14+
15+
<AppBar position="static">
16+
<Toolbar>
17+
<Typography variant="h6" component="div">
18+
My App
19+
</Typography>
20+
</Toolbar>
21+
</AppBar>`;
22+
23+
export const navCode = `import { AppBar, Toolbar, Typography, Button } from "@sistent/sistent";
24+
25+
<AppBar position="static">
26+
<Toolbar>
27+
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
28+
My App
29+
</Typography>
30+
<Button color="inherit">Home</Button>
31+
<Button color="inherit">About</Button>
32+
<Button color="inherit">Contact</Button>
33+
</Toolbar>
34+
</AppBar>`;
35+
36+
export const responsiveCode = `import React from 'react';
37+
import {
38+
AppBar, Toolbar, Typography, IconButton, Button,
39+
Menu, MenuIcon, MenuItem, Box, Avatar, Tooltip
40+
} from "@sistent/sistent";
41+
42+
function AppBarWithMenu() {
43+
const pages = ['Products', 'Pricing', 'Blog'];
44+
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
45+
const [anchorElNav, setAnchorElNav] = React.useState(null);
46+
const [anchorElUser, setAnchorElUser] = React.useState(null);
47+
48+
const handleOpenNavMenu = (event) => {
49+
setAnchorElNav(event.currentTarget);
50+
};
51+
const handleOpenUserMenu = (event) => {
52+
setAnchorElUser(event.currentTarget);
53+
};
54+
55+
const handleCloseNavMenu = () => {
56+
setAnchorElNav(null);
57+
};
58+
59+
const handleCloseUserMenu = () => {
60+
setAnchorElUser(null);
61+
};
62+
63+
return (
64+
<AppBar position="static">
65+
<Toolbar disableGutters>
66+
<Typography
67+
variant="h6"
68+
noWrap
69+
component="a"
70+
href="#app-bar-with-responsive-menu"
71+
sx={{
72+
mr: 2,
73+
display: { xs: 'none', md: 'flex' },
74+
fontFamily: 'monospace',
75+
fontWeight: 700,
76+
letterSpacing: '.3rem',
77+
color: 'inherit',
78+
textDecoration: 'none',
79+
}}
80+
>
81+
LOGO
82+
</Typography>
83+
84+
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
85+
<IconButton
86+
size="large"
87+
aria-label="account of current user"
88+
aria-controls="menu-appbar"
89+
aria-haspopup="true"
90+
onClick={handleOpenNavMenu}
91+
color="inherit"
92+
>
93+
<MenuIcon />
94+
</IconButton>
95+
<Menu
96+
id="menu-appbar"
97+
anchorEl={anchorElNav}
98+
anchorOrigin={{
99+
vertical: 'bottom',
100+
horizontal: 'left',
101+
}}
102+
keepMounted
103+
transformOrigin={{
104+
vertical: 'top',
105+
horizontal: 'left',
106+
}}
107+
open={Boolean(anchorElNav)}
108+
onClose={handleCloseNavMenu}
109+
sx={{ display: { xs: 'block', md: 'none' } }}
110+
>
111+
{pages.map((page) => (
112+
<MenuItem key={page} onClick={handleCloseNavMenu}>
113+
<Typography sx={{ textAlign: 'center' }}>{page}</Typography>
114+
</MenuItem>
115+
))}
116+
</Menu>
117+
</Box>
118+
<Typography
119+
variant="h5"
120+
noWrap
121+
component="a"
122+
href="#app-bar-with-responsive-menu"
123+
sx={{
124+
mr: 2,
125+
display: { xs: 'flex', md: 'none' },
126+
flexGrow: 1,
127+
fontFamily: 'monospace',
128+
fontWeight: 700,
129+
letterSpacing: '.3rem',
130+
color: 'inherit',
131+
textDecoration: 'none',
132+
}}
133+
>
134+
LOGO
135+
</Typography>
136+
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
137+
{pages.map((page) => (
138+
<Button
139+
key={page}
140+
onClick={handleCloseNavMenu}
141+
sx={{ my: 2, display: 'block' }}
142+
>
143+
{page}
144+
</Button>
145+
))}
146+
</Box>
147+
<Box sx={{ flexGrow: 0 }}>
148+
<Tooltip title="Open settings">
149+
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
150+
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
151+
</IconButton>
152+
</Tooltip>
153+
<Menu
154+
sx={{ mt: '45px' }}
155+
id="menu-appbar"
156+
anchorEl={anchorElUser}
157+
anchorOrigin={{
158+
vertical: 'top',
159+
horizontal: 'right',
160+
}}
161+
keepMounted
162+
transformOrigin={{
163+
vertical: 'top',
164+
horizontal: 'right',
165+
}}
166+
open={Boolean(anchorElUser)}
167+
onClose={handleCloseUserMenu}
168+
>
169+
{settings.map((setting) => (
170+
<MenuItem key={setting} onClick={handleCloseUserMenu}>
171+
<Typography sx={{ textAlign: 'center' }}>{setting}</Typography>
172+
</MenuItem>
173+
))}
174+
</Menu>
175+
</Box>
176+
</Toolbar>
177+
</AppBar>
178+
);
179+
}`;
180+
181+
export const ResponsiveAppBar = () => {
182+
const pages = ['Products', 'Pricing', 'Blog'];
183+
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
184+
const [anchorElNav, setAnchorElNav] = React.useState(null);
185+
const [anchorElUser, setAnchorElUser] = React.useState(null);
186+
187+
const handleOpenNavMenu = (event) => {
188+
setAnchorElNav(event.currentTarget);
189+
};
190+
const handleOpenUserMenu = (event) => {
191+
setAnchorElUser(event.currentTarget);
192+
};
193+
194+
const handleCloseNavMenu = () => {
195+
setAnchorElNav(null);
196+
};
197+
198+
const handleCloseUserMenu = () => {
199+
setAnchorElUser(null);
200+
};
201+
202+
return (
203+
<AppBar position="static">
204+
<Toolbar disableGutters>
205+
<Typography
206+
variant="h6"
207+
noWrap
208+
component="a"
209+
href="#app-bar-with-responsive-menu"
210+
sx={{
211+
mr: 2,
212+
display: { xs: 'none', md: 'flex' },
213+
fontFamily: 'monospace',
214+
fontWeight: 700,
215+
letterSpacing: '.3rem',
216+
color: 'inherit',
217+
textDecoration: 'none',
218+
}}
219+
>
220+
LOGO
221+
</Typography>
222+
223+
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
224+
<IconButton
225+
size="large"
226+
aria-label="account of current user"
227+
aria-controls="menu-appbar"
228+
aria-haspopup="true"
229+
onClick={handleOpenNavMenu}
230+
color="inherit"
231+
>
232+
<MenuIcon />
233+
</IconButton>
234+
<Menu
235+
id="menu-appbar"
236+
anchorEl={anchorElNav}
237+
anchorOrigin={{
238+
vertical: 'bottom',
239+
horizontal: 'left',
240+
}}
241+
keepMounted
242+
transformOrigin={{
243+
vertical: 'top',
244+
horizontal: 'left',
245+
}}
246+
open={Boolean(anchorElNav)}
247+
onClose={handleCloseNavMenu}
248+
sx={{ display: { xs: 'block', md: 'none' } }}
249+
>
250+
{pages.map((page) => (
251+
<MenuItem key={page} onClick={handleCloseNavMenu}>
252+
<Typography sx={{ textAlign: 'center' }}>{page}</Typography>
253+
</MenuItem>
254+
))}
255+
</Menu>
256+
</Box>
257+
<Typography
258+
variant="h5"
259+
noWrap
260+
component="a"
261+
href="#app-bar-with-responsive-menu"
262+
sx={{
263+
mr: 2,
264+
display: { xs: 'flex', md: 'none' },
265+
flexGrow: 1,
266+
fontFamily: 'monospace',
267+
fontWeight: 700,
268+
letterSpacing: '.3rem',
269+
color: 'inherit',
270+
textDecoration: 'none',
271+
}}
272+
>
273+
LOGO
274+
</Typography>
275+
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
276+
{pages.map((page) => (
277+
<Button
278+
key={page}
279+
onClick={handleCloseNavMenu}
280+
sx={{ my: 2, display: 'block' }}
281+
>
282+
{page}
283+
</Button>
284+
))}
285+
</Box>
286+
<Box sx={{ flexGrow: 0 }}>
287+
<Tooltip title="Open settings">
288+
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
289+
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
290+
</IconButton>
291+
</Tooltip>
292+
<Menu
293+
sx={{ mt: '45px' }}
294+
id="menu-appbar"
295+
anchorEl={anchorElUser}
296+
anchorOrigin={{
297+
vertical: 'top',
298+
horizontal: 'right',
299+
}}
300+
keepMounted
301+
transformOrigin={{
302+
vertical: 'top',
303+
horizontal: 'right',
304+
}}
305+
open={Boolean(anchorElUser)}
306+
onClose={handleCloseUserMenu}
307+
>
308+
{settings.map((setting) => (
309+
<MenuItem key={setting} onClick={handleCloseUserMenu}>
310+
<Typography sx={{ textAlign: 'center' }}>{setting}</Typography>
311+
</MenuItem>
312+
))}
313+
</Menu>
314+
</Box>
315+
</Toolbar>
316+
</AppBar>
317+
);
318+
}
319+
320+
The AppBar component works seamlessly with Sistent's theming system.
321+
322+
## Basic AppBar
323+
The simplest app bar includes just a toolbar with a title.
324+
325+
<div className="showcase">
326+
<div className="items">
327+
<ThemeWrapper>
328+
<AppBar position="static">
329+
<Toolbar>
330+
<Typography variant="h6" component="div">
331+
My App
332+
</Typography>
333+
</Toolbar>
334+
</AppBar>
335+
</ThemeWrapper>
336+
</div>
337+
<CodeBlock name="basic-appbar" collapsible code={basicCode} />
338+
</div>
339+
340+
## AppBar with Navigation
341+
Add navigation links to the right side of the app bar.
342+
343+
<div className="showcase">
344+
<div className="items">
345+
<ThemeWrapper>
346+
<AppBar position="static">
347+
<Toolbar>
348+
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
349+
My App
350+
</Typography>
351+
<Button color="inherit" sx={{ textTransform: 'none', marginRight: '16px' }}>Home</Button>
352+
<Button color="inherit" sx={{ textTransform: 'none' }}>About</Button>
353+
</Toolbar>
354+
</AppBar>
355+
</ThemeWrapper>
356+
</div>
357+
<CodeBlock name="appbar-navigation" collapsible code={navCode} />
358+
</div>
359+
360+
## AppBar with User Menu
361+
Create an interactive user menu with Avatar and Menu components.
362+
363+
<div className="showcase">
364+
<div className="items">
365+
<ThemeWrapper>
366+
<ResponsiveAppBar />
367+
</ThemeWrapper>
368+
</div>
369+
<CodeBlock name="appbar-user-menu" collapsible code={responsiveCode} />
370+
</div>

0 commit comments

Comments
 (0)