Dash_Add_a_customisable_sidebar.ipynb

Kernel: Python 3

Dash - Add a customisable sidebar

Give Feedback | Bug report

Tags: #dash #offcanvas #sidebar #customisable #component #library

Author: Florent Ravenel

Last update: 2023-06-05 (Created: 2023-06-05)

Description: This notebook demonstrates how to use the Offcanvas component to add a customisable sidebar to your apps. It is usefull for organisations that need to add a sidebar to their Dash apps.

References:

• Dash Bootstrap Components - Offcanvas

• Dash Bootstrap Components - Getting Started

Input

Import libraries

import os
try:
    import dash
except:
    !pip install dash --user
    import dash
try:
    import dash_bootstrap_components as dbc
except:
    !pip install dash_bootstrap_components --user
    import dash_bootstrap_components as dbc
from dash import Input, Output, State, html

Setup Variables

• DASH_PORT: specify a port number for Dash

• placement: a value equal to: 'start', 'end', 'top', 'bottom'; optional: Which side of the viewport the offcanvas will appear from.

DASH_PORT = 8050
placement = "start"

Model

Initialize Dash app

app = dash.Dash(
    requests_pathname_prefix=f'/user/{os.environ.get("JUPYTERHUB_USER")}/proxy/{DASH_PORT}/',
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1.0"}
    ],
)

# app = dash.Dash() if you are not in Naas

Create Offcanvas component

Long description of the function: The Offcanvas component is a customisable sidebar that can be used to add content to your Dash apps. It is created using the dbc.Offcanvas function.

offcanvas = html.Div(
    [
        dbc.Button("Open Offcanvas", id="open-offcanvas", n_clicks=0),
        dbc.Offcanvas(
            html.P(
                "This is the content of the Offcanvas. "
                "Close it by clicking on the close button, or "
                "the backdrop."
            ),
            id="offcanvas",
            title="Title",
            is_open=False,
            placement=placement,
        ),
    ]
)

app.layout = html.Div(
    [
        offcanvas
    ]
)

@app.callback(
    Output("offcanvas", "is_open"),
    Input("open-offcanvas", "n_clicks"),
    [State("offcanvas", "is_open")],
)
def toggle_offcanvas(n1, is_open):
    if n1:
        return not is_open
    return is_open

Output

Generate URL and show logs

if __name__ == "__main__":
    app.run_server(proxy=f"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai")