From 34311329017f19eed4ef2b7c4baef493fa38542a Mon Sep 17 00:00:00 2001
From: Sravan Balaji <balajsra@umich.edu>
Date: Thu, 2 Jan 2025 10:42:40 -0500
Subject: [PATCH] Add dropdown toggles for navigation bar

- Fix styling for nav-link.active
---
 src/_data/navigation.json              | 59 ++++++++++++++++----------
 src/_includes/layouts/portfolio.html   |  8 ++--
 src/_includes/partials/navigation.html | 11 +++++
 src/style.css                          |  4 ++
 4 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/_data/navigation.json b/src/_data/navigation.json
index 9111166..8c3da93 100644
--- a/src/_data/navigation.json
+++ b/src/_data/navigation.json
@@ -1,24 +1,37 @@
 {
-  "items": [
-    {
-      "text": "About",
-      "url": "/about/"
-    },
-    {
-      "text": "Portfolio",
-      "url": "/portfolio/"
-    },
-    {
-      "text": "Personal",
-      "url": "/personal/"
-    },
-    {
-      "text": "Blog",
-      "url": "/blog/"
-    },
-    {
-      "text": "Documentation",
-      "url": "/documentation/"
-    }
-  ]
-}
+    "items": [
+        {
+            "text": "About",
+            "url": "/about/",
+            "sections": [
+                "Bio",
+                "Contact Me"
+            ]
+        },
+        {
+            "text": "Portfolio",
+            "url": "/portfolio/",
+            "sections": [
+                "Resume",
+                "Professional Experience",
+                "Education",
+                "Research"
+            ]
+        },
+        {
+            "text": "Personal",
+            "url": "/personal/",
+            "sections": []
+        },
+        {
+            "text": "Blog",
+            "url": "/blog/",
+            "sections": []
+        },
+        {
+            "text": "Documentation",
+            "url": "/documentation/",
+            "sections": []
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/_includes/layouts/portfolio.html b/src/_includes/layouts/portfolio.html
index 23fa51c..eb5e087 100644
--- a/src/_includes/layouts/portfolio.html
+++ b/src/_includes/layouts/portfolio.html
@@ -2,9 +2,9 @@
 {% extends "layouts/base.html" %}
 {% block content %}
 <div class="container-fluid px-md-6">
-{% include "partials/resume.html" %}
-{% include "partials/professionalExperience.html" %}
-{% include "partials/education.html" %}
-{% include "partials/research.html" %}
+  {% include "partials/resume.html" %}
+  {% include "partials/professionalExperience.html" %}
+  {% include "partials/education.html" %}
+  {% include "partials/research.html" %}
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/src/_includes/partials/navigation.html b/src/_includes/partials/navigation.html
index 6513865..dbf427c 100644
--- a/src/_includes/partials/navigation.html
+++ b/src/_includes/partials/navigation.html
@@ -18,9 +18,20 @@
       <div class="collapse navbar-collapse" id="navbarToggler">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             {% for item in navigation.items %}
+            {% if item.sections.length > 0 %}
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" id="{{ item.text | slugify }}" role="button" data-bs-toggle="dropdown" href="{{ item.url }}"><b>{{ item.text }}</b></a>
+              <ul class="dropdown-menu">
+                {% for section in item.sections %}
+                <li><a class="dropdown-item" href="{{ item.url }}#{{ section | slugify }}">{{ section }}</a></li>
+                {% endfor %}
+              </ul>
+            </li>
+            {% else %}
             <li class="nav-item">
               <a class="nav-link" href="{{ item.url }}"><b>{{ item.text }}</b></a>
             </li>
+            {% endif %}
             {% endfor %}
         </ul>
       </div>
diff --git a/src/style.css b/src/style.css
index 84ba3c1..cc18f20 100644
--- a/src/style.css
+++ b/src/style.css
@@ -61,6 +61,10 @@ hr {
   color: var(--primary-color);
 }
 
+.my-nav .nav-link.show {
+  color: var(--tertiary-color);
+}
+
 .my-nav .nav-link:hover {
   color: var(--tertiary-color);
 }