Added a drop down for multiple learn sections. Not styled. Need to develop in the cloud

Author: Dan G

site/layouts/partials/learn-menu.html

@@ -1,44 +1,56 @@
 <aside class="learn-menu">
+  <!-- Dropdown Menu Added Here -->
+  <div class="sidebar-dropdown">
+    <select onchange="if (this.value) window.location.href=this.value">
+      <option value="">Select an option</option>
+      <option value="/learn/playwright">Playwright</option>
+      <option value="/learn/monitoring">Monitoring</option>
+      <option value="/learn/tracing">Tracing</option>
+    </select>
+  </div>
+
+  <!-- Existing Sidebar Menu -->
   <nav id="sideMenu" class="left-transform right-transform">
     <ul class="learn-menu-content">
       {{ $currentPage := . }}
-      {{ range $index, $element:=.Site.Menus.learn }} {{ if .HasChildren }}
-      <li class='learn-menu-item'>
-        <div class='learn-menu-title{{ if $currentPage.HasMenuCurrent "learn" . }} active{{ end }}' id="{{$index}}">
-          <img src="{{.Pre}}" width="26" height="26" alt="{{.Name}}" />
-          {{.Name}}
-        </div>
-        <ul class='learn-menu-sub {{ if $currentPage.HasMenuCurrent "learn" . }}menu-display{{ end }}' id="learn-menu-{{$index}}">
-          {{range .Children}} {{ $has := $currentPage.IsMenuCurrent "learn" . }}
-          <li class="learn-menu-sub-item {{if $has}}active{{end}}">
-            <a href="{{.URL}}">
-              {{ partial "docs-title" . }}
-            </a>
+      {{ range $index, $element := .Site.Menus.learn }}
+        {{ if .HasChildren }}
+          <li class='learn-menu-item'>
+            <div class='learn-menu-title{{ if $currentPage.HasMenuCurrent "learn" . }} active{{ end }}' id="{{ $index }}">
+              <img src="{{ .Pre }}" width="26" height="26" alt="{{ .Name }}" />
+              {{ .Name }}
+            </div>
+            <ul class='learn-menu-sub {{ if $currentPage.HasMenuCurrent "learn" . }}menu-display{{ end }}' id="learn-menu-{{ $index }}">
+              {{ range .Children }}
+                {{ $has := $currentPage.IsMenuCurrent "learn" . }}
+                <li class="learn-menu-sub-item {{ if $has }}active{{ end }}">
+                  <a href="{{ .URL }}">
+                    {{ partial "docs-title" . }}
+                  </a>
+                </li>
+              {{ end }}
+            </ul>
           </li>
-          {{end}}
-        </ul>
-      </li>
-      {{else}}
-      <li class="learn-menu-item" id="learn-menu-{{$index}}">
-        <div class="learn-menu-title">{{.Name}}</div>
-      </li>
-      {{end}} {{end}}
+        {{ else }}
+          <li class="learn-menu-item" id="learn-menu-{{ $index }}">
+            <div class="learn-menu-title">{{ .Name }}</div>
+          </li>
+        {{ end }}
+      {{ end }}
     </ul>
   </nav>
+
   <div class="learn-menu-mobile-right-space">
   </div>
 
   <!-- Restore menu position as soon as possible to avoid flickering -->
   <script>
     (function () {
-      var menu = document.querySelector('aside.learn-menu nav')
+      var menu = document.querySelector('aside.learn-menu nav');
       addEventListener('beforeunload', function () {
-        localStorage.setItem('menu.scrollTop', menu.scrollTop)
-      })
-      menu.scrollTop = localStorage.getItem('menu.scrollTop')
-    })()
+        localStorage.setItem('menu.scrollTop', menu.scrollTop);
+      });
+      menu.scrollTop = localStorage.getItem('menu.scrollTop');
+    })();
   </script>
-
-</aside>
-
-
+</aside>