DesignRevision/shards-dashboard-pro

Sidebar nav title should be visible on mobile by default | Icon sidebar layout

Closed this issue · 1 comments

Terminology

"nav title" = element with class "main-sidebar__nav-title"

Expected Behavior

When you use icon sidebar layout on mobile, you should see sidebar nav titles without having to click (hover) on the sidebar.

Current Behavior

When you open sidebar menu on mobile device, by default, nav titles have white color, you need to click somewhere to show nav titles.

Steps to Reproduce

  • go to demo page - icon sidebar
  • change browser window width to <= 767 px
  • open sidebar menu by clicking "hamburger" button
  • check if nav titles are visible
  • click somewhere to trigger :hover effect

Context (Environment)

Tested on real iPhone 6s

Provisional personal fix

I have added these styles

.icon-sidebar-nav .main-sidebar__nav-title {
    color: #9ea8b9;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .icon-sidebar-nav .main-sidebar__nav-title {
        color: #fff;
    }
}
hisk commented

✅This issue has been fixed in 1.3.0.