updated menu with speakers list (#159)

Author: georgically

hugo.toml

@@ -17,13 +17,31 @@ weight = 20
 
 [[menus.main]]
 name = 'Code of Conduct'
-url = '/about/#code-of-conduct'
-weight = 30
+pageRef = '/about/#code-of-conduct'
+parent = 'About'
+weight = 21
+
+[[menus.main]]
+name = 'Volunteer'
+pageRef = '/volunteer'
+parent = 'About'
+weight = 22
+
+[[menus.main]]
+name = 'Assets'
+pageRef = '/assets'
+parent = 'About'
+weight = 23
 
 #[[menus.main]]
-#name = 'Speakers'
-#pageRef = '/speakers'
-#weight = 30
+#name = 'Speaking'
+#url = 'https://pretalx.com/pyladiescon-2024/cfp'
+#weight = 40
+
+[[menus.main]]
+name = 'Speakers'
+url = 'https://pretalx.com/pyladiescon-2024/speaker/'
+weight = 30
 
 [[menus.main]]
 name = 'Schedule'
@@ -40,15 +58,6 @@ name = 'News'
 pageRef = '/news'
 weight = 50
 
-[[menus.main]]
-name = 'Volunteer'
-pageRef = '/volunteer'
-weight = 50
-
-[[menus.main]]
-name = 'Assets'
-pageRef = '/about/assets'
-weight = 60
 
 [markup]
     [markup.goldmark]

themes/pyladies/assets/css/main.css

@@ -590,3 +590,42 @@ h2 a {
 .social a i:hover {
   color: white !important;
 }
+
+.nav-item.dropdown {
+  position: relative;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 200px;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+.nav-item.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown-content li a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content li a:hover {
+  background-color: #ddd;
+}
+/* Remove bullets from dropdown */
+.nav-item ul.dropdown-content {
+  list-style-type: none; /* Removes bullet points */
+  padding: 0; /* Removes padding */
+  margin: 0; /* Removes margin */
+}
+
+/* Optional: style dropdown list items */
+.dropdown-content li {
+  padding: 8px 16px;
+}

themes/pyladies/layouts/partials/menu.html

@@ -16,7 +16,7 @@
       <img class="hamburger-logo" src="/img/bar-chart-2.png"/>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mx-auto"r->
+      <ul class="navbar-nav mx-auto">
         <a href="/" aria-label="PyLadiesCon">
           <img class="menu-logo" src="/img/icon.png"/>
         </a>
@@ -34,28 +34,30 @@
 {{- define "partials/inline/menu/walk.html" }}
   {{- $page := .page }}
   {{- range .menuEntries }}
-    {{- $attrs := dict "href" .URL }}
+    {{- $isActive := "href" }}
     {{- if $page.IsMenuCurrent .Menu . }}
-      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
-    {{- else if $page.HasMenuCurrent .Menu .}}
-      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
+      {{- $isActive = "active" }}
+    {{- else if $page.HasMenuCurrent .Menu . }}
+      {{- $isActive = "ancestor" }}
     {{- end }}
+
     {{- $name := .Name }}
     {{- with .Identifier }}
       {{- with T . }}
         {{- $name = . }}
       {{- end }}
     {{- end }}
-    <li class="nav-item px-4">
-      <a class="py-2 d-flex d-md-inline-block menu-font"
-        {{- range $k, $v := $attrs }}
-          {{- with $v }}
-            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
-          {{- end }}
-        {{- end -}}
+
+    <!-- Dropdown class if there are children -->
+    <li class="nav-item px-4 {{ if .HasChildren }}dropdown{{ end }}">
+      <a href="{{ .URL }}" 
+         class="py-2 d-flex d-md-inline-block menu-font {{ $isActive }}"
+         {{ if eq $isActive "active" }} aria-current="page"{{ else if eq $isActive "ancestor" }} aria-current="true"{{ end }}
       >{{ $name }}</a>
+      
       {{- with .Children }}
-        <ul>
+        <!-- Dropdown content for submenu items -->
+        <ul class="dropdown-content">
           {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
         </ul>
       {{- end }}