Skip to content
This repository has been archived by the owner on Aug 21, 2024. It is now read-only.

/admin route sidebar improvement #5171

Merged
merged 4 commits into from
Feb 11, 2022
Merged

/admin route sidebar improvement #5171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a680c68
fix side bar
kimenyikevin Feb 11, 2022
fbd6309
fix drawer on sidebar
kimenyikevin Feb 11, 2022
57aa94d
remove console
kimenyikevin Feb 11, 2022
8a31cc2
fix content shifting glitch
zulqarnainhanif Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions packages/client-core/src/user/components/Dashboard/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Avatar from '@mui/material/Avatar'
import CssBaseline from '@mui/material/CssBaseline'
import Drawer from '@mui/material/Drawer'
import IconButton from '@mui/material/IconButton'
import { useTheme } from '@mui/material/styles'
import { styled, useTheme } from '@mui/material/styles'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import clsx from 'clsx'
Expand Down Expand Up @@ -33,14 +33,15 @@ const Dashboard = ({ children }: Props) => {
const admin = authState.user
const isLoggedIn = authState.isLoggedIn.value

const handleDrawerOpen = () => {
setOpen(true)
const handleDrawerOpen = (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
if (
event.type === 'keydown' &&
((event as React.KeyboardEvent).key === 'Tab' || (event as React.KeyboardEvent).key === 'Shift')
) {
return
}
setOpen(open)
}

const handleDrawerClose = () => {
setOpen(false)
}

return (
<div className={classes.root}>
<CssBaseline />
Expand All @@ -50,7 +51,7 @@ const Dashboard = ({ children }: Props) => {
color="inherit"
style={{ color: 'white' }}
aria-label="open drawer"
onClick={handleDrawerOpen}
onClick={handleDrawerOpen(true)}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open
Expand All @@ -73,7 +74,7 @@ const Dashboard = ({ children }: Props) => {
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
variant={open ? 'temporary' : 'permanent'}
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open
Expand All @@ -84,9 +85,11 @@ const Dashboard = ({ children }: Props) => {
[classes.drawerClose]: !open
})
}}
open={open}
onClose={handleDrawerOpen(false)}
>
<div className={classes.toolbar}>
<IconButton onClick={handleDrawerClose} style={{ color: '#fff' }} size="large">
<IconButton onClick={handleDrawerOpen(false)} style={{ color: '#fff' }} size="large">
{theme.direction === 'rtl' ? <ChevronRight /> : <ChevronLeft />}
</IconButton>
</div>
Expand Down
8 changes: 5 additions & 3 deletions packages/client-core/src/user/components/Dashboard/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const drawerWidth = 200
export const useStylesForDashboard = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex'
// display: 'flex'
},
header: {
height: '64px !important'
Expand Down Expand Up @@ -86,10 +86,12 @@ export const useStylesForDashboard = makeStyles((theme: Theme) =>
height: 'calc(100vh - 64px)'
},
contentWidthDrawerOpen: {
width: `calc(100vw - ${drawerWidth}px)`
left: `calc(${theme.spacing(7)} + 1px)`,
width: `calc(100vw - (${theme.spacing(7)} + 1px))`
},
contentWidthDrawerClosed: {
width: `calc(100vw - ${theme.spacing(7) + 1}px)`
left: `calc(${theme.spacing(7)} + 1px)`,
width: `calc(100vw - (${theme.spacing(7)} + 1px))`
},
backdrop: {
zIndex: theme.zIndex.drawer + 1,
Expand Down