navlinks highlight when selected

app.py

@@ -29,28 +29,33 @@ header = dmc.Flex(
 
 left_nav_bar = html.Div(
     [        
+        dcc.Location(id='url', refresh=True),
         dmc.NavLink(
             label="Overview",
-            href="/"
+            href="/",
+            id="nav-overview"
         ),
         dmc.NavLink(
             label="ChaRtBot",
             childrenOffset=28,
             opened=True,
             children=[
-                dmc.NavLink(label="USA Presidential Elections (1976-2020)", description="Sample dataset", href="/chartbot/us-elections"),
-                dmc.NavLink(label="English Women's Football Matches (2011-2024)", description="Sample dataset", href="/chartbot/football"),
-                dmc.NavLink(label="Amazon Purchases 2021 (Sample)", description="Sample dataset", href="/chartbot/amazon-purchases"),                
-                dmc.NavLink(label="Space Missions (2000-2022)", description="Sample dataset", href="/chartbot/space-missions"),                
-                dmc.NavLink(label="Upload your data", href="/chartbot")
+                dmc.NavLink(label="USA Presidential Elections (1976-2020)", description="Sample dataset", href="/chartbot/us-elections", id="nav-us-elections"),
+                dmc.NavLink(label="English Women's Football Matches (2011-2024)", description="Sample dataset", href="/chartbot/football", id="nav-football"),
+                dmc.NavLink(label="Amazon Purchases 2021 (Sample)", description="Sample dataset", href="/chartbot/amazon-purchases", id="nav-amazon-purchases"),                
+                dmc.NavLink(label="Space Missions (2000-2022)", description="Sample dataset", href="/chartbot/space-missions", id="nav-space-missions"),                
+                dmc.NavLink(label="Upload your data", href="/chartbot", id="nav-upload"),
             ],
         ),
         dmc.NavLink(
-            label="Product roadmap"
+            label="Product roadmap",
+            href="/product-roadmap",
+            id="nav-roadmap",
         ),
         dmc.NavLink(
             label="FAQs",
             href="/faqs",
+            id="nav-faqs",
         )
     ], 
     id="navbar",
@@ -99,5 +104,31 @@ def toggle_aside(pathname):
         return {"width": 0}
     return {"width": 300}
 
+@callback(
+    Output("nav-overview", "style"),
+    Output("nav-us-elections", "style"),
+    Output("nav-football", "style"),
+    Output("nav-amazon-purchases", "style"),
+    Output("nav-space-missions", "style"),
+    Output("nav-upload", "style"),
+    Output("nav-roadmap", "style"),
+    Output("nav-faqs", "style"),
+    Input("url", "pathname")
+)
+def update_navlink_styles(pathname):
+    style = {"backgroundColor": "#FFFFFF"}
+    active_style = {"backgroundColor": "#EEEEEE"}
+
+    return [
+        active_style if pathname == "/" else style,
+        active_style if pathname == "/chartbot/us-elections" else style,
+        active_style if pathname == "/chartbot/football" else style,
+        active_style if pathname == "/chartbot/amazon-purchases" else style,
+        active_style if pathname == "/chartbot/space-missions" else style,
+        active_style if pathname == "/chartbot" else style,
+        active_style if pathname == "/product-roadmap" else style,
+        active_style if pathname == "/faqs" else style
+    ]
+
 if __name__ == "__main__":
     app.run_server(debug=False)