Hi,
How to make this 2 icon and word in the same alignment?
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)
