Skip to content

Commit 3189709

Browse files
gridheadgridhead
committed
Include unit components and core navigations
Signed-off-by: Akashdeep Dhar <akashdeep.dhar@gmail.com>
1 parent c93c0d1 commit 3189709

File tree

14 files changed

+645
-0
lines changed

14 files changed

+645
-0
lines changed

‎visual/src/comp/back.tsx‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
import {
2+
AccessAlarm,
3+
AccountTree,
4+
BugReport,
5+
Cable,
6+
Dashboard,
7+
Favorite,
8+
Info,
9+
Inventory,
10+
Memory,
11+
Settings,
12+
} from "@mui/icons-material";
13+
import MenuIcon from "@mui/icons-material/Menu";
14+
import AppBar from "@mui/material/AppBar";
15+
import Box from "@mui/material/Box";
16+
import CssBaseline from "@mui/material/CssBaseline";
17+
import Divider from "@mui/material/Divider";
18+
import Drawer from "@mui/material/Drawer";
19+
import IconButton from "@mui/material/IconButton";
20+
import List from "@mui/material/List";
21+
import ListItem from "@mui/material/ListItem";
22+
import ListItemButton from "@mui/material/ListItemButton";
23+
import ListItemIcon from "@mui/material/ListItemIcon";
24+
import ListItemText from "@mui/material/ListItemText";
25+
import Toolbar from "@mui/material/Toolbar";
26+
import Typography from "@mui/material/Typography";
27+
import * as React from "react";
28+
29+
const drawerWidth = 240;
30+
31+
export default function ResponsiveDrawer() {
32+
const [mobileOpen, setMobileOpen] = React.useState(false);
33+
const [isClosing, setIsClosing] = React.useState(false);
34+
35+
const handleDrawerClose = () => {
36+
setIsClosing(true);
37+
setMobileOpen(false);
38+
};
39+
40+
const handleDrawerTransitionEnd = () => {
41+
setIsClosing(false);
42+
};
43+
44+
const handleDrawerToggle = () => {
45+
if (!isClosing) {
46+
setMobileOpen(!mobileOpen);
47+
}
48+
};
49+
50+
const drawer = (
51+
<div>
52+
<Toolbar variant="dense" sx={{ backgroundColor: "#008080" }}>
53+
Menu
54+
</Toolbar>
55+
<Divider />
56+
<List>
57+
<ListItem disablePadding>
58+
<ListItemButton>
59+
<ListItemIcon>
60+
<Dashboard />
61+
</ListItemIcon>
62+
<ListItemText primary="Resources" />
63+
</ListItemButton>
64+
</ListItem>
65+
<ListItem disablePadding>
66+
<ListItemButton>
67+
<ListItemIcon>
68+
<AccountTree />
69+
</ListItemIcon>
70+
<ListItemText primary="Activities" />
71+
</ListItemButton>
72+
</ListItem>
73+
<ListItem disablePadding>
74+
<ListItemButton>
75+
<ListItemIcon>
76+
<AccessAlarm />
77+
</ListItemIcon>
78+
<ListItemText primary="Processing" />
79+
</ListItemButton>
80+
</ListItem>
81+
<ListItem disablePadding>
82+
<ListItemButton>
83+
<ListItemIcon>
84+
<Memory />
85+
</ListItemIcon>
86+
<ListItemText primary="Performance" />
87+
</ListItemButton>
88+
</ListItem>
89+
<ListItem disablePadding>
90+
<ListItemButton>
91+
<ListItemIcon>
92+
<Cable />
93+
</ListItemIcon>
94+
<ListItemText primary="Connections" />
95+
</ListItemButton>
96+
</ListItem>
97+
<ListItem disablePadding>
98+
<ListItemButton>
99+
<ListItemIcon>
100+
<Inventory />
101+
</ListItemIcon>
102+
<ListItemText primary="Partitions" />
103+
</ListItemButton>
104+
</ListItem>
105+
</List>
106+
<Divider />
107+
<List>
108+
<ListItem disablePadding>
109+
<ListItemButton>
110+
<ListItemIcon>
111+
<Settings />
112+
</ListItemIcon>
113+
<ListItemText primary="Preferences" />
114+
</ListItemButton>
115+
</ListItem>
116+
<ListItem disablePadding>
117+
<ListItemButton>
118+
<ListItemIcon>
119+
<Info />
120+
</ListItemIcon>
121+
<ListItemText primary="Information" />
122+
</ListItemButton>
123+
</ListItem>
124+
<ListItem disablePadding>
125+
<ListItemButton>
126+
<ListItemIcon>
127+
<BugReport />
128+
</ListItemIcon>
129+
<ListItemText primary="Communicate" />
130+
</ListItemButton>
131+
</ListItem>
132+
<ListItem disablePadding>
133+
<ListItemButton>
134+
<ListItemIcon>
135+
<Favorite />
136+
</ListItemIcon>
137+
<ListItemText primary="Contribute" />
138+
</ListItemButton>
139+
</ListItem>
140+
</List>
141+
</div>
142+
);
143+
144+
return (
145+
<Box sx={{ display: "flex" }}>
146+
<CssBaseline />
147+
<AppBar
148+
position="fixed"
149+
sx={{
150+
width: { sm: `calc(100% - ${drawerWidth}px)` },
151+
ml: { sm: `${drawerWidth}px` },
152+
}}
153+
color="success"
154+
>
155+
<Toolbar variant="dense">
156+
<IconButton
157+
color="inherit"
158+
aria-label="open drawer"
159+
edge="start"
160+
onClick={handleDrawerToggle}
161+
sx={{ mr: 2, display: { sm: "none" } }}
162+
>
163+
<MenuIcon />
164+
</IconButton>
165+
<Typography variant="h6" noWrap component="div">
166+
Observer
167+
</Typography>
168+
</Toolbar>
169+
</AppBar>
170+
<Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }} aria-label="mailbox folders">
171+
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
172+
173+
<Drawer
174+
variant="temporary"
175+
open={mobileOpen}
176+
onTransitionEnd={handleDrawerTransitionEnd}
177+
onClose={handleDrawerClose}
178+
ModalProps={{
179+
keepMounted: true, // Better open performance on mobile.
180+
}}
181+
sx={{
182+
display: { xs: "block", sm: "none" },
183+
"& .MuiDrawer-paper": { boxSizing: "border-box", width: drawerWidth },
184+
}}
185+
>
186+
{drawer}
187+
</Drawer>
188+
189+
<Drawer
190+
variant="permanent"
191+
sx={{
192+
display: { xs: "none", sm: "block" },
193+
"& .MuiDrawer-paper": { boxSizing: "border-box", width: drawerWidth },
194+
}}
195+
open
196+
>
197+
{drawer}
198+
</Drawer>
199+
</Box>
200+
<Box component="main" sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}>
201+
<Toolbar variant="dense" />
202+
<Typography sx={{ marginBottom: 2 }}>
203+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
204+
magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
205+
imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum
206+
velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
207+
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu
208+
scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt
209+
lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed
210+
ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac.
211+
</Typography>
212+
<Typography sx={{ marginBottom: 2 }}>
213+
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam
214+
dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus
215+
sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod
216+
lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in.
217+
In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
218+
morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod
219+
elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere
220+
sollicitudin aliquam ultrices sagittis orci a.
221+
</Typography>
222+
</Box>
223+
</Box>
224+
);
225+
}

‎visual/src/comp/card.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import Box from "@mui/material/Box";
2+
import Button from "@mui/material/Button";
3+
import Card from "@mui/material/Card";
4+
import CardActions from "@mui/material/CardActions";
5+
import CardContent from "@mui/material/CardContent";
6+
import Typography from "@mui/material/Typography";
7+
8+
const bull = (
9+
<Box component="span" sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}>
10+
•
11+
</Box>
12+
);
13+
14+
export default function BasicCard() {
15+
return (
16+
<Card sx={{ minWidth: 250, flexGrow: 1 }}>
17+
<CardContent>
18+
<Typography gutterBottom sx={{ color: "text.secondary", fontSize: 14 }}>
19+
Word of the Day
20+
</Typography>
21+
<Typography variant="h5" component="div">
22+
be{bull}nev{bull}o{bull}lent
23+
</Typography>
24+
<Typography sx={{ color: "text.secondary", mb: 1.5 }}>adjective</Typography>
25+
<Typography variant="body2">
26+
well meaning and kindly.
27+
<br />
28+
{'"a benevolent smile"'}
29+
</Typography>
30+
</CardContent>
31+
<CardActions>
32+
<Button size="small">Learn More</Button>
33+
</CardActions>
34+
</Card>
35+
);
36+
}

‎visual/src/comp/head.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useLocation } from "react-router";
2+
3+
export default function ObtainHeader() {
4+
const location = useLocation();
5+
6+
const header = () => {
7+
switch (location.pathname) {
8+
case "/":
9+
return "Resources";
10+
case "/task":
11+
return "Activities";
12+
case "/proc":
13+
return "Processing";
14+
case "/memo":
15+
return "Performance";
16+
case "/ntwk":
17+
return "Connections";
18+
case "/disk":
19+
return "Partitions";
20+
default:
21+
return "Resources";
22+
}
23+
};
24+
25+
return <>{header()}</>;
26+
}

‎visual/src/comp/side.tsx‎

Whitespace-only changes.

‎visual/src/core.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { BrowserRouter, Route, Routes } from "react-router";
2+
3+
import Disk from "./path/disk.tsx";
4+
import Memo from "./path/memo.tsx";
5+
import MainMenu from "./path/menu.tsx";
6+
import Ntwk from "./path/ntwk.tsx";
7+
import Over from "./path/over.tsx";
8+
import Proc from "./path/proc.tsx";
9+
import Task from "./path/task.tsx";
10+
11+
export default function Core() {
12+
return (
13+
<>
14+
<BrowserRouter>
15+
<Routes>
16+
<Route element={<MainMenu />} path="/">
17+
<Route element={<Over />} index />
18+
<Route element={<Task />} path="/task" />
19+
<Route element={<Proc />} path="/proc" />
20+
<Route element={<Memo />} path="/memo" />
21+
<Route element={<Ntwk />} path="/ntwk" />
22+
<Route element={<Disk />} path="/disk" />
23+
</Route>
24+
</Routes>
25+
</BrowserRouter>
26+
{/*<MainMenu />*/}
27+
</>
28+
);
29+
}

‎visual/src/main.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
4+
import Core from "./core.tsx";
5+
6+
createRoot(document.getElementById("root")!).render(
7+
<StrictMode>
8+
<Core />
9+
</StrictMode>
10+
);

‎visual/src/path/disk.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Typography from "@mui/material/Typography";
2+
3+
import ObtainHeader from "../comp/head.tsx";
4+
5+
export default function Disk() {
6+
return (
7+
<Typography sx={{ marginBottom: 2 }} variant="h4">
8+
<ObtainHeader />
9+
</Typography>
10+
);
11+
}

‎visual/src/path/memo.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Typography from "@mui/material/Typography";
2+
3+
import ObtainHeader from "../comp/head.tsx";
4+
5+
export default function Memo() {
6+
return (
7+
<Typography sx={{ marginBottom: 2 }} variant="h4">
8+
<ObtainHeader />
9+
</Typography>
10+
);
11+
}

0 commit comments

Comments
 (0)