Adding an log out button

Dash Python
1

Hello all,

When I open my web application,I get a prompt asking me to input my username and pass.I made a users.csv file in the application and with those user infromations I can normally enter the application.Now I have a question,how is it possible for me to add a log in off button in my app?Do I add the log out button in the nav.py code or the index.py?If anyone has any inputs,it would be really helpful.

This is the promp I get:

prompt user
prompt user860×403 4.33 KB

This is my menu at the moment:

menu na koji treba dodati
menu na koji treba dodati2467×679 19.3 KB

This log out button I would like to add in my menu (the one at the top):

Inkednasa druga stranica_LI
Inkednasa druga stranica_LI2526×640 82.1 KB

This is my index.py

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
from apps import app1, app2, app3, app4, app5, app6, app7
import nav

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])



@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == "/":
        return nav.layout
    elif pathname == '/apps/Ked33':
        #app.title = "Downtime and Reasons"
        return app1.layout
    elif pathname == "/apps/Br206":
        #app.title = "Report of Check Criteria"
        return app2.layout
else:
        return '404'

if __name__ == '__main__':
    app.run_server(debug=True, port=8080)

And this is my nav.py

import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app

content = html.Div(
    [
        html.Div(className="container", children=[
        html.H1("BDE Manufacturing Report CZ", className="my-4 text-center display-4"),
        dbc.Row(style={"margin-bottom":"25px"},
                children=[
                html.Div(className="col-lg-6", children=[#Ovaj col-lg-6 je dio boostrapa i tu mijenjamo  vecilini,a dole u style je unutrasnjost koce
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/Ked33", children=[
                                                        html.Div("Ked33", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ])
                ]),
                html.Div(className="col-lg-6", children=[
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/Br206", children=[
                                                        html.Div("Br206", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ])
                ]),
],
    id="content"
)

layout = html.Div([content])