Icons only in side bar

Dashboard
1

Hi.

It is possible to hide tab names in side bar, and show only tab icon with narrow side bar?

2

no - not at present. Happy to consider a PR to do so. But would need some discussion as I've not even thought about how it could be managed/controlled/implemented.

3

I think it may be done in two way:

  1. checkbox below field tab name called "hide name in side bar" and after checked only icon from this tab will show up
  2. easier way I think, in site options where are all dropdowns like "always show side menu" just add another dropdown menu with options like "show tab icons only" and "show icons and tab names"

Next, when menu is generated, just skip printing names and made menu thiner.

This is useful mod when running dashboard on small screen like 7" rpi screen.

4

Surely it mostly makes sense when the sidebar is always shown ? So could just be a 3rd option in that dropdown ?

5

Yes, but i should be option to hide menu, so it should be separated option. Maybe something like this:

and finally make this:

Lz7dBrr.jpg1266Ă—648 109 KB

1 Like
6

Yes - though if they are in autohiding mode what is the harm in showing the labels ?

7

autohiding mode? You mean click to show menu? But when menu is always on, labels can take almost 1/4 of screen space, so it would be nice to show only icons.

LRBeLcL.jpg4160Ă—2340 2.3 MB

8

Yes - so three options...
Click to show - (icons and names)
Always show (icons and names)
Always show (icons only)

9

yes :slight_smile:

1 Like
10

Hello! Was this option ever made?

11

If you can't see it in the options then sadly no.
(Happy to consider a pull request that adds it if anyone wants to)
or I may get a chance to have a look later.

12

How to customize dashboard CSS đź–Ś Customize dashboard CSS

To have only icons in side bar (and shrink the size down)

<style>
    md-list-item  p {
        display:none !important;
    }
    md-sidenav > md-list > md-list-item{
        width:88px !important;
    }
    @media (max-width: 660px){
            md-sidenav, md-sidenav.md-locked-open, md-sidenav.md-closed.md-locked-open-add-active {
            min-width: unset !important;
            width: auto !important;
            max-width: unset !important;
        }
    }
    @media (min-width: 661px){
        md-sidenav, md-sidenav.md-locked-open, md-sidenav.md-closed.md-locked-open-add-active {
            min-width: unset !important;
            width: auto;
            max-width: unset !important;
        }
    }
    md-list-item._md-button-wrap > div.md-button:first-child {
       padding: 0 16px;
    }
</style>
2 Likes
13

Also now an option in menu - update pushed to master. Not yet on npm - will be in next release.

4 Likes