import dash
import dash_core_components as dcc
import dash_html_components as html

# Since we're adding callbacks to elements that don't exist in the app.layout,
# Dash will raise an exception to warn us that we might be
# doing something wrong.
# In this case, we're adding the elements through a callback, so we can ignore
# the exception.
app = dash.Dash(__name__, suppress_callback_exceptions=True)

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

link_style = {'color':'blue', 'margin':'10px 5px 10px 5px', 'font-weight': 'bold', 'text-decoration': 'none'}

index_page = html.Div([
    dcc.Link('Home', href='/', style=link_style),
    dcc.Link('Research', href='/page-research', style=link_style),
    dcc.Link('Skill', href='/page-skill', style=link_style),
    html.Br(),
    html.Label('Homepage content')
])

page_research_layout = html.Div([
    dcc.Link('Home', href='/', style=link_style),
    dcc.Link('Research', href='/page-research', style=link_style),
    dcc.Link('Skill', href='/page-skill', style=link_style),
    html.Br(),
    html.Label('Reserach-page content')
])

page_skill_layout = html.Div([
    dcc.Link('Home', href='/', style=link_style),
    dcc.Link('Research', href='/page-research', style=link_style),
    dcc.Link('Skill', href='/page-skill', style=link_style),
    html.Br(),
    html.Label('Skill-page content')
])

@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-research':
        return page_research_layout
    elif pathname == '/page-skill':
        return page_skill_layout
    else:
        return index_page

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