Collapse sidebar into small icons

[meteoDaniel]

I would like to know how to manage collapsing sidebar into icon view like this example:

https://www.codeply.com/p/1TlcDLPfiE

This is an example how you can add icons to the collapsable sidebar example given in this project:

sidebar_header = dbc.Row(
    [
        dbc.Col(html.H2("Sidebar", className="display-4")),
        dbc.Col(
            [
                html.Button(
                    # use the Bootstrap navbar-toggler classes to style
                    html.Span(className="navbar-toggler-icon"),
                    className="navbar-toggler",
                    # the navbar-toggler classes don't set color
                    style={
                        "color": "rgba(0,0,0,.5)",
                        "border-color": "rgba(0,0,0,.1)",
                    },
                    id="navbar-toggle",
                ),
                html.Button(
                    # use the Bootstrap navbar-toggler classes to style
                    html.Span(className="navbar-toggler-icon"),
                    className="navbar-toggler",
                    # the navbar-toggler classes don't set color
                    style={
                        "color": "rgba(0,0,0,.5)",
                        "border-color": "rgba(0,0,0,.1)",
                    },
                    id="sidebar-toggle",
                ),
            ],
            # the column containing the toggle will be only as wide as the
            # toggle, resulting in the toggle being right aligned
            width="auto",
            # vertically align the toggle in the center
            align="center",
        ),
    ]
)

sidebar = html.Div(
    [
        sidebar_header,
        # we wrap the horizontal rule and short blurb in a div that can be
        # hidden on a small screen
        html.Div(
            [
                html.Hr(),
                html.P(
                    "A responsive sidebar layout with collapsible navigation "
                    "links.",
                    className="lead",
                ),
            ],
            id="blurb",
        ),
        # use the Collapse component to animate hiding / revealing links
        dbc.Collapse(
            dbc.Nav(
                [
                    dbc.NavLink([html.I(className='fa fa-desktop',
                                            style={'aria-hidden': 'true'},
                                            children=None), f" Overview"], href="/page-1", id="page-1-link"),
                    dbc.NavLink([html.I(className='fa fa-desktop',
                                            style={'aria-hidden': 'true'},
                                            children=None), f"Subpage"], href="/page-2", id="page-2-link"),
                    dbc.NavLink([html.I(className='fa fa-desktop',
                                            style={'aria-hidden': 'true'},
                                            children=None), f"Page 3"], href="/page-3", id="page-3-link"),
                ],
                vertical=True,
                pills=True,
            ),
            id="collapse",
        ),
    ],
    id="sidebar",
)

Add: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css as external stylesheet.

Hopefully somebody has a small snippet. I guess this is something many people asking or searching for because it will rise up a dashboard made by dash with bootstrap components more and more to nice front end development with python.

[tcbegley]

Have you seen this example of a collapsible sidebar? Did you mean specifically how to achieve the small icons?

[meteoDaniel]

@tcbegley yes i mean how to achieve the small icons.

[tcbegley]

I haven't seen it done before, but it should be possible using the linked example as a starting point I think. I'll take a more detailed look at the demo you linked to understand how they do it there.

[meteoDaniel]

I think it should be done with a similar behaviour as the navbar-toggler has, because it moves when collapsing. But unfortunately I was not able to understand how this works.

[meteoDaniel]

I have build a simple working version from scratch. Maybe you can find a way to combine it with bootstrap components:
First is the required css:

ul {
  list-style-type:none;
  padding:0;
}

.page-content {
  width:960px;
  margin:auto;
}

.menu {
  position:fixed;
  top:0;
  bottom:0;
  overflow:hidden;
  transition:0.2s ease-in-out width;
}

.menu:hover {
    width:15%;
}


.icon {
  display:inline-block;
  vertical-align:top;
  width:1rem;
  height:1rem;
  margin-right:1rem;
  text-align:center;
}

.menu--left {
  background: #62bcbe;
  left:0;
  width:3rem;
  z-index:2;
}

.menu--left  .menu__link {
    width:100%;
    min-width:50rem;
  }

.menu--left .menu__link:hover {
    background-color: #4d9596;
}

.menu--left  .menu__top {
    display:block;
    padding:1rem;
    vertical-align:top;
    width:100%;
    min-width: 10rem;
    text-align: center;
    color:white;
    background-color: #4d9596;

}

.menu__link {
  display:block;
  color:white;
  padding:1rem;
  text-decoration:none;
}



.menu__heading {
  display:inline-block;
  padding:0.8675rem;
  font-size:1.25rem;
  color:white;
}

And here is the app.py:

import dash_core_components as dcc
import dash_html_components as html
import dash
import dash_bootstrap_components as dbc
import flask
import os

server = flask.Flask(__name__)
app = dash.Dash(
    __name__,
    server=server,
    meta_tags=[{"name": "viewport", "content": "width=device-width"}],
    title='meteoDash',
    update_title=None,
    external_stylesheets=
    [
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
     ]
)

app.layout = html.Div(
        [
            html.Div(
                [
                    html.H1('Curtain Menu Test'),
                    html.P('Lorem ipsum dolor sit amet')
                ]
            , className='page-content'),
            html.Div(
                [
                    html.Ul([
                        html.P('Topic 1', className='menu__top', style={'font-weight': 'bold'}),
                        html.Li([
                            html.A([
                                html.Div(
                                    [
                                        html.I(
                                            className='fa fa-desktop',
                                            style={'aria-hidden': 'true'},
                                            children=None)
                                    ], className='icon menu__icon'),
                                html.Span('Page1', className='menu_text')
                            ], href='page1', className='menu__link')
                        ], className="menu__item"),
                        html.Li([
                            html.A([
                                html.Div(
                                    [
                                        html.I(
                                            className='fa fa-desktop',
                                            style={'aria-hidden': 'true'},
                                            children=None)
                                    ], className='icon menu__icon'),
                                html.Span('Page2', className='menu_text')
                            ], href='page2', className='menu__link')
                        ], className="menu__item")
                    ], className='menu__nav')
                ], className='menu menu--left')
        ], className='wrapper')

if __name__ == "__main__":
    server.run(host='0.0.0.0', port=8050)

[tcbegley]

That looks great! Thanks for sharing. Sorry I've been a bit slow on this, I'm quite busy lately. I'll make it a bit more bootstrappy then add it to the examples folder

[tcbegley]

Added something to the examples folder, let me know what you think.