dropdown v3 #44

9 files changed, 106 insertions, 22 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index f1d35b8..60caea9 100644
--- a/layouts/_default/baseof.html
+++ b/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();
     });
diff --git a/layouts/index.html b/layouts/index.html
index e01e9a9..0a6343b 100644
--- a/layouts/index.html
+++ b/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();
     });
diff --git a/layouts/partials/sections/v3/navbar.html b/layouts/partials/sections/v3/navbar.html
index cd09bff..1a5a79c 100644
--- a/layouts/partials/sections/v3/navbar.html
+++ b/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}}
+        {{end}}
+
         <li class="nav-item navbar-text">
           <div class="custom-control custom-switch">
             <input type="checkbox" class="custom-control-input" id="customSwitch1" autocomplete="on">
diff --git a/static/css/v3/darkmode.css b/static/css/v3/darkmode.css
index 104c983..2368c50 100644
--- a/static/css/v3/darkmode.css
+++ b/static/css/v3/darkmode.css
@@ -10,5 +10,6 @@
   color: #b0b3b8 !important;

 }

 

-

-

+.darkmode-dropdown-menu {

+  background-color: #212121 !important;

+}

diff --git a/static/css/v3/navbar-footer.css b/static/css/v3/navbar-footer.css
index 189b45a..973a667 100644
--- a/static/css/v3/navbar-footer.css
+++ b/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 {

diff --git a/static/css/v3/v3.css b/static/css/v3/v3.css
index 9988a51..f189655 100644
--- a/static/css/v3/v3.css
+++ b/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;
 }
diff --git a/static/js/auto_darkmode.js b/static/js/auto_darkmode.js
index 51a8fd7..0dc5a3a 100644
--- a/static/js/auto_darkmode.js
+++ b/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) {
diff --git a/website/config.yaml b/website/config.yaml
index 9ffdf8f..16f7267 100644
--- a/website/config.yaml
+++ b/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"
diff --git a/website/v3.yaml b/website/v3.yaml
index 87b30aa..a5188ef 100644
--- a/website/v3.yaml
+++ b/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"