Мой компонент выдвижного ящика для материала, как показано ниже, состоит из компонента List, теперь я хочу добавить нижний колонтитул к компоненту выдвижного ящика, как изображение. как я могу это сделать?
мой код ящика:
import React from 'react';
import { makeStyles, fade } from '@material-ui/core/styles';
import { Drawer, List, ListItem, ListItemIcon, ListItemText, Divider, InputBase, Paper } from '@material-ui/core';
import {
Home as HomeIcon, People as PeopleIcon, DnsRounded as DnsRoundedIcon,
PhotoSizeSelectActual as PermMediaOutlinedIcon, Public as PublicIcon, ExitToApp,
SettingsEthernet as SettingsEthernetIcon, SettingsInputComponent as SettingsInputComponentIcon,
Timer as TimerIcon, Settings as SettingsIcon, PhonelinkSetup as PhonelinkSetupIcon, Search as SearchIcon
} from '@material-ui/icons';
import clsx from 'clsx';
import Wrapper from '../../../HOC/Wrapper/Wrapper';
const sidebarWidth = 50
const useStyles = makeStyles(theme => ({
root: {
maxWidth: sidebarWidth
},
categoryHeader: {
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
textAlign: 'right'
},
categoryHeaderPrimary: {
color: theme.palette.common.white,
},
item: {
paddingTop: 1,
paddingBottom: 1,
color: 'rgba(255, 255, 255, 0.7) !important',
'&:hover,&:focus': {
backgroundColor: 'rgba(255, 255, 255, 0.08)',
},
textAlign: 'right'
},
itemCategory: {
backgroundColor: '#232f3e',
boxShadow: '0 -1px 0 #404854 inset',
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
},
firebase: {
fontSize: 24,
color: theme.palette.common.white,
justifyContent: 'center'
},
itemActiveItem: {
color: '#4fc3f7',
},
itemPrimary: {
fontSize: 'inherit',
},
itemIcon: {
minWidth: 'auto',
marginRight: theme.spacing(2),
},
divider: {
marginTop: theme.spacing(2),
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
display: 'flex',
justifyContent: 'flex-end',
},
searchIcon: {
width: theme.spacing(7),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 120,
},
},
},
drawerFooter: {
// display: 'flex',
// flexGrow:1,
// width: '',
position: 'relative',
top: 'auto',
bottom: 0,
// backgroundColor: '#fff !important',
// paddingTop: '0.5rem',
boxSizing: 'border-box'
},
}))
const categories = [
{
id: 'بازدید',
children: [
{ id: 'مکاتبات', icon: <PeopleIcon />, active: true },
{ id: 'مغایرات', icon: <DnsRoundedIcon /> },
{ id: 'تخلفات', icon: <PermMediaOutlinedIcon /> },
{ id: 'اطلاعات بازدید', icon: <PublicIcon /> },
{ id: 'چک لیست عمومی', icon: <SettingsEthernetIcon /> },
{ id: 'لیست خدمات', icon: <SettingsInputComponentIcon /> },
],
},
{
id: 'ابزارها',
children: [
{ id: 'مسیریابی تا دفتر', icon: <SettingsIcon /> },
{ id: 'دفاتر پیشخوان اطراف', icon: <TimerIcon /> },
{ id: 'پراکندگی دفاتر در منطقه', icon: <PhonelinkSetupIcon /> },
],
},
];
const Sidebar = (props) => {
const classes = useStyles()
const drawer = (
<div>
<List disablePadding >
<ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory)}>
پست و پیشخوان
</ListItem>
<ListItem className={clsx(classes.item, classes.itemCategory)}>
<ListItemIcon className={classes.itemIcon}>
<HomeIcon />
</ListItemIcon>
<ListItemText
classes={{
primary: classes.itemPrimary,
}}
>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="کد دفتر..."
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'search' }}
/>
</div>
</ListItemText>
</ListItem>
{categories.map(({ id, children }) => (
<React.Fragment key={id}>
<ListItem className={classes.categoryHeader}>
<ListItemText
classes={{
primary: classes.categoryHeaderPrimary,
}}
>
{id}
</ListItemText>
</ListItem>
{children.map(({ id: childId, icon, active }) => (
<ListItem
key={childId}
button
className={clsx(classes.item, active && classes.itemActiveItem)}
>
<ListItemIcon className={classes.itemIcon}>{icon}</ListItemIcon>
<ListItemText
classes={{
primary: classes.itemPrimary,
}}
>
{childId}
</ListItemText>
</ListItem>
))}
<Divider className={classes.divider} />
</React.Fragment>
))}
</List>
<ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory, classes.drawerFooter)}>
Footer
</ListItem>
</div>
)
return (
<Wrapper>
<Drawer
className={classes.root}
variant="permanent"
anchor="right"
>{drawer}</Drawer>
</Wrapper>
);
}
export default Sidebar;
, и это изображение этого:
Как прикрепить нижний колонтитул к нижней части ящика? Я установил нижний предел для элемента ListItem нижнего колонтитула в его CSS-коде, но он не работает должным образом! :( и когда я меняю положение элемента нижнего колонтитула на фиксированное, ширина нижнего колонтитула не подходит для ящика. это изображение:
