aside component for appshell

app.py

@@ -1,7 +1,9 @@
 import dash
+from dash_iconify import DashIconify
 from dash import html, _dash_renderer
 import dash_mantine_components as dmc
 import dash_bootstrap_components as dbc
+from dash import dcc, callback, Output, Input
  
 _dash_renderer._set_react_version("18.2.0")
 
@@ -22,11 +24,10 @@ header = dmc.Flex(
 )
 
 left_nav_bar = html.Div(
-    [
+    [        
         dmc.NavLink(
             label="Overview",
-            href="/",
-            active=True
+            href="/"
         ),
         dmc.NavLink(
             label="ChaRtBot",
@@ -35,7 +36,7 @@ left_nav_bar = html.Div(
             opened=True,
             children=[
                 dmc.NavLink(label="English Women's Football Matches (2011 - 2024)", description="Demo data", href="/chartbot/football"),
-                dmc.NavLink(label="US Presidential Elections (1976-2020)", description="Demo data", href="/chartbot/us-elections"),
+                dmc.NavLink(label="USA Presidential Elections (1976-2020)", description="Demo data", href="/chartbot/us-elections"),
                 dmc.NavLink(label="Space Missions (2000 - 2022)", description="Demo data", href="/chartbot/space-missions"),
                 dmc.NavLink(label="Amazon Purchases 2021 Sample", description="Demo data", href="/chartbot/amazon-purchases"),
                 dmc.NavLink(label="Upload your data", href="/chartbot")
@@ -49,26 +50,51 @@ left_nav_bar = html.Div(
             href="/faqs",
         )
     ], 
+    id="navbar",
     style={"width": 240, "margin-top": 10, "margin-left": 10, "font-weight": "bold"}
 )
 
+aside = html.Div(
+    [
+        dmc.Title("On this page", order=4, style={'padding-bottom': 10}),
+        dmc.NavLink(label="Dataset", href="#dataset", leftSection=DashIconify(icon="bx:data", height=20)),
+        dmc.NavLink(label="Chart", href="#chart", leftSection=DashIconify(icon="healthicons:chart-line", height=20)),
+        dmc.NavLink(label="Python code", href="#python-code", leftSection=DashIconify(icon="ph:code", height=20)),
+    ], style={"padding-top": 20, "margin-left": 10, 'fontFamily': 'Helvetica'}
+)
+
 app_shell = dmc.AppShell(
     [
+        dcc.Location(id='current-page'),
         dmc.AppShellHeader(header),
         dmc.AppShellNavbar(left_nav_bar),
+        dmc.AppShellAside(aside, id="shell-aside", withBorder=False),
         dmc.AppShellMain([dash.page_container]),
     ],
     header={"height": 70},
     padding="xl",
-    zIndex=1400,
     navbar={
         "width": 260,
         "breakpoint": "sm",
         "collapsed": {"mobile": True},
     },
+    aside={
+        "width": 300,
+        "breakpoint": "xl",
+    },
+    id="app-shell"
 )
 
 app.layout = dmc.MantineProvider([app_shell])
 
+@callback(
+    Output("app-shell", "aside"),
+    Input("current-page", "pathname")
+)
+def toggle_aside(pathname):
+    if pathname == "/":
+        return {"width": 0}
+    return {"width": 300}
+
 if __name__ == "__main__":
     app.run_server(debug=True)