[Bug] Authentication Pages Mobile Menu Stying Broken

Version

TS 1.0.0

Reproduction link

https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/?_ga=2.221362719.601926493.1651778264-2043665418.1651072672#/authentication/sign-in/basic

Operating System

Windows & IOS

Device

Desktop & iPhone

Browser & Version

Latest Firefox & Chrome: Latest Safari/Firefox

Steps to reproduce

On desktop adjust window to smaller window width or using a mobile device.

What is expected?

Top Menu collapse, should see "Menu" icon to click. When icon clicked, menu should be displayed styled and visable

What is actually happening?

"Menu" icon is not visible. There is a clickable area for it though, when clicked it displays the menu but am unable to read/view the menu as styling isn't being properly applied.

Solution

Missing wrapping/extra MDBox in return of DefaultNavbar/index.tsx (mimic from Material Dash 2 React)

remove display="flex" attribute from the first <MDBox> under <Container>

After the previously mentioned <MDBox> wrap all the child content with <MDBox> and the following properties <MDBox display="flex" justifyContent="space-between" alignItems="center">

Update the content for the last <MDBox> that has the onClick={openMobileNavbar}: First cut the existing content for later use and change out to <Icon>{mobileNavbar ? "close" : "menu"}</Icon>

Add after the newly added <MDBox> wrapper but within the original the following:

<MDBox
      bgColor={transparent ? "white" : "transparent"}
      shadow={transparent ? "lg" : "none"}
      borderRadius="md"
      px={transparent ? 2 : 0}
>
      {mobileView && <DefaultNavbarMobile routes={routes} open={mobileNavbar} />}
</MDBox>

creativetimofficial / ct-material-dashboard-pro-react