app.py.old

import dash
from dash import Dash, dcc, html
import dash_design_kit as ddk

app = Dash(__name__, use_pages=True)
server = app.server  # expose server variable for Procfile

app.layout = ddk.App([
    # dcc.Location(id='_pages_location'),  # Add Location component
    # dcc.Location(id='url'),  # Add Location component
    ddk.Header([
        ddk.Logo(src=app.get_asset_url('ACG-header-logo.png')),
        ddk.Title('ACGDataViz'),
        dcc.Link(html.Button('Home', style={'margin-left': '20px'}), href=app.get_relative_path('/')),
    ], style={'background-color': '#add8e6'}),
    
    dcc.Store(id='_pages_store'),  # Add Store component for internal state management
    ddk.Block(width=1, children=[dash.page_container]),  # Add page container
    ddk.PageFooter(children=[
        html.Hr(),
        ddk.Block(children=[
            ddk.Block(width=0.2, children=[
                html.Img(src=app.get_asset_url('PMEL_logo.png'), style={'height': '90px', 'margin-left': '20px'})
            ]),
            ddk.Block(width=0.8, children=[
                html.Div(style={'display': 'flex', 'flex-direction': 'column', 'align-items': 'flex-start', 'margin-left': '10px'}, children=[
                    dcc.Link('National Oceanic and Atmospheric Administration',
                             href='https://www.noaa.gov/', style={'font-size': '1em', 'margin-bottom': '5px', 'margin-left': '-250px'}),
                    dcc.Link('Pacific Marine Environmental Laboratory',
                             href='https://www.pmel.noaa.gov/', style={'font-size': '1em', 'margin-bottom': '5px', 'margin-left': '-250px'}),
                    dcc.Link('oar.pmel.webmaster@noaa.gov', href='mailto:oar.pmel.webmaster@noaa.gov', style={'font-size': '1em', 'margin-bottom': '5px', 'margin-left': '-250px'}),
                    html.Div(children=[
                        dcc.Link('DOC |', href='https://www.commerce.gov/', style={'font-size': '1em'}),
                        dcc.Link(' NOAA |', href='https://www.noaa.gov/', style={'font-size': '1em'}),
                        dcc.Link(' OAR |', href='https://www.research.noaa.gov/', style={'font-size': '1em'}),
                        dcc.Link(' PMEL |', href='https://www.pmel.noaa.gov/', style={'font-size': '1em'}),
                        dcc.Link(' Privacy Policy |', href='https://www.noaa.gov/disclaimer', style={'font-size': '1em'}),
                        dcc.Link(' Disclaimer |', href='https://www.noaa.gov/disclaimer', style={'font-size': '1em'}),
                        dcc.Link(' Accessibility', href='https://www.pmel.noaa.gov/accessibility', style={'font-size': '1em'})
                    ], style={'margin-left': '-250px'})
                ])
            ])
        ])
    ], style={'background-color': '#add8e6', 'padding': '10px'})
])

# dash.page_registry.values

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