diff --git a/src/app.py b/src/app.py index b039569..40a94fc 100644 --- a/src/app.py +++ b/src/app.py @@ -3,7 +3,7 @@ import os import dash_bootstrap_components as dbc import tomllib -from dash import Dash, dcc, html, page_container, page_registry +from dash import Dash, Input, Output, State, dcc, html, page_container, page_registry from dotenv import load_dotenv from flask import send_from_directory @@ -76,43 +76,80 @@ app.index_string = """ """ -app.layout = html.Div( - [ - html.Div( - [ - html.Div( +navbar = dbc.Navbar( + dbc.Container( + [ + dbc.NavbarBrand( + [ + html.H1("decp.info", className="d-inline-block align-top me-2"), + html.Span(version, className="fs-6 text-muted align-bottom"), + ], + href="/", + ), + dbc.NavbarToggler(id="navbar-toggler"), + dbc.Collapse( + dbc.Nav( [ - html.A(children=html.H1("decp.info"), href="/"), - html.P( - children=html.A( - version, - href="https://github.com/ColinMaudry/decp.info/blob/main/CHANGELOG.md", - target="_blank", - ), - className="version", - ), - ], - className="logo", - ), - html.Div( - id="announcements", - children=dcc.Markdown(os.getenv("ANNOUNCEMENTS")), - ), - html.Div( - [ - dcc.Link( - page["name"], href=page["relative_path"], className="nav" + dbc.NavItem( + dbc.NavLink( + page["name"], + href=page["relative_path"], + active="exact", + ) ) for page in page_registry.values() if page["name"] not in ["Acheteur", "Titulaire", "Marché"] - ] + ], + className="ms-auto", + navbar=True, ), - ], - className="navbar", + id="navbar-collapse", + navbar=True, + ), + ] + ), + color="light", + dark=False, + className="mb-4", +) + +app.layout = html.Div( + [ + dcc.Location(id="url-tracker"), + navbar, + html.Div( + id="announcements", + children=dbc.Container(dcc.Markdown(os.getenv("ANNOUNCEMENTS"))), + ), + dbc.Container( + page_container, + id="page-content-container", + className="mb-4", ), - page_container, ] ) + +@app.callback( + Output("navbar-collapse", "is_open"), + [Input("navbar-toggler", "n_clicks")], + [State("navbar-collapse", "is_open")], +) +def toggle_navbar_collapse(n, is_open): + if n: + return not is_open + return is_open + + +@app.callback( + Output("page-content-container", "fluid"), + Input("url-tracker", "pathname"), +) +def toggle_container_fluid(pathname): + if pathname == "/tableau": + return True + return False + + if __name__ == "__main__": app.run(debug=True) diff --git a/src/assets/style.css b/src/assets/style.css index e82b1bb..b47f0de 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -195,6 +195,7 @@ td[data-dash-column="objet"],td[data-dash-column="titulaire_nom"],td[data-dash-c /* Menu de navigation */ +/* .navbar { width: 100%; height: 100px; @@ -208,6 +209,7 @@ a.nav { margin-right: 40px; font-size: 120%; } +*/ h3 { margin: 36px 0 20px 0;