From 05da28c5e922676750bdcd61b63f84e86ddbaf49 Mon Sep 17 00:00:00 2001
From: Riddhiman Adib <adib2149@gmail.com>
Date: Mon, 5 Jul 2021 02:58:52 -0500
Subject: [PATCH] adds submenu in navigation bar. (fixes issue #159)

---
 _includes/header.html | 20 ++++++++++++++++++++
 _pages/dropdown.md    | 12 ++++++++++++
 _sass/_base.scss      |  2 +-
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 _pages/dropdown.md

diff --git a/_includes/header.html b/_includes/header.html
index 0712951de5bb..31e1fd2a4b19 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -46,6 +46,25 @@
           {% assign sorted_pages = site.pages | sort: "title" %}
           {% for p in sorted_pages %}
           {% if p.nav and p.autogen == nil %}
+          {% if p.dropdown %}
+          <li class="nav-item dropdown {% if page.title == p.title %}active{% endif %}">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                {{ p.title }}
+                {% if page.title == p.title %}
+                <span class="sr-only">(current)</span>
+                {% endif %}
+              </a>
+              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+              {% for child in p.children %}
+              {% if child.title == 'divider' %}
+                <div class="dropdown-divider"></div>
+              {% else %}
+                <a class="dropdown-item" href="{{ child.permalink | relative_url }}">{{ child.title }}</a>
+              {% endif %}
+              {% endfor %}
+              </div>
+          </li>
+          {% else %}
           <li class="nav-item {% if page.title == p.title %}active{% endif %}">
               <a class="nav-link" href="{{ p.url | relative_url }}">
                 {{ p.title }}
@@ -55,6 +74,7 @@
               </a>
           </li>
           {% endif %}
+          {% endif %}
           {% endfor %}
           {% if site.enable_darkmode %}
             <div class = "toggle-container">
diff --git a/_pages/dropdown.md b/_pages/dropdown.md
new file mode 100644
index 000000000000..578b3723cf7e
--- /dev/null
+++ b/_pages/dropdown.md
@@ -0,0 +1,12 @@
+---
+layout: page
+title: submenus
+nav: true
+dropdown: true
+children: 
+    - title: publications
+      permalink: /publications/
+    - title: divider
+    - title: projects
+      permalink: /projects/
+---
\ No newline at end of file
diff --git a/_sass/_base.scss b/_sass/_base.scss
index f51291f43cf6..dea0bbc019d1 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -18,7 +18,7 @@ a, table.table a {
     color: var(--global-theme-color);
     text-decoration: underline;
   }
-  &:hover:after {
+  &:hover:after :not(.nav-item.dropdown) {
     width: 100%;
   }
 }