Merge pull request #46 from gurusabarish/dropdown-v3

dropdown v3 #44

layouts/_default/baseof.html

@@ -67,6 +67,7 @@
       $("nav").toggleClass("navbar-light");
       $('.text-dark').toggleClass('darkmode-text-dark');
       $('.text-muted').toggleClass('darkmode-text-muted');
+      $(".dropdown-menu").toggleClass('darkmode-dropdown-menu');
     };
   </script>
   <script src="/js/auto_darkmode.js"></script>
@@ -79,6 +80,7 @@
       $("nav").toggleClass("navbar-light");
       $('.text-dark').toggleClass('darkmode-text-dark');
       $('.text-muted').toggleClass('darkmode-text-muted');
+      $(".dropdown-menu").toggleClass('darkmode-dropdown-menu');
 
       switchDarkmodeSetting();
     });

layouts/index.html

@@ -129,6 +129,7 @@
       $(".about-backdark").toggleClass("about-back");
       $(".education-backdark").toggleClass("education-back");
       $(".achievements-backdark").toggleClass("achievements-back");
+      $(".dropdown-menu").toggleClass('darkmode-dropdown-menu');
     }
   </script>
   <script src="/js/auto_darkmode.js"></script>
@@ -160,6 +161,7 @@
       $("nav").toggleClass("navbar-light");
       $(".text-dark").toggleClass("darkmode-text-dark");
       $(".text-muted").toggleClass("darkmode-text-muted")
+      $(".dropdown-menu").toggleClass('darkmode-dropdown-menu');
 
       switchDarkmodeSetting();
     });

layouts/partials/sections/v3/navbar.html

@@ -64,11 +64,47 @@
         </li>
         {{ end }}
 
-        {{ range site.Params.customMenus }}
+        {{ range .Site.Menus.main }}
+        {{ if .HasChildren }}
+        <!-- Dropdown menu -->
+        <li class="nav-item dropdown navbar-text">
+          <a class="nav-link text-dark dropdown-toggle" href="#" title="{{ .Title }}" id="navbarDropdownMenuLink"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {{ .Name }}
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+            {{ range .Children }}
+            <a class="dropdown-item text-dark" href="{{ .URL }}" title="{{ .Title }}">
+              {{ .Name }}
+            </a>
+            {{ end }}
+          </div>
+        </li>
+
+        {{/*
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="{{ .URL }}" id="navbarDropdown" role="button"
+            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{ .Title }}">
+            {{ .Name }}
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            {{ range .Children }}
+            <a class="dropdown-item" href="{{ .URL }}" title="{{ .Title }}">
+              {{ .Name }}</a>
+            {{ end }}
+          </div>
+        </li> */}}
+        {{else}}
+        <!-- Single menu item -->
         <li class="nav-item navbar-text">
-          <a class="nav-link text-dark" href="{{.Url}}" aria-label="{{ .name }}">{{ .name }}</a>
+          <a class="nav-link text-dark" href="{{.URL}}" title="{{ .Title }}">
+            {{ .Pre }}
+            <span>{{ .Name }}</span>
+          </a>
         </li>
         {{end}}
+        {{end}}
+
         <li class="nav-item navbar-text">
           <div class="custom-control custom-switch">
             <input type="checkbox" class="custom-control-input" id="customSwitch1" autocomplete="on">

static/css/v3/darkmode.css

@@ -10,5 +10,6 @@
   color: #b0b3b8 !important;
 }
 
-
+.darkmode-dropdown-menu {
-
+  background-color: #212121 !important;
+}

static/css/v3/navbar-footer.css

@@ -9,6 +9,9 @@
 .navbar-text {
   font-size: 16px !important;
 }
+li> .dropdown-toggle:focus{
+  color: #007bff !important;
+}
 
 /* v2 and v3 footer */
 footer {

static/css/v3/v3.css

@@ -205,13 +205,9 @@ a:hover {
 }
 
 /* v3 experience */
-#experience {
-}
 #nav-pills-out {
   border-left: 1px solid #007bff;
 }
-.nav-pills .nav-link {
-}
 .nav-pills .active {
   padding-left: 20%;
   color: #818181 !important;
@@ -224,8 +220,6 @@ a:hover {
   left: 0px;
   color: #007bff;
 }
-.tab-pane {
-}
 .ex {
   list-style-type: none;
 }

static/js/auto_darkmode.js

@@ -7,6 +7,7 @@ function setCookie(name,value,days) {
     }
     document.cookie = name + "=" + (value || "")  + expires + "; path=/";
 }
+
 function getCookie(name) {
     var nameEQ = name + "=";
     var ca = document.cookie.split(';');
@@ -52,7 +53,6 @@ function switchDarkmodeSetting() {
     } 
 }
 
-
 const check_darkmode = getDarkmodeSetting();
 const darkmode_prefer = window.matchMedia('(prefers-color-scheme: dark)').matches;
 if (darkmode_prefer && check_darkmode === null) {

website/config.yaml

@@ -17,6 +17,34 @@ taxonomies:
   category: "categories"
 
 enableEmoji: true
+
+# menus
+Menus:
+  main:
+    - identifier: blog
+      name: Blog
+      title: Blog posts
+      url: /blog
+      weight: 1
+
+    #Dropdown menu
+    # - identifier: dropdown
+    #   title: Example dropdown menu
+    #   name: Dropdown
+    #   weight: 3
+    # - identifier: dropdown1
+    #   title: example dropdown 1
+    #   name: example 1
+    #   url: /ew
+    #   parent: dropdown
+    #   weight: 1
+    # - identifier: dropdown2
+    #   title: example dropdown 2
+    #   name: example 2
+    #   url: /34545
+    #   parent: dropdown
+    #   weight: 2
+
 params:
   version: 3
   customCSS: false
@@ -24,11 +52,6 @@ params:
   favicon: "/images/fav.png"
   description: "A high performance hugo theme for personal portfolio and blog."
 
-  # Navbar Menus
-  customMenus:
-    - name: "Blog"
-      Url: "/blog"
-
   # home
   disable_home: false
   profile_image: "/images/profile.png"

website/v3.yaml

@@ -17,6 +17,34 @@ taxonomies:
   category: "categories"
 
 enableEmoji: true
+
+# menus
+Menus:
+  main:
+    - identifier: blog
+      name: Blog
+      title: Blog posts
+      url: /blog
+      weight: 1
+
+    #Dropdown menu
+    # - identifier: dropdown
+    #   title: Example dropdown menu
+    #   name: Dropdown
+    #   weight: 3
+    # - identifier: dropdown1
+    #   title: example dropdown 1
+    #   name: example 1
+    #   url: /ew
+    #   parent: dropdown
+    #   weight: 1
+    # - identifier: dropdown2
+    #   title: example dropdown 2
+    #   name: example 2
+    #   url: /34545
+    #   parent: dropdown
+    #   weight: 2
+    
 params:
   version: 3
   customCSS: false
@@ -24,11 +52,6 @@ params:
   favicon: "/images/fav.png"
   description: "A high performance hugo theme for personal portfolio and blog."
 
-  # Navbar Menus
-  customMenus:
-    - name: "Blog"
-      Url: "/blog"
-
   # home
   disable_home: false
   profile_image: "/images/profile.png"