[Bug] Right side menu does not auto expand

[davidmhleung]

Version

1.9.0

Reproduction link

https://demos.creative-tim.com/material-dashboard-pro-react/#/admin/dashboard

Operating System

OSX Catalina

Device

16 inch macbook pro

Browser & Version

Chrome Version 83.0.4103.97 (Official Build) (64-bit)

Steps to reproduce

1. Go to https://demos.creative-tim.com/material-dashboard-pro-react/#/admin/dashboard
2. Click on the vertical 3 dot button to get the mini variant drawer
3. Shrink the window down to a small tablet size viewport so that the left hand drawer disappears and is replaced with the right hand side hamburger menu
4. Click on the hamburger menu to show the right hand mini drawer.
5. The mini draw shows some cut off text.

What is expected?

Right hand mini drawer should function the same as the right hand side mini drawer. On hover it should expose the expanded drawer.

What is actually happening?

Currently it shows an in between of a mini drawer and the full size drawer

---

Solution

Fix the behavior so that both the left and right draw behave the same.

Additional comments

I have screenshots if that is helpful but didn't see a place where I could upload them. Happy to provide by email if needed. Thanks!!!

[davidmhleung]

[einazare]

Hello there, @davidmhleung ,

Thank you for your interest in working with our products and for noticing this issue.
To solve it, please go inside src/assets/jss/material-dashboard-pro-react/components/sidebarStyle.js and change the following bits of codes as follows:
1.Change

  drawerPaperMini: {
    width: drawerMiniWidth + "px!important"
  },

To

  drawerPaperMini: {
    [theme.breakpoints.up("md")]: {
      width: drawerMiniWidth + "px!important"
    }
  },

2.Change

  logoNormalSidebarMini: {
    opacity: "0",
    transform: "translate3d(-25px, 0, 0)"
  },

To

  logoNormalSidebarMini: {
    [theme.breakpoints.up("md")]: {
      opacity: "0",
      transform: "translate3d(-25px, 0, 0)"
    }
  },

3. Change

  logoNormalSidebarMiniRTL: {
    transform: "translate3d(25px, 0, 0)"
  },

To

  logoNormalSidebarMiniRTL: {
    [theme.breakpoints.up("md")]: {
      transform: "translate3d(25px, 0, 0)"
    }
  },

4. Change

  itemTextMini: {
    transform: "translate3d(-25px, 0, 0)",
    opacity: "0"
  },

To

  itemTextMini: {
    [theme.breakpoints.up("md")]: {
      transform: "translate3d(-25px, 0, 0)",
      opacity: "0"
    }
  },

5. Change

  itemTextMiniRTL: {
    transform: "translate3d(25px, 0, 0) !important"
  },

To

  itemTextMiniRTL: {
    [theme.breakpoints.up("md")]: {
      transform: "translate3d(25px, 0, 0) !important"
    }
  },

6. Change

  collapseItemTextMiniRTL: {
    transform: "translate3d(25px, 0, 0) !important"
  },

To

  collapseItemTextMiniRTL: {
    [theme.breakpoints.up("md")]: {
      transform: "translate3d(25px, 0, 0) !important"
    }
  },

7.Change

  collapseItemTextMini: {
    transform: "translate3d(-25px, 0, 0)",
    opacity: "0"
  },

To

  collapseItemTextMini: {
    [theme.breakpoints.up("md")]: {
      transform: "translate3d(-25px, 0, 0)",
      opacity: "0"
    }
  },

This will do the trick. We will make an update to this product in about 2-3 months and we'll add these changes in that update as well.

Please leave the issue open.

Best,
Manu

[davidmhleung]

Thank you @einazare !!!

[davidmhleung]

Worked like a charm.