initial feature/react-migration commit
This commit is contained in:
193
dashboard-dash-backup/sidebar_test.py
Normal file
193
dashboard-dash-backup/sidebar_test.py
Normal file
@@ -0,0 +1,193 @@
|
||||
"""
|
||||
This app creates a collapsible, responsive sidebar layout with
|
||||
dash-bootstrap-components and some custom css with media queries.
|
||||
|
||||
When the screen is small, the sidebar moved to the top of the page, and the
|
||||
links get hidden in a collapse element. We use a callback to toggle the
|
||||
collapse when on a small screen, and the custom CSS to hide the toggle, and
|
||||
force the collapse to stay open when the screen is large.
|
||||
|
||||
dcc.Location is used to track the current location, a callback uses the current
|
||||
location to render the appropriate page content. The active prop of each
|
||||
NavLink is set automatically according to the current pathname. To use this
|
||||
feature you must install dash-bootstrap-components >= 0.11.0.
|
||||
|
||||
For more details on building multi-page Dash applications, check out the Dash
|
||||
documentation: https://dash.plotly.com/urls
|
||||
"""
|
||||
import sys
|
||||
sys.path.append('/workspace')
|
||||
import dash
|
||||
import dash_bootstrap_components as dbc
|
||||
from dash import Input, Output, State, dcc, html, page_container
|
||||
from dash_iconify import DashIconify
|
||||
# import callbacks.ui_callbacks
|
||||
import dashboard.callbacks.appointments_callbacks
|
||||
import dashboard.callbacks.appointment_modal_callbacks
|
||||
import dash_mantine_components as dmc
|
||||
|
||||
app = dash.Dash(
|
||||
external_stylesheets=[dbc.themes.BOOTSTRAP],
|
||||
# these meta_tags ensure content is scaled correctly on different devices
|
||||
# see: https://www.w3schools.com/css/css_rwd_viewport.asp for more
|
||||
meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
|
||||
use_pages=True,
|
||||
suppress_callback_exceptions=True,
|
||||
)
|
||||
|
||||
nav_items = [
|
||||
{"label": "Übersicht", "href": "/overview", "icon": "mdi:view-dashboard"},
|
||||
{"label": "Termine", "href": "/appointments","icon": "mdi:calendar"},
|
||||
{"label": "Bildschirme", "href": "/clients", "icon": "mdi:monitor"},
|
||||
{"label": "Einstellungen","href": "/settings", "icon": "mdi:cog"},
|
||||
{"label": "Benutzer", "href": "/users", "icon": "mdi:account"},
|
||||
]
|
||||
|
||||
nav_links = []
|
||||
|
||||
for item in nav_items:
|
||||
# Create a NavLink for each item
|
||||
link_id = {"type": "nav-item", "index": item["label"]}
|
||||
nav_link = dbc.NavLink(
|
||||
[
|
||||
DashIconify(icon=item["icon"], width=24),
|
||||
html.Span(item["label"], className="ms-2 sidebar-label"),
|
||||
],
|
||||
href=item["href"],
|
||||
active="exact",
|
||||
className="sidebar-item",
|
||||
id=link_id,
|
||||
)
|
||||
nav_links.append(
|
||||
html.Div(
|
||||
children=nav_link,
|
||||
className="nav-item-container"
|
||||
)
|
||||
)
|
||||
# we use the Row and Col components to construct the sidebar header
|
||||
# it consists of a title, and a toggle, the latter is hidden on large screens
|
||||
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(
|
||||
nav_links, # <-- Korrigiert: keine zusätzliche Liste
|
||||
vertical=True,
|
||||
pills=True,
|
||||
),
|
||||
id="collapse",
|
||||
),
|
||||
],
|
||||
id="sidebar",
|
||||
)
|
||||
|
||||
content = dmc.MantineProvider([
|
||||
html.Div(
|
||||
html.Div(page_container, className="page-content"),style={"flex": "1", "padding": "20px"}
|
||||
)
|
||||
])
|
||||
|
||||
|
||||
app.layout = html.Div([dcc.Location(id="url"), sidebar, content])
|
||||
|
||||
|
||||
# @app.callback(Output("page-content", "children"), [Input("url", "pathname")])
|
||||
# def render_page_content(pathname):
|
||||
# if pathname == "/":
|
||||
# return html.P("This is the content of the home page!")
|
||||
# elif pathname == "/page-1":
|
||||
# return html.P("This is the content of page 1. Yay!")
|
||||
# elif pathname == "/page-2":
|
||||
# return html.P("Oh cool, this is page 2!")
|
||||
# # If the user tries to reach a different page, return a 404 message
|
||||
# return html.Div(
|
||||
# [
|
||||
# html.H1("404: Not found", className="text-danger"),
|
||||
# html.Hr(),
|
||||
# html.P(f"The pathname {pathname} was not recognised..."),
|
||||
# ],
|
||||
# className="p-3 bg-light rounded-3",
|
||||
# )
|
||||
|
||||
|
||||
@app.callback(
|
||||
[Output("sidebar", "className"), Output("collapse", "is_open")],
|
||||
[
|
||||
Input("sidebar-toggle", "n_clicks"),
|
||||
Input("navbar-toggle", "n_clicks"),
|
||||
],
|
||||
[
|
||||
State("sidebar", "className"),
|
||||
State("collapse", "is_open"),
|
||||
],
|
||||
)
|
||||
def toggle_sidebar_and_collapse(sidebar_n, navbar_n, classname, is_open):
|
||||
ctx = dash.callback_context
|
||||
if not ctx.triggered:
|
||||
return classname, is_open
|
||||
trigger_id = ctx.triggered[0]["prop_id"].split(".")[0]
|
||||
if trigger_id == "sidebar-toggle":
|
||||
# Toggle sidebar collapse
|
||||
if sidebar_n and classname == "":
|
||||
return "collapsed", is_open
|
||||
return "", is_open
|
||||
elif trigger_id == "navbar-toggle":
|
||||
# Toggle collapse
|
||||
if navbar_n:
|
||||
return classname, not is_open
|
||||
return classname, is_open
|
||||
return classname, is_open
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(port=8888, debug=True)
|
||||
Reference in New Issue
Block a user