From c0a1c9cbcb7331f7e9b6bc4d2936e84b6ab7f06f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Fri, 24 Feb 2023 23:29:33 +0100
Subject: [PATCH] menu: rebuild collapsible expander #466

because sizing and positioning was a mess;
the follwing things are fixed with this:
- resizes and positions correctly according to html elements font-size
- IE11 compatiblity is now given
- a11y: expander is now correctly given a focus outline
- chevron is now coded into html instead of a css content value, which makes it easier to change (was an issue in the past)
- the visited checkmark now breaks correctly on long lines and hides behind the text if necessary
- some more css classes were introduced to make further extensions (eg. nested shortcut links) easier
---
 .../content/basics/migration/_index.en.md     |   2 +
 layouts/partials/menu.html                    |  18 +-
 static/css/ie.css                             |  44 ++-
 static/css/nucleus.css                        |   3 +-
 static/css/theme-neon.css                     |  24 +-
 static/css/theme.css                          | 268 +++++++++---------
 static/css/variant.css                        |  14 +-
 static/js/theme.js                            |  12 +-
 8 files changed, 192 insertions(+), 193 deletions(-)

diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 9b439dae5b..e583b01dd4 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -20,6 +20,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 5.12.0 (not yet released)
 
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed (again). While Internet Explorer 11 has issues in displaying it, the functionality still works.
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for the great [VSCode Front Matter extension](https://github.com/estruyf/vscode-front-matter) which provides on-premise CMS capabilties to Hugo.
 
   The theme provides Front Matter snippets for its shortcodes. Currently only English and German is supported. Put a reference into your `frontmatter.json` like this
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index 73fddd0bdf..39f3927023 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -24,7 +24,7 @@
       </div>
       {{- end }}
       <div id="content-wrapper" class="highlightable">
-        <ul class="topics{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
+        <ul class="topics enlarge morespace{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
           {{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }}
           {{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }}
           {{- $defaultAlwaysopen := .Site.Params.alwaysopen | default false }}
@@ -42,15 +42,15 @@
         {{- $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle }}
         {{- with .Site.Menus.shortcuts }}
         <div id="shortcuts">
-          <div class="nav-title">{{ if not $disableShortcutsTitle }}{{ T "Shortcuts-Title" }}{{ end }}</div>
-          <ul>
+          <div class="nav-title padding">{{ if not $disableShortcutsTitle }}{{ T "Shortcuts-Title" }}{{ end }}</div>
+          <ul class="space">
             {{- range sort . "Weight" }}
               {{- $shortcut := . }}
               {{- with $page.Site.GetPage (printf "%s" $shortcut.URL ) }}
                 {{- $to := . }}
             <li>{{ $shortcut.Pre }}<a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $to) }}">{{ safeHTML $shortcut.Name }}</a>{{ $shortcut.Post }}</li>
               {{- else }}
-            <li>{{ $shortcut.Pre }}<a class="padding" href="{{ $shortcut.URL | relLangURL }}">{{ safeHTML $shortcut.Name }}</a>{{ $shortcut.Post }}</li>
+            <li>{{ $shortcut.Pre }}<a class="padding"href="{{ $shortcut.URL | relLangURL }}">{{ safeHTML $shortcut.Name }}</a>{{ $shortcut.Post }}</li>
               {{- end }}
             {{- end }}
           </ul>
@@ -62,8 +62,8 @@
         {{- $showvariantswitch := gt (int (len $themevariants)) 1 }}
         {{- $footer := partial "menu-footer.html" . }}
         {{- $showfooter := not (eq 0 (int (len ($footer | plainify)))) }}
-        <div class="footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}"></div>
-        <hr class="default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}">
+        <div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}"></div>
+        <hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}">
         <div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}">
           <ul>
             <li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
@@ -153,9 +153,9 @@
             {{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
             {{- $pageHash := md5 .Page }}
             {{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }}
-          <li data-nav-id="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" class="dd-item{{if $isActive }} active{{end}}{{if (or $isSelf $isAncestor) }} parent{{end}}{{if $currentAlwaysopen}} alwaysopen{{end}}">{{ if .Site.Params.collapsibleMenu }}<input type="checkbox" id="section-{{ $pageHash }}" aria-controls="subsections-{{ $pageHash }}" class="toggle"{{ if $isOpen }} checked{{ end }}><label class="a11y-only toggle" for="section-{{ $pageHash }}" >{{ T "Submenu" ( or .Params.menuTitle .LinkTitle .Title ) }}</label>{{ end }}<a href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
+          <li data-nav-id="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" class="{{if $isActive }}active {{end}}{{if (or $isSelf $isAncestor) }}parent {{end}}{{if $currentAlwaysopen}}alwaysopen{{end}}">{{ if .Site.Params.collapsibleMenu }}<input type="checkbox" id="section-{{ $pageHash }}" aria-controls="subsections-{{ $pageHash }}"{{ if $isOpen }} checked{{ end }}><label for="section-{{ $pageHash }}"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">{{ T "Submenu" ( or .Params.menuTitle .LinkTitle .Title ) }}</span></label>{{ end }}<a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
             {{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }}
-            {{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a><ul id="subsections-{{ $pageHash }}">
+            {{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a><ul id="subsections-{{ $pageHash }}" class="morespace{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
             {{- $defaultAlwaysopen := .Site.Params.alwaysopen | default true }}
             {{- if eq $currentOrdersectionsby "title" }}
               {{- range $pages.ByTitle }}
@@ -167,7 +167,7 @@
               {{- end }}
             {{- end }}</ul></li>
           {{- else }}
-          <li data-nav-id="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" class="dd-item{{if $isActive }} active{{end}}"><a href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
+          <li data-nav-id="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" class="{{if $isActive }}active{{end}}"><a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
               {{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }}
               {{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a></li>
           {{- end }}
diff --git a/static/css/ie.css b/static/css/ie.css
index 41caa30dd6..9fdf6b759a 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -31,14 +31,8 @@
 	#sidebar ul li.visited + span {
 		margin-right: 1rem;
 	}
-	#sidebar ul li li {
-		padding-left: 1rem;
-	}
 	#sidebar ul li .read-icon {
-		text-align: right;
-	}
-	html[dir="rtl"] #sidebar ul li .read-icon {
-		float: right;
+		right: 1rem;
 	}
 	#sidebar .nav-title {
 		padding-left: 1rem;
@@ -165,15 +159,6 @@
 	.footerVisitedLinks > * {
 		text-align: left;
 	}
-	#sidebar ul.collapsible-menu input.toggle {
-		left: 1rem;
-	}
-	#sidebar .collapsible-menu input.toggle:before {
-		margin-left: -1rem;
-	}
-	html[dir="rtl"] #sidebar .collapsible-menu input.toggle:before {
-		content: "\f054";
-	}
 	.searchform input {
 		margin-right: .5rem;
 	}
@@ -206,6 +191,17 @@
 	.autocomplete-suggestion > .context {
 		margin-left: 1em;
 	}
+	/* menu */
+	#sidebar ul ul {
+		padding-left: 1rem;
+	}
+	#sidebar ul.collapsible-menu > li > label {
+		left: 0;
+		padding-left: .125rem;
+	}
+	html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
+		transform: scaleX(1);
+	}
 
 	/* ----------------------------------------------- */
 	/* set default colors as in variant.css for IE11 */
@@ -264,7 +260,7 @@
 		opacity: .666;
 	}
 
-	#sidebar .collapsible-menu .toggle,
+	#sidebar .collapsible-menu label,
 	#sidebar .select-container,
 	#sidebar a,
 	#sidebar button {
@@ -272,28 +268,28 @@
 	}
 
 	#sidebar select:hover,
-	#sidebar .collapsible-menu .toggle:hover,
+	#sidebar .collapsible-menu label:hover,
 	#sidebar .select-container:hover,
 	#sidebar a:hover,
 	#sidebar button:hover {
 		color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
 	}
 
-	#sidebar ul.topics > li.parent,
-	#sidebar ul.topics > li.active {
+	#sidebar ul.enlarge > li.parent,
+	#sidebar ul.enlarge > li.active {
 		background-color: rgba( 0, 0, 0, .166 ); /* var(--MENU-SECTIONS-ACTIVE-BG-color) */
 	}
 
-	#sidebar ul.collapsible-menu li.active > .toggle,
-	#sidebar ul.topics li.active > a {
+	#sidebar li.active > label,
+	#sidebar li.active > a {
 		color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
 	}
 
-	#sidebar ul.topics li.active > a {
+	#sidebar li.active > a {
 		background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
 	}
 
-	#sidebar ul li.visited > a .read-icon {
+	#sidebar ul li > a .read-icon {
 		color: #486ac9; /* var(--MENU-VISITED-color) */
 	}
 
diff --git a/static/css/nucleus.css b/static/css/nucleus.css
index a4f49f0957..a61d1e3e0d 100644
--- a/static/css/nucleus.css
+++ b/static/css/nucleus.css
@@ -108,7 +108,8 @@ textarea {
   margin: 0; }
 
 button {
-  overflow: visible; }
+  overflow: visible;
+  padding: 0; }
 
 button,
 select {
diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css
index efd4b5c37e..e028aae545 100644
--- a/static/css/theme-neon.css
+++ b/static/css/theme-neon.css
@@ -172,17 +172,6 @@ body h6 {
         0 0 10px var(--INTERNAL-MAIN-TITLES-H5-color);
 }
 
-body #sidebar ul.collapsible-menu li.active > .toggle,
-body #sidebar ul.topics li.active > a {
-    color: #fff;
-    text-shadow:
-        0 0  1px #fff,
-        0 0  2px #fff,
-        0 0  8px #808080,
-        0 0  4px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color),
-        0 0  8px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
-}
-
 body #sidebar .searchbox button:hover,
 body .searchbox span:hover {
     color: #fff;
@@ -195,7 +184,7 @@ body .searchbox span:hover {
 }
 
 body #sidebar select:hover,
-body #sidebar .collapsible-menu .toggle:hover,
+body #sidebar .collapsible-menu label:hover,
 body #sidebar .select-container:hover,
 body #sidebar a:hover,
 body #sidebar button:hover {
@@ -208,6 +197,17 @@ body #sidebar button:hover {
         0 0  8px var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
 }
 
+body #sidebar li.active > label,
+body #sidebar li.active > a {
+    color: #fff;
+    text-shadow:
+        0 0  1px #fff,
+        0 0  2px #fff,
+        0 0  8px #808080,
+        0 0  4px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color),
+        0 0  8px var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
+}
+
 body #homelinks a:hover {
     color: #fff;
     text-shadow:
diff --git a/static/css/theme.css b/static/css/theme.css
index e4fd855ecd..e042a7bc83 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -149,60 +149,6 @@ dd {
     padding: 0 1rem;
 }
 
-#sidebar ul.topics {
-    margin: 0 1rem;
-}
-
-#sidebar ul.topics ul {
-    display: none;
-}
-
-#sidebar ul.topics li {
-    position: relative;
-}
-
-#sidebar ul.topics > li > ul > li:last-child {
-    padding-bottom: 1rem;
-}
-
-#sidebar ul.topics ul ul {
-    padding-bottom: 0;
-}
-
-#sidebar ul.topics li.parent > ul,
-#sidebar ul.topics li.active > ul,
-#sidebar ul.topics li.alwaysopen > ul {
-    display: block;
-}
-
-#sidebar ul.collapsible-menu > li > .toggle,
-#sidebar ul.topics > li > a {
-    font-size: 1.1rem;
-    line-height: 2rem;
-}
-
-#sidebar ul.topics > li > a b {
-    font-weight: 400;
-}
-
-#sidebar ul.topics > li > a .fa {
-    margin-top: .5rem;
-}
-
-#sidebar ul.topics > li {
-    margin-left: -1rem;
-    margin-right: -1rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
-#sidebar ul.topics li > a {
-    margin-left: -1rem;
-    margin-right: -1rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
 #sidebar ul {
     list-style: none;
     padding: 0;
@@ -217,47 +163,14 @@ dd {
     margin-inline-end: 1rem;
 }
 
-#sidebar ul li a,
-#sidebar ul li button {
-    display: block;
-    padding: .125rem 0;
-}
-
-#sidebar ul li a span {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-#sidebar ul li > a,
-#sidebar ul li > button {
-    padding: .25rem 0;
-}
-
-#sidebar ul li li {
-    padding-inline-start: 1rem;
-}
-
-#sidebar ul.topics > li > a .read-icon {
-    margin-top: .5rem;
-}
-
-#sidebar #shortcuts li {
-    list-style: none;
-    padding: .125rem 0;
-}
-
 #sidebar ul li .read-icon {
     display: none;
-    float: right;
     font-size: .8125rem;
+    inset-inline-end: 1rem;
     margin: .25rem 0 0 0;
     min-width: 1rem;
-    text-align: start;
-}
-html[dir="rtl"] #sidebar ul li .read-icon {
-    float: left;
+    position: absolute;
+    z-index: -1;
 }
 
 #sidebar ul li.visited > a .read-icon {
@@ -1507,50 +1420,6 @@ input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
 input[type="search"]::-webkit-search-results-decoration { display: none; }
 
-#sidebar ul.collapsible-menu input.toggle {
-    -webkit-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    height: 2rem;
-    inset-inline-start: 1rem;
-    padding-top: .35rem;
-    position: absolute;
-    width: 1px;
-}
-
-#sidebar ul.collapsible-menu > li > input.toggle {
-    padding-top: .25rem;
-}
-
-#sidebar .collapsible-menu input.toggle:before {
-    content: "\f054";
-    font-family: "Font Awesome 5 Free";
-    font-size: .8rem;
-    font-weight: 900;
-    margin-inline-start: -1rem;
-    padding-bottom: .65rem;
-    padding-left: .2rem;
-    padding-right: .2rem;
-    padding-top: .6rem;
-}
-html[dir="rtl"] #sidebar .collapsible-menu input.toggle:before {
-    content: "\f053";
-}
-
-html[dir] #sidebar .collapsible-menu input.toggle:checked:before {
-    content: "\f078";
-    padding-left: .1rem;
-    padding-right: .1rem;
-}
-
-#sidebar .collapsible-menu input.toggle + label.toggle + a + ul {
-    display: none;
-}
-
-#sidebar .collapsible-menu input.toggle:checked + label.toggle + a + ul {
-	display: inline;
-}
-
 .math.align-left > mjx-container{
     text-align: left !important;
 }
@@ -1781,3 +1650,134 @@ article ul li input[type="checkbox"]:checked::before {
     overflow: auto;
     padding: min(2vh, 2vw);
 }
+
+/* basic menu list styles (non-collapsible) */
+
+#sidebar ul > li > a {
+    display: block;
+    position: relative;
+}
+
+#sidebar ul.space > li > * {
+    padding-bottom: .125rem;
+    padding-top: .125rem;
+}
+#sidebar ul.space > li > ul {
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+#sidebar ul.morespace > li > * {
+    padding-bottom: .25rem;
+    padding-top: .25rem;
+}
+#sidebar ul.morespace > li > ul {
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+#sidebar ul.enlarge > li > a {
+    font-size: 1.1rem;
+    line-height: 2rem;
+}
+#sidebar ul.enlarge > li > a > .read-icon {
+    margin-top: .5rem;
+}
+#sidebar ul.enlarge > li > ul > li:last-child {
+    padding-bottom: 1rem;
+}
+
+#sidebar ul ul {
+    padding-inline-start: 1rem;
+}
+
+/* collapsible menu style overrides */
+
+#sidebar ul.collapsible-menu > li {
+    position: relative;
+}
+
+#sidebar ul.collapsible-menu > li > input {
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    display: inline-block;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: .65rem;
+    position: absolute;
+    width: 1rem;
+    z-index: 1;
+}
+#sidebar ul.collapsible-menu.enlarge > li > input {
+    margin-top: .9rem;
+}
+
+#sidebar ul.collapsible-menu > li > label {
+    cursor: pointer;
+    display: inline-block;
+    inset-inline-start: 0;
+    margin-bottom: 0; /* nucleus */
+    padding-inline-start: .125rem;
+    position: absolute;
+    width: 1rem;
+    z-index: 2;
+}
+#sidebar ul.collapsible-menu.enlarge > li > label {
+    font-size: 1.1rem;
+    line-height: 2rem;
+}
+
+#sidebar ul.collapsible-menu > li > label:after {
+    content: "";
+    display: block;
+    height: 1px;
+    transition: width 0.5s ease;
+    width: 0%;
+}
+
+#sidebar ul.collapsible-menu > li > label:hover:after {
+    width: 100%;
+}
+
+#sidebar ul.collapsible-menu > li > label > .fas {
+    font-size: .8rem;
+    width: .6rem;
+}
+
+#sidebar ul.collapsible-menu > li > a {
+    display: inline-block;
+    width: 100%;
+}
+
+/* closed menu */
+
+#sidebar ul.collapsible-menu > li > input + label ~ ul {
+    display: none;
+}
+
+#sidebar ul.collapsible-menu > li > input + label > .fa-chevron-down {
+    display: none;
+}
+#sidebar ul.collapsible-menu > li > input + label > .fa-chevron-right {
+    display: inline-block;
+}
+
+/* open menu  */
+
+#sidebar ul.collapsible-menu > li > input:checked + label ~ ul {
+	display: block;
+}
+
+#sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-down {
+    display: inline-block;
+}
+#sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-right {
+    display: none;
+}
+
+/* adjust menu for RTL reading direction */
+
+html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
+    transform: scaleX(-1);
+}
diff --git a/static/css/variant.css b/static/css/variant.css
index ea8d9c01ec..2c6da2316b 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -150,7 +150,7 @@ a:hover,
     color: var(--INTERNAL-MENU-SEARCH-color);
 }
 
-#sidebar .collapsible-menu .toggle,
+#sidebar .collapsible-menu label,
 #sidebar .select-container,
 #sidebar a,
 #sidebar button {
@@ -158,24 +158,24 @@ a:hover,
 }
 
 #sidebar select:hover,
-#sidebar .collapsible-menu .toggle:hover,
+#sidebar .collapsible-menu label:hover,
 #sidebar .select-container:hover,
 #sidebar a:hover,
 #sidebar button:hover {
     color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
 }
 
-#sidebar ul.topics > li.parent,
-#sidebar ul.topics > li.active {
+#sidebar ul.enlarge > li.parent,
+#sidebar ul.enlarge > li.active {
     background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
 }
 
-#sidebar ul.collapsible-menu li.active > .toggle,
-#sidebar ul.topics li.active > a {
+#sidebar li.active > label,
+#sidebar li.active > a {
     color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
 }
 
-#sidebar ul.topics li.active > a {
+#sidebar li.active > a {
     background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
 }
 
diff --git a/static/js/theme.js b/static/js/theme.js
index 3b934fd40c..d79243772a 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -550,7 +550,7 @@ function initMenuScrollbar(){
     });
     // now that we may have collapsible menus, we need to call a resize
     // for the menu scrollbar if sections are expanded/collapsed
-    document.querySelectorAll('#sidebar .collapsible-menu input.toggle').forEach( function(e){
+    document.querySelectorAll('#sidebar .collapsible-menu input').forEach( function(e){
         e.addEventListener('change', function(){
             psm && setTimeout( function(){ psm.update(); }, 10 );
         });
@@ -828,7 +828,7 @@ function initScrollPositionSaver(){
 function scrollToPositions() {
     // show active menu entry
     window.setTimeout( function(){
-        var e = document.querySelector( '#sidebar ul.topics li.active a' );
+        var e = document.querySelector( '#sidebar li.active a' );
         if( e && e.scrollIntoView ){
             e.scrollIntoView({
                 block: 'center',
@@ -910,8 +910,8 @@ function mark() {
 					expandInputs[0].checked = true;
 				}
 			}
-			if( parent.tagName.toLowerCase() === 'li' ){
-				var toggleInputs = parent.querySelectorAll( 'input.toggle:not(.menu-marked)' );
+			if( parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains( 'collapsible-menu' )){
+				var toggleInputs = parent.querySelectorAll( 'input:not(.menu-marked)' );
 				if( toggleInputs.length ){
 					toggleInputs[0].classList.add( 'menu-marked' );
 					toggleInputs[0].dataset.checked = toggleInputs[0].checked ? 'true' : 'false';
@@ -987,8 +987,8 @@ function unmark() {
 	for( var i = 0; i < markedElements.length; i++ ){
 		var parent = markedElements[i].parentNode;
 		while( parent && parent.classList ){
-			if( parent.tagName.toLowerCase() === 'li' ){
-				var toggleInputs = parent.querySelectorAll( 'input.toggle.menu-marked' );
+			if( parent.tagName.toLowerCase() === 'li' && parent.parentNode && parent.parentNode.tagName.toLowerCase() === 'ul' && parent.parentNode.classList.contains( 'collapsible-menu' )){
+				var toggleInputs = parent.querySelectorAll( 'input.menu-marked' );
 				if( toggleInputs.length ){
 					toggleInputs[0].checked = toggleInputs[0].dataset.checked === 'true';
 					toggleInputs[0].dataset.checked = null;