title: how to add footer to material ui drawer component?
body: <p>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?</p>
  
  <p>my drawer code is :</p>
  
  <pre><code>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 =&gt; ({
      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',
          '&amp;:hover,&amp;: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),
          '&amp;: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,
              '&amp;: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: &lt;PeopleIcon /&gt;, active: true },
              { id: 'مغایرات', icon: &lt;DnsRoundedIcon /&gt; },
              { id: 'تخلفات', icon: &lt;PermMediaOutlinedIcon /&gt; },
              { id: 'اطلاعات بازدید', icon: &lt;PublicIcon /&gt; },
              { id: 'چک لیست عمومی', icon: &lt;SettingsEthernetIcon /&gt; },
              { id: 'لیست خدمات', icon: &lt;SettingsInputComponentIcon /&gt; },
          ],
      },
      {
          id: 'ابزارها',
          children: [
              { id: 'مسیریابی تا دفتر', icon: &lt;SettingsIcon /&gt; },
              { id: 'دفاتر پیشخوان اطراف', icon: &lt;TimerIcon /&gt; },
              { id: 'پراکندگی دفاتر در منطقه', icon: &lt;PhonelinkSetupIcon /&gt; },
          ],
      },
  ];
  
  const Sidebar = (props) =&gt; {
      const classes = useStyles()
  
      const drawer = (
          &lt;div&gt;
              &lt;List disablePadding &gt;
                  &lt;ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory)}&gt;
                      پست و پیشخوان
                  &lt;/ListItem&gt;
                  &lt;ListItem className={clsx(classes.item, classes.itemCategory)}&gt;
                      &lt;ListItemIcon className={classes.itemIcon}&gt;
                          &lt;HomeIcon /&gt;
                      &lt;/ListItemIcon&gt;
                      &lt;ListItemText
                          classes={{
                              primary: classes.itemPrimary,
                          }}
                      &gt;
                          &lt;div className={classes.search}&gt;
                              &lt;div className={classes.searchIcon}&gt;
                                  &lt;SearchIcon /&gt;
                              &lt;/div&gt;
                              &lt;InputBase
                                  placeholder="کد دفتر..."
                                  classes={{
                                      root: classes.inputRoot,
                                      input: classes.inputInput,
                                  }}
                                  inputProps={{ 'aria-label': 'search' }}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/ListItemText&gt;
                  &lt;/ListItem&gt;
                  {categories.map(({ id, children }) =&gt; (
                      &lt;React.Fragment key={id}&gt;
                          &lt;ListItem className={classes.categoryHeader}&gt;
                              &lt;ListItemText
                                  classes={{
                                      primary: classes.categoryHeaderPrimary,
                                  }}
                              &gt;
                                  {id}
                              &lt;/ListItemText&gt;
                          &lt;/ListItem&gt;
                          {children.map(({ id: childId, icon, active }) =&gt; (
                              &lt;ListItem
                                  key={childId}
                                  button
                                  className={clsx(classes.item, active &amp;&amp; classes.itemActiveItem)}
                              &gt;
                                  &lt;ListItemIcon className={classes.itemIcon}&gt;{icon}&lt;/ListItemIcon&gt;
                                  &lt;ListItemText
                                      classes={{
                                          primary: classes.itemPrimary,
                                      }}
                                  &gt;
                                      {childId}
                                  &lt;/ListItemText&gt;
                              &lt;/ListItem&gt;
                          ))}
  
                          &lt;Divider className={classes.divider} /&gt;
                      &lt;/React.Fragment&gt;
                  ))}
              &lt;/List&gt;
              &lt;ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory, classes.drawerFooter)}&gt;
                  Footer
              &lt;/ListItem&gt;
          &lt;/div&gt;
      )
  
      return (
          &lt;Wrapper&gt;
              &lt;Drawer
                  className={classes.root}
                  variant="permanent"
                  anchor="right"
              &gt;{drawer}&lt;/Drawer&gt;
          &lt;/Wrapper&gt;
      );
  }
  
  export default Sidebar;
  </code></pre>
  
  <p>and this is the image of that:</p>
  
  <p><a href="https://i.stack.imgur.com/f7Mvi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/f7Mvi.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/pK28N.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pK28N.png" alt="enter image description here"></a></p>