Same aligment in the sidebar

Hi,

How to make this 2 icon and word in the same alignment?

image


import dash
from dash import Dash, dcc, html, State, Input, Output
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash_iconify import DashIconify

app = Dash(__name__, use_pages=True, pages_folder='',
       external_stylesheets=[dbc.icons.BOOTSTRAP, dbc.themes.BOOTSTRAP])

dash.register_page('Home', path='/', layout='You are home', icon="bi bi-house")
dash.register_page(' Page 1', path='/page-1', layout='You are at page-1', icon="bi bi-clipboard-check")
dash.register_page(' Page 2', path='/page-2', layout='You are page-2', icon="bi bi-clipboard-check")

home = ['Home']

sidebar = dbc.Nav(
[
    dbc.NavLink(
        [
            html.Div([
                html.I(className='bi bi-house'),
                'Home'
            ], className="ms-2"),
        ],
        href='/',
        active="exact",
    ),

    dmc.Accordion(
    dmc.AccordionItem(
        [
        dbc.NavLink(
            [
                html.Div([
                    html.I(className=page["icon"]),
                    page["name"]
                ], className="ms-2"),
            ],
            href=page["path"],
            active="exact",
        )
        for page in dash.page_registry.values() if page['name'] not in home

        ], label='Pages',
            icon=[
                    DashIconify(
                        icon="carbon:search-locate",
                        color=dmc.theme.DEFAULT_COLORS["blue"][6],
                        width=20,
                        )
                         ],
        
        ),
        disableIconRotation=True,
    )
],
vertical=True,
pills=True,
className="bg-light",

)

app.layout = dbc.Container([
dcc.Location(id="url"),
dbc.Offcanvas([
    sidebar,
],
    id="offcanvas",
    title="Welcome to .../",
    is_open=False,
),
html.Div([
    dbc.Button(html.I(className="bi bi-list"),  # "Menu",
               id="open-offcanvas", n_clicks=0),
]),

dbc.Row([
    dbc.Col(html.Div("Tes",
                     style={'fontSize': 50, 'textAlign': 'center'}))
]),

html.Hr(),

dbc.Row([
    dbc.Col([
        dash.page_container
    ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10)
]
)
], fluid=True)

@app.callback(
Output('offcanvas', 'is_open'),
Input('open-offcanvas','n_clicks'),
State('offcanvas', 'is_open'),
)
def openNav(n1, o):
if n1:
    return not o

if __name__ == '__main__':
app.run(debug=True)

Sure, you can override the defaults with custom css:

import dash
from dash import Dash, dcc, html, State, Input, Output
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash_iconify import DashIconify

app = Dash(__name__, use_pages=True, pages_folder='',
           external_stylesheets=[dbc.icons.BOOTSTRAP, dbc.themes.BOOTSTRAP])

dash.register_page('Home', path='/', layout='You are home', icon="bi bi-house")
dash.register_page(' Page 1', path='/page-1', layout='You are at page-1', icon="bi bi-clipboard-check")
dash.register_page(' Page 2', path='/page-2', layout='You are page-2', icon="bi bi-clipboard-check")

home = ['Home']

sidebar = dbc.Nav(
    [
        dbc.NavLink(
            [
                html.Div([
                    html.I(className='bi bi-house', style={'position':'absolute', 'left':'25px'}),
                    html.Span('Home', style={'padding-left':'20px'}),
                ], className="ms-2"),
            ],
            href='/',
            active="exact",

        ),

        dmc.Accordion(
            dmc.AccordionItem(
                [
                    dbc.NavLink(
                        [
                            html.Div([
                                html.I(className=page["icon"]),
                                page["name"]
                            ], className="ms-2"),
                        ],
                        href=page["path"],
                        active="exact",
                    )
                    for page in dash.page_registry.values() if page['name'] not in home

                ], label='Pages',
                icon=[
                    DashIconify(
                        icon="carbon:search-locate",
                        color=dmc.theme.DEFAULT_COLORS["blue"][6],
                        width=20,
                    )
                ],

            ),
            disableIconRotation=True,
        )
    ],
    vertical=True,
    pills=True,
    className="bg-light",)

app.layout = dbc.Container([
dcc.Location(id="url"),
dbc.Offcanvas([
    sidebar,
],
    id="offcanvas",
    title="Welcome to .../",
    is_open=False,
),
html.Div([
    dbc.Button(html.I(className="bi bi-list"),  # "Menu",
               id="open-offcanvas", n_clicks=0),
]),

dbc.Row([
    dbc.Col(html.Div("Tes",
                     style={'fontSize': 50, 'textAlign': 'center'}))
]),

html.Hr(),

dbc.Row([
    dbc.Col([
        dash.page_container
    ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10)
]
)
], fluid=True)

@app.callback(
Output('offcanvas', 'is_open'),
Input('open-offcanvas','n_clicks'),
State('offcanvas', 'is_open'),
)
def openNav(n1, o):
    if n1:
        return not o

if __name__ == '__main__':
    app.run(debug=True, port='12345')

You might have to make some changes, to get it to work for you.

image

Thanks @jinnyzor

1 Like