how to add footer to material ui drawer component?

Question

My material UI drawer component is as the below, that is consist of the List component, now I want to add Footer to the drawer component like the image. how can I do this?

my drawer code is :

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;

and this is the image of that:

How should I stick the footer section to the bottom of the drawer? I set the bottom to zero for the ListItem of the footer in its CSS code but doesn't work properly!:( and when I change the position of footer item into fixed, the width of the footer is not fit to the drawer. like this image:

Answer 1

There is a simple solution to this. Instead of using a list item to create the footer just use a simple div & give it a class that makes it go to the bottom of your drawer.

Your current code:

<ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory, classes.drawerFooter)}>
    Footer
</ListItem>

Instead use:

<div className={classes.bottomPush}>
    <Typography>Footer</Typography>
</div>

For the class use:

bottomPush: {
    position: "fixed",
    bottom: 0,
    textAlign: "center",
    paddingBottom: 10,
}

Answer 2

You can do this using a single line of CSS, without <Box> or <Grid>.

1. Separate your footer into a separate list. It probably is one at a semantic/conceptual level anyway.
2. Set margin-top: "auto"

Note: I inlined the CSS for simplicity's sake but, in a real application, you'll likely want to pull that into a class.

<Drawer variant="permanent">
  <List>
    <ListItem button>
      <ListItemText>1</ListItemText>
    </ListItem>
    <ListItem button>
      <ListItemText>2</ListItemText>
    </ListItem>
  </List>

  <List style={{ marginTop: `auto` }} >
    <ListItem>
      <ListItemText>Footer</ListItemText>
    </ListItem>
  </List>
</Drawer>