mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-18 23:59:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added collapse/expand button

Browse Source
This commit is contained in:
Daniel Cojocea
2024-08-19 13:23:17 -04:00
parent 7690c04b7f
commit a2d54ce7d7
6 changed files with 109 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
Client/src/Components/Sidebar/index.css
View File

@@ -52,7 +52,7 @@ aside
> .MuiListItemButton-root::before {
content: "";
position: absolute;
left: -8px;
left: -7px;
top: 0;
height: 100%;
width: 100%;
@@ -65,7 +65,8 @@ aside
> .MuiListItemButton-root:last-child::before {
height: 50%;
}
aside .MuiCollapse-wrapperInner .MuiList-root svg {
aside .MuiCollapse-wrapperInner .MuiList-root svg,
aside .MuiList-root .MuiListItemText-root + svg {
width: 18px;
height: 18px;
}
@@ -73,11 +74,18 @@ aside .MuiCollapse-wrapperInner .MuiList-root svg {
aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
content: "";
position: absolute;
left: -8px;
left: -7px;
top: 50%;
height: 1px;
width: 7px;
width: 6px;
border-radius: 50%;
background-color: var(--env-var-color-5);
opacity: 0.3;
}
aside {
transition: flex 300ms ease-out;
}
aside .MuiList-root {
transition: padding 100ms ease;
}

114
Client/src/Components/Sidebar/index.jsx
View File

@@ -36,6 +36,8 @@ import PageSpeed from "../../assets/icons/page-speed.svg?react";
import Settings from "../../assets/icons/settings.svg?react";
import ArrowDown from "../../assets/icons/down-arrow.svg?react";
import ArrowUp from "../../assets/icons/up-arrow.svg?react";
import ArrowRight from "../../assets/icons/right-arrow.svg?react";
import ArrowLeft from "../../assets/icons/left-arrow.svg?react";
import "./index.css";
@@ -82,6 +84,7 @@ function Sidebar() {
const dispatch = useDispatch();
const authState = useSelector((state) => state.auth);
const [open, setOpen] = useState({ Dashboard: false, Account: false });
const [collapsed, setCollapsed] = useState(false);
/**
* Handles logging out the user
@@ -105,9 +108,42 @@ function Sidebar() {
}, []);
return (
<Stack component="aside" gap={theme.gap.medium}>
<Box py={theme.gap.large} pl={theme.gap.lgplus}>
<BWULogo alt="BlueWave Uptime Logo" />
<Stack
component="aside"
gap={theme.gap.medium}
sx={{ flex: collapsed ? 0 : 1 }}
>
<Box
width="100%"
py={theme.gap.large}
pl={collapsed ? theme.gap.medium : theme.gap.lgplus}
>
{!collapsed && <BWULogo alt="BlueWave Uptime Logo" />}
<IconButton
sx={{
position: "absolute",
right: 0,
transform: `translate(50%, 0)`,
backgroundColor: theme.palette.otherColors.fillGray,
border: `solid 1px ${theme.palette.otherColors.graishWhite}`,
p: "5px",
"& svg": {
width: theme.gap.ml,
height: theme.gap.ml,
"& path": {
stroke: theme.palette.otherColors.bluishGray,
},
},
"&:focus": { outline: "none" },
"&:hover": {
backgroundColor: "#e3e3e3",
borderColor: theme.palette.otherColors.graishWhite,
},
}}
onClick={() => setCollapsed(!collapsed)}
>
{collapsed ? <ArrowRight /> : <ArrowLeft />}
</IconButton>
</Box>
{/* menu */}
<List
@@ -118,11 +154,16 @@ function Sidebar() {
<ListSubheader
component="div"
id="nested-menu-subheader"
sx={{ pt: theme.gap.small }}
sx={{
pt: theme.gap.small,
px: collapsed ? theme.gap.xs : theme.gap.ml,
textAlign: collapsed ? "center" : "left",
}}
>
Menu
</ListSubheader>
}
sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
>
{menu.map((item) =>
item.path ? (
@@ -135,10 +176,23 @@ function Sidebar() {
sx={{
gap: theme.gap.medium,
borderRadius: `${theme.shape.borderRadius}px`,
justifyContent: collapsed ? "center" : "flex-start",
}}
>
<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
<ListItemText>{item.name}</ListItemText>
{!collapsed && <ListItemText>{item.name}</ListItemText>}
</ListItemButton>
) : collapsed ? (
<ListItemButton
key={item.name}
sx={{
gap: theme.gap.medium,
borderRadius: `${theme.shape.borderRadius}px`,
justifyContent: collapsed ? "center" : "flex-start",
}}
>
<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
{!collapsed && <ListItemText>{item.name}</ListItemText>}
</ListItemButton>
) : (
<React.Fragment key={item.name}>
@@ -152,6 +206,7 @@ function Sidebar() {
sx={{
gap: theme.gap.medium,
borderRadius: `${theme.shape.borderRadius}px`,
justifyContent: collapsed ? "center" : "flex-start",
}}
>
<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
@@ -210,11 +265,16 @@ function Sidebar() {
<ListSubheader
component="div"
id="nested-other-subheader"
sx={{ pt: theme.gap.small }}
sx={{
pt: theme.gap.small,
px: collapsed ? theme.gap.xs : theme.gap.ml,
textAlign: collapsed ? "center" : "left",
}}
>
Other
</ListSubheader>
}
sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
>
{other.map((item) => (
<ListItemButton
@@ -234,16 +294,20 @@ function Sidebar() {
sx={{
gap: theme.gap.medium,
borderRadius: `${theme.shape.borderRadius}px`,
justifyContent: collapsed ? "center" : "flex-start",
}}
>
<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
<ListItemText>{item.name}</ListItemText>
{!collapsed && <ListItemText>{item.name}</ListItemText>}
</ListItemButton>
))}
</List>
<Divider sx={{ mt: "auto" }} />
<Stack
direction="row"
height="50px"
justifyContent={collapsed ? "center" : "flex-start"}
alignItems="center"
py={theme.gap.small}
px={theme.gap.medium}
@@ -251,22 +315,26 @@ function Sidebar() {
borderRadius={`${theme.shape.borderRadius}px`}
>
<Avatar small={true} />
<Box ml={theme.gap.xs}>
<Typography component="span" fontWeight={500}>
{authState.user?.firstName} {authState.user?.lastName}
</Typography>
<Typography sx={{ textTransform: "capitalize" }}>
{authState.user?.role}
</Typography>
</Box>
<Tooltip title="Log Out">
<IconButton
sx={{ ml: "auto", "&:focus": { outline: "none" } }}
onClick={logout}
>
<LogoutSvg style={{ width: "20px", height: "20px" }} />
</IconButton>
</Tooltip>
{!collapsed && (
<>
<Box ml={theme.gap.xs}>
<Typography component="span" fontWeight={500}>
{authState.user?.firstName} {authState.user?.lastName}
</Typography>
<Typography sx={{ textTransform: "capitalize" }}>
{authState.user?.role}
</Typography>
</Box>
<Tooltip title="Log Out">
<IconButton
sx={{ ml: "auto", "&:focus": { outline: "none" } }}
onClick={logout}
>
<LogoutSvg style={{ width: "20px", height: "20px" }} />
</IconButton>
</Tooltip>
</>
)}
</Stack>
</Stack>
);

5
Client/src/Layouts/HomeLayout/index.css
View File

@@ -19,7 +19,6 @@
height: calc(100vh - var(--env-var-spacing-2) * 2);
max-width: var(--env-var-side-bar-width);
flex: 1;
border: 1px solid var(--color-border-0);
border-radius: var(--env-var-radius-1);
@@ -27,10 +26,6 @@
padding: var(--env-var-spacing-1) 0;
}
.home-layout aside > *:not(:first-child) {
padding-left: var(--env-var-spacing-1-plus);
padding-right: var(--env-var-spacing-1-plus);
}
.home-layout > div {
min-height: calc(100vh - var(--env-var-spacing-2) * 2);

2
Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
View File

@@ -2,7 +2,7 @@ import { Box, Stack, Typography } from "@mui/material";
import "./index.css";
import React, { useState } from "react";
import Button from "../../../Components/Button";
import Back from "../../../assets/icons/left-arrow.svg?react";
import Back from "../../../assets/icons/left-arrow-long.svg?react";
import Select from "../../../Components/Inputs/Select";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

3
Client/src/assets/icons/left-arrow-long.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 223 B

4
Client/src/assets/icons/left-arrow.svg
View File

@@ -1,3 +1,3 @@
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18L9 12L15 6" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 223 B

After

Width:  |  Height:  |  Size: 215 B