employee-fr/app/layouts/components/vertical/AppBarContent.tsx
rizal.productzilla 0e91646c75 first commit
2024-04-16 16:48:48 +07:00

46 lines
1.4 KiB
TypeScript

// ** MUI Imports
import Box from '@mui/material/Box'
import IconButton from '@mui/material/IconButton'
// ** Icon Imports
import Icon from '../../../../src/@core/components/icon'
// ** Type Import
import { Settings } from '../../../../src/@core/context/settingsContext'
// ** Components
import ModeToggler from '../../../../src/@core/layouts/components/shared-components/ModeToggler'
import UserDropdown from '../../../../src/@core/layouts/components/shared-components/UserDropdown'
interface Props {
hidden: boolean
settings: Settings
toggleNavVisibility: () => void
saveSettings: (values: Settings) => void
}
const AppBarContent = (props: Props) => {
// ** Props
const { hidden, settings, saveSettings, toggleNavVisibility } = props
return (
<Box sx={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Box className='actions-left' sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
{hidden ? (
<IconButton color='inherit' sx={{ ml: -2.75 }} onClick={toggleNavVisibility}>
<Icon fontSize='1.5rem' icon='tabler:menu-2' />
</IconButton>
) : null}
<ModeToggler settings={settings} saveSettings={saveSettings} />
</Box>
<Box className='actions-right' sx={{ display: 'flex', alignItems: 'center' }}>
<UserDropdown settings={settings} />
</Box>
</Box>
)
}
export default AppBarContent