[Bug] Text alignment bug in dashboard menu at reduced screen sizes

[kasterbrandon]

Version

1.1.0

Operating System

Windows 10 Pro & Mac OS

Device

PC & Mac

Browser & Version

Chrome & Safari

Steps to reproduce

1. Download version 1.1.0 of the NextJS Material Dashboard Pro
2. run 'npm install'
3. run 'npm run dev'
4. In your browser, navigate to 'http://localhost:3000/admin/dashboard'
5. In your browser, reduce your browser's window size to less than 950 pixels wide.
6. Click on the menu icon and the menu will open from the ride side of the screen.
7. Text alignment bug occurs in displaying the "Dashboard", "Notification", and "Profile", menu items.

   What is expected?

   The alignment of the menu item text to be consistent with the left alignment of other menu items.

   What is actually happening?

   The menu item text is on the far left pixel of the menu's edge.

---

Solution

Additional comments

[einazare]

Hello there, @kasterbrandon ,

Thank you for your interest in working with our products, and for sharing with us this issue. To solve it, please do the following:

• Go inside components/Navbars/AdminNavbarLinks.js and replace all

  className={rtlActive ? classes.buttonLinkRTL : classes.buttonLink}

• With

  className={classes.responsiveJustIcon + " " + (rtlActive ? classes.buttonLinkRTL : classes.buttonLink)}

• Also, still inside the components/Navbars/AdminNavbarLinks.js file, replace all

  <Hidden mdUp implementation="css">

• With

  <Hidden mdUp implementation="js">

• After that, please go inside assets/jss/nextjs-material-dashboard-pro/components/adminNavbarLinksStyle.js
• And at the end of the file, please add the following code:

  responsiveJustIcon: {
    width: "calc(100% - 24px)!important",
    marginLeft: "12px!important",
    marginRight: "12px!important",
    justifyContent: "start"
  },
  }

• Still inside the assets/jss/nextjs-material-dashboard-pro/components/adminNavbarLinksStyle.js file, inside the linkText object, please replace the following:

  margin: "0!important",

• With

  margin: "0 0 0 1rem!important",

  Also, please leave the issue open.

Best, Manu

[kasterbrandon]

Hi Manu,

Thanks again for your help. Unfortunately, the changes you suggest results in collateral damage in the midsized viewport. Specifically, when reducing your browser window size to less than 1280 px causes the menu items to remain on the screen in poorly placed locations.

[einazare]

Hello there, @kasterbrandon ,

Please change [theme.breakpoints.down("md")]: { with [theme.breakpoints.down("sm")]: {. That will do the trick.

Best, Manu

[kasterbrandon]

The bug is resolved with the changes you recommended. Thank you Manu!

[sajadevo]

Hi there

We've updated the product to v2 and now it has a totally new and fresh design with a reusable, flexible and scalable base structure and all of the issues are fixed on the new update of the product.

Note: To get the latest updates and supports for the products and other related things to Creative Tim please join our Discord Community.

All the best, Sajad
 React Developer @ Creative-Tim.com