search

creativetimofficial / ct-impact-design-system-pro

Impact Design System PRO
https://demos.creative-tim.com/impact-design-system-pro/
3 stars 2 forks source link

[Bug] Dashboard sidebar content not masked at XL breakpoint #8

Open smaddock opened 4 years ago

smaddock commented 4 years ago

Version

1.1.0

Reproduction link

https://demos.creative-tim.com/impact-design-system-pro/dashboard/pages/maps/vector.html

Operating System

macOS 10.15.4

Device

Mac

Browser & Version

Chrome 84

Steps to reproduce

  1. Open a dashboard page with minimal content, suct as the vector maps demo.
  2. Set the window width to exactly 1,200px
  3. Set the window height high enough that the scroll bar disappears.
  4. Reload the page.

    What is expected?

    Since the window is at the XL breakpoint, the page loads with the sidebar expanded.

    What is actually happening?

    At this exact pixel width, the sidebar loads visible but collapsed into the narrow view.

Additionally, when the content length does not exceed the viewport (no scrollbar needed), the edges of the sidebar menu items' text is visible.

Solution

Fix the JS trigger so the g-sidenav-hidden class is added to the body on short pages

OR

Fix the breakpoint for the sidebar so the g-sidenav-show and g-sidenav-pinned classes are added to the body at 1200px as they are > 1201px

Additional comments

I'm guessing the sidebar-state cookie could create additional conditions for this bug, but I haven't tested that.

zoltanszogyenyi commented 4 years ago

Hey @smaddock,

Thanks for the ticket. This will be addressed in the next update!