Add dropdown toggles for navigation bar

- Fix styling for nav-link.active

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": []
+        }
+    ]
+}

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 %}

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>

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);
 }