Skip to content

Commit

Permalink
update sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhiyu
zhiyu committed Dec 21, 2024
1 parent 30ed963 commit 64854f5
Show file tree
Hide file tree
Showing 7 changed files with 145 additions and 50 deletions.
5 changes: 2 additions & 3 deletions packages/ui/src/layout/MainLayout/Header/ProfileSection/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,6 @@ const ProfileSection = ({ username, handleLogout }) => {
<>
<ButtonBase ref={anchorRef} sx={{ borderRadius: '8px', overflow: 'hidden' }}>
<Avatar
variant='rounded'
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
Expand Down Expand Up @@ -351,14 +350,14 @@ const ProfileSection = ({ username, handleLogout }) => {
{
name: 'offset',
options: {
offset: [0, 0]
offset: [0, 10]
}
}
]
}}
>
{({ TransitionProps }) => (
<Transitions in={open} {...TransitionProps} position='top-right' type='grow'>
<Transitions in={open} {...TransitionProps} position='bottom-left' type='grow'>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/layout/MainLayout/Header/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const Header = ({ handleLeftDrawerToggle, drawerOpen }) => {
borderBottom: '1px solid',
borderColor: 'rgba(0, 0, 0, 0.06)'
}}
className='flex items-center p-2 px-4'
className='flex items-center p-2 px-4 justify-center'
>
<ButtonBase sx={{ borderRadius: '8px', overflow: 'hidden' }}>
<Avatar
Expand Down Expand Up @@ -118,7 +118,7 @@ const Header = ({ handleLeftDrawerToggle, drawerOpen }) => {
<Typography>{localStorage.getItem('username') ?? ''}</Typography>
</Box>
<Box sx={{ ml: 2 }}></Box>
<ProfileSection handleLogout={signOutClicked} username={localStorage.getItem('username') ?? ''} />
{/* <ProfileSection handleLogout={signOutClicked} username={localStorage.getItem('username') ?? ''} /> */}
</Box>
)
}
Expand Down
99 changes: 96 additions & 3 deletions packages/ui/src/layout/MainLayout/Sidebar/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,65 @@ import PropTypes from 'prop-types'
// material-ui
import { useTheme } from '@mui/material/styles'
import { Box, Drawer, useMediaQuery } from '@mui/material'
import { useSelector, useDispatch } from 'react-redux'
import { useState } from 'react'
import { Avatar, ButtonBase, IconButton, Typography } from '@mui/material'
import { styled } from '@mui/material/styles'

// third-party
import PerfectScrollbar from 'react-perfect-scrollbar'
import { BrowserView, MobileView } from 'react-device-detect'

import ProfileSection from '../Header/ProfileSection'

// project imports
import MenuList from './MenuList'
import LogoSection from '../LogoSection'
import { drawerWidth, headerHeight } from '@/store/constant'

// assets
import { PiSidebarSimpleDuotone, PiSidebarSimple, PiMoon, PiSun } from 'react-icons/pi'

import { SET_DARKMODE } from '@/store/actions'

const ModeButton = styled(IconButton)(({ theme }) => ({
width: 32,
height: 32
}))

const signOutClicked = () => {
location.href = '/api/v1/user/logout'
}

// ==============================|| SIDEBAR DRAWER ||============================== //

const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
const theme = useTheme()
const customization = useSelector((state) => state.customization)
const matchUpMd = useMediaQuery(theme.breakpoints.up('md'))

const [isDark, setIsDark] = useState(customization.isDarkMode)
const dispatch = useDispatch()

const changeDarkMode = () => {
dispatch({ type: SET_DARKMODE, isDarkMode: !isDark })
setIsDark((isDark) => !isDark)
localStorage.setItem('isDarkMode', !isDark)
localStorage.setItem('theme', isDark ? 'light' : 'dark')
}

const drawer = (
<>
<Box
className='fixed pt-1 px-5 z-10'
className='fixed pt-3 px-5 z-10'
sx={{
height: headerHeight,
width: drawerWidth
}}
>
<LogoSection />
</Box>
<Box className='pt-10'>
<Box className='pt-14'>
<BrowserView>
<PerfectScrollbar component='div' className='h-full'>
<MenuList drawerOpen={drawerOpen} />
Expand All @@ -42,6 +73,67 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
</Box>
</MobileView>
</Box>
<Box
className='fixed bottom-0 flex items-center justify-between px-4'
sx={{
height: headerHeight,
width: drawerWidth - 1,
backgroundColor: isDark ? 'transparent' : theme.palette.common.white
}}
>
<ProfileSection handleLogout={signOutClicked} username={localStorage.getItem('username') ?? ''} />
<Box>
{isDark ? (
<ModeButton
sx={{
borderRadius: '8px',
color: theme.palette.primary.main,
'&:hover': {
background: theme.palette.primary.main,
color: theme.palette.primary.light
}
}}
onClick={changeDarkMode}
>
<PiSun />
</ModeButton>
) : (
<ModeButton
sx={{
borderRadius: '8px',
'&:hover': {
background: theme.palette.primary.main,
color: theme.palette.primary.light
}
}}
onClick={changeDarkMode}
>
<PiMoon />
</ModeButton>
)}
</Box>
<ButtonBase sx={{ borderRadius: '8px', overflow: 'hidden' }}>
<Avatar
variant='rounded'
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
transition: 'all .2s ease-in-out',
background: 'none',
color: theme.palette.text.primary,
'&:hover': {
background: theme.palette.primary.main,
color: theme.palette.primary.light
}
}}
onClick={drawerToggle}
color='inherit'
>
{drawerOpen && <PiSidebarSimpleDuotone size='1.2rem' />}
{!drawerOpen && <PiSidebarSimple size='1.2rem' />}
</Avatar>
</ButtonBase>
</Box>
</>
)

Expand Down Expand Up @@ -71,7 +163,8 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
// top: `${headerHeight + 1}px`
// },
borderRight: drawerOpen ? '1px solid' : 'none',
borderColor: drawerOpen ? 'rgba(0, 0, 0, 0.06)' : 'transparent'
borderColor: drawerOpen ? 'rgba(0, 0, 0, 0.06)' : 'transparent',
paddingBottom: `${headerHeight + 1}px`
}
}}
ModalProps={{ keepMounted: true }}
Expand Down
60 changes: 31 additions & 29 deletions packages/ui/src/layout/MainLayout/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@ import { Outlet } from 'react-router-dom'

// material-ui
import { styled, useTheme } from '@mui/material/styles'
import { AppBar, Box, CssBaseline, Toolbar, useMediaQuery } from '@mui/material'
import { AppBar, Box, CssBaseline, Avatar, ButtonBase, Toolbar, useMediaQuery } from '@mui/material'

// project imports
import Header from './Header'
import Sidebar from './Sidebar'
import { drawerWidth, headerHeight } from '@/store/constant'
import { SET_MENU } from '@/store/actions'

// assets
import { PiSidebarSimpleDuotone, PiSidebarSimple, PiMoon, PiSun } from 'react-icons/pi'

// styles
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
...theme.typography.mainContent,
Expand All @@ -37,38 +40,17 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
})
}))

const HeaderWrapper = styled('HeaderWrapper', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
position: 'fixed',
width: `calc(100%)`,
left: drawerWidth,
...(!open && {
transition: theme.transitions.create('all', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
left: '0px'
}),
...(open && {
transition: theme.transitions.create('all', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen
}),
left: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`
})
}))

// ==============================|| MAIN LAYOUT ||============================== //

const MainLayout = () => {
const theme = useTheme()
const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'))

// Handle left drawer
const leftDrawerOpened = useSelector((state) => state.customization.opened)
const drawerOpen = useSelector((state) => state.customization.opened)
const dispatch = useDispatch()
const handleLeftDrawerToggle = () => {
dispatch({ type: SET_MENU, opened: !leftDrawerOpened })
dispatch({ type: SET_MENU, opened: !drawerOpen })
}

useEffect(() => {
Expand All @@ -87,14 +69,34 @@ const MainLayout = () => {
>
<CssBaseline />
{/* drawer */}
<Sidebar drawerOpen={leftDrawerOpened} drawerToggle={handleLeftDrawerToggle} />
<Sidebar drawerOpen={drawerOpen} drawerToggle={handleLeftDrawerToggle} />
{/* main content */}
<Main theme={theme} open={leftDrawerOpened} className='relative'>
<Main theme={theme} open={drawerOpen} className='relative'>
<Outlet />
{!drawerOpen && (
<ButtonBase sx={{ borderRadius: '8px', overflow: 'hidden' }} className='fixed bottom-2 left-4'>
<Avatar
variant='rounded'
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
transition: 'all .2s ease-in-out',
background: theme.palette.primary.light,
color: theme.palette.primary.main,
'&:hover': {
background: theme.palette.primary.main,
color: theme.palette.primary.light
}
}}
onClick={handleLeftDrawerToggle}
color='inherit'
>
{drawerOpen && <PiSidebarSimpleDuotone size='1.2rem' />}
{!drawerOpen && <PiSidebarSimple size='1.2rem' />}
</Avatar>
</ButtonBase>
)}
</Main>
<HeaderWrapper open={leftDrawerOpened}>
<Header handleLeftDrawerToggle={handleLeftDrawerToggle} drawerOpen={leftDrawerOpened} />
</HeaderWrapper>
</Box>
)
}
Expand Down
21 changes: 11 additions & 10 deletions packages/ui/src/menu-items/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,26 @@ const dashboard = [
},
{
id: 'tools',
title: '工具箱',
title: '工具',
type: 'item',
url: '/tools',
icon: PiHammer,
breadcrumbs: true
},

{
id: 'variables',
title: '全局变量',
type: 'item',
url: '/variables',
icon: PiCode,
breadcrumbs: true
}
]
},
{
id: 'settings',
title: '设置',
title: '访问控制',
type: 'group',
children: [
{
Expand All @@ -90,14 +99,6 @@ const dashboard = [
icon: PiFingerprintSimple,
breadcrumbs: true
},
{
id: 'variables',
title: '全局变量',
type: 'item',
url: '/variables',
icon: PiCode,
breadcrumbs: true
},
{
id: 'apikey',
title: 'API Keys',
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/themes/typography.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,10 @@ export default function themeTypography(theme) {
position: 'relative',
backgroundColor: theme.customization.isDarkMode ? theme.colors.darkBackground : 'rgb(247,247,247)',
width: '100%',
minHeight: 'calc(100vh - 0px)',
height: 'calc(100vh - 0px)',
flexGrow: 1,
padding: '10px 20px',
paddingTop: '55px',
paddingTop: '10px',
borderTopRightRadius: '0px !important',
borderBottomLeftRadius: '0px !important',
borderBottomRightRadius: '0px !important'
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/views/tools/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ const Tools = () => {
<ErrorBoundary error={error} />
) : (
<Stack flexDirection='column' sx={{ gap: 3 }}>
<ViewHeader title='工具箱'>
<ViewHeader title='工具'>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Button variant='contained' onClick={() => inputRef.current.click()} startIcon={<PiUpload size='0.8em' />}>
导入
Expand Down

0 comments on commit 64854f5

Please sign in to comment.