From 626841a16c04a62cf89132c78f776c03734996f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Tue, 12 Sep 2023 23:09:14 +0200
Subject: [PATCH] topbar: modularize left sided buttons #639

---
 layouts/partials/header.html        | 166 +++++++++++++++-------------
 layouts/partials/topbar-button.html |  16 +--
 static/css/format-print.css         |  21 ++--
 static/css/ie.css                   |  38 ++++---
 static/css/theme.css                |  83 ++++++++------
 static/css/variant.css              |   8 +-
 static/js/theme.js                  |  12 +-
 7 files changed, 178 insertions(+), 166 deletions(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 25c99c2eeb..d7b34caa63 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -69,88 +69,100 @@
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
-      <nav id="topbar" class="highlightable">
+      <nav id="topbar">
         <div>
-        {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
-        {{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
-          {{- $startarrow := "🡐" }}
-          {{- $endarrow := "🡒" }}
-          {{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
-            {{- $startarrow = "🡒" }}
-            {{- $endarrow = "🡐" }}
-          {{- end }}
-          {{- $ispublished := true }}
-          {{- with .Parent }}
-            {{- $ispublished = gt (int (len .Permalink)) 0 }}
-          {{- end }}
-          {{- $next := "" }}
-          {{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }}
-          {{- else }}
-            {{- $next = $.Scratch.Get "relearnNextPage" }}
-          {{- end }}
-          {{- partial "topbar-button.html" (dict
-            "page" $page
-            "class" "topbar-next"
-            "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $next))
-            "icon" "chevron-right"
-            "title" (printf "%s (%s)" ($next | default $page).Title ($endarrow | safeHTML))
-          )}}
-          {{- $prev := "" }}
-          {{- if and (eq .RelPermalink .Site.Home.RelPermalink) (eq $outputFormat "html") }}
-          {{- else if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
-            {{- $prev = .Site.Home }}
-          {{- else }}
-            {{- $prev = $.Scratch.Get "relearnPrevPage" }}
-          {{- end}}
-          {{- partial "topbar-button.html" (dict
-            "page" $page
-            "class" "topbar-prev"
-            "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $prev))
-            "icon" "chevron-left"
-            "title" (printf "%s (%s)" ($prev | default $page).Title ($startarrow | safeHTML))
-          )}}
-        {{- end }}
-        {{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }}
-          {{- partial "topbar-button.html" (dict
-            "page" $page
-            "class" "topbar-print"
-            "href" .RelPermalink
-            "icon" "print"
-            "title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
-          )}}
-        {{- end -}}
-        {{- with and (eq $outputFormat "html") .Site.Params.editURL $.File }}
-          {{- partial "topbar-button.html" (dict
-            "page" $page
-            "class" "topbar-edit"
-            "href" (printf "%s%s%s" $.Site.Params.editURL (strings.TrimLeft "/" (replace .Dir "\\" "/")) .LogicalName)
-            "icon" "pen"
-            "title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
-          )}}
-        {{- end }}
-        {{- $defaultDisableToc := .Site.Params.disableToc | default false }}
-        {{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
-        {{- $toc_content := partial "toc.html" . }}
-        {{- $hastoc := not (eq 0 (int (len (trim ($toc_content | plainify) "\n\t ")))) }}
-        {{- $toc := and $hastoc (not $currentDisableToc) (eq $outputFormat "html") }}
-          <div id="breadcrumbs">
-            <span id="sidebar-toggle-span">
-              <a href="#" id="sidebar-toggle" title='{{ T "Navigation-toggle" }} (CTRL+ALT+n)'><i class="fas fa-bars fa-fw"></i></a>
-            </span>
-          {{- if $toc }}
-            <span id="toc-menu" title='{{ T "Toc-toggle" }} (CTRL+ALT+t)'><i class="fas fa-list-alt fa-fw"></i></span>
-          {{- end }}
-          {{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
-          {{- if $showBreadcrumb }}
-            <ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
+          <span class="topbar-right">
+            {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
+            {{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
+              {{- $startarrow := "🡐" }}
+              {{- $endarrow := "🡒" }}
+              {{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
+                {{- $startarrow = "🡒" }}
+                {{- $endarrow = "🡐" }}
+              {{- end }}
+              {{- $ispublished := true }}
+              {{- with .Parent }}
+                {{- $ispublished = gt (int (len .Permalink)) 0 }}
+              {{- end }}
+              {{- $next := "" }}
+              {{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }}
+              {{- else }}
+                {{- $next = $.Scratch.Get "relearnNextPage" }}
+              {{- end }}
+              {{- partial "topbar-button.html" (dict
+                "page" $page
+                "class" "topbar-next"
+                "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $next))
+                "icon" "chevron-right"
+                "title" (printf "%s (%s)" ($next | default $page).Title ($endarrow | safeHTML))
+              )}}
+              {{- $prev := "" }}
+              {{- if and (eq .RelPermalink .Site.Home.RelPermalink) (eq $outputFormat "html") }}
+              {{- else if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
+                {{- $prev = .Site.Home }}
+              {{- else }}
+                {{- $prev = $.Scratch.Get "relearnPrevPage" }}
+              {{- end}}
+              {{- partial "topbar-button.html" (dict
+                "page" $page
+                "class" "topbar-prev"
+                "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $prev))
+                "icon" "chevron-left"
+                "title" (printf "%s (%s)" ($prev | default $page).Title ($startarrow | safeHTML))
+              )}}
+            {{- end }}
+            {{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }}
+              {{- partial "topbar-button.html" (dict
+                "page" $page
+                "class" "topbar-print"
+                "href" .RelPermalink
+                "icon" "print"
+                "title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
+              )}}
+            {{- end -}}
+            {{- with and (eq $outputFormat "html") .Site.Params.editURL $.File }}
+              {{- partial "topbar-button.html" (dict
+                "page" $page
+                "class" "topbar-edit"
+                "href" (printf "%s%s%s" $.Site.Params.editURL (strings.TrimLeft "/" (replace .Dir "\\" "/")) .LogicalName)
+                "icon" "pen"
+                "title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
+              )}}
+            {{- end }}
+          </span>
+          <span class="topbar-left">
+            {{- partial "topbar-button.html" (dict
+              "page" $page
+              "class" "topbar-sidebar"
+              "href" "javascript:showNav()"
+              "icon" "bars"
+              "title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
+            )}}
+            {{- $defaultDisableToc := .Site.Params.disableToc | default false }}
+            {{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
+            {{- $toc_content := partial "toc.html" . }}
+            {{- $hastoc := not (eq 0 (int (len (trim ($toc_content | plainify) "\n\t ")))) }}
+            {{- $toc := and $hastoc (not $currentDisableToc) (eq $outputFormat "html") }}
+            {{- if $toc }}
+              {{- partial "topbar-button.html" (dict
+                "page" $page
+                "class" "topbar-toc"
+                "href" "javascript:showToc()"
+                "icon" "list-alt"
+                "title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
+              )}}
+            {{- end }}
+            {{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
+            {{- if $showBreadcrumb }}
+            <ol class="breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
               {{- template "breadcrumb" dict "page" . "to" . }}
             </ol>
-          {{- else }}
-            <span class="links">
+            {{- else }}
+            <span class="breadcrumbs highlightable">
               {{ .Title }}
             </span>
-          {{- end }}
-          </div>
+            {{- end }}
+          </span>
         {{- if $toc }}
 {{ $toc_content }}
         {{- end }}
diff --git a/layouts/partials/topbar-button.html b/layouts/partials/topbar-button.html
index 764a7f026e..364983641a 100644
--- a/layouts/partials/topbar-button.html
+++ b/layouts/partials/topbar-button.html
@@ -22,20 +22,20 @@
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}
-<div class="topbar-button {{ $class }}">
+            <div class="topbar-button {{ $class }}">
 {{- if $isDisabled }}
 	<span>
 {{- else if $isButton }}
-	<button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
+              <button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
 {{- else }}
-	<a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
+              <a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
 {{- end }}
-	  	<i class="{{ $icon }}"></i>
+                <i class="{{ $icon }}"></i>
 {{- if $isDisabled }}
-	</span>
+              </span>
 {{- else if $isButton }}
-	</button>
+              </button>
 {{- else }}
-	</a>
+              </a>
 {{- end }}
-</div>
\ No newline at end of file
+            </div>
\ No newline at end of file
diff --git a/static/css/format-print.css b/static/css/format-print.css
index 88fd3f4068..ffa880ed7f 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -39,10 +39,10 @@ pre {
     /* we don't need this while printing */
     display: none;
 }
-#body #breadcrumbs {
+#body .topbar-left {
     width: 100%;
 }
-#body #breadcrumbs .links {
+#body .topbar-left .breadcrumbs {
     overflow-x: hidden;
     visibility: visible;
 }
@@ -120,17 +120,6 @@ body,
     put as HTML into markdown */
     text-decoration-line: underline;
 }
-#toc-menu {
-    /* we don't need this while printing */
-    display: none;
-}
-#body #sidebar-toggle-span {
-    /* we don't need this while printing */
-    display: none;
-}
-#breadcrumbs .links {
-    display: inline;
-}
 #topbar{
     /* the header is sticky which is not suitable for print; */
     position: inherit; /* IE11 doesn't know "initial" here */
@@ -138,6 +127,12 @@ body,
 #topbar > div {
     background-color: rgba( 255, 255, 255, 1 ); /* IE11 doesn't know "initial" here */
 }
+#body .topbar-left {
+    border-width: 0;
+}
+.topbar-left .breadcrumbs {
+    display: inline;
+}
 .tags {
     display: none;
 }
diff --git a/static/css/ie.css b/static/css/ie.css
index c1a4bab005..d4abd1246a 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -70,27 +70,29 @@
 		border-top-right-radius: 0;
 		border-right-width: 0;
 	}
-	html[dir="rtl"] .topbar-button {
+	html[dir="rtl"] .topbar-right .topbar-button {
 		float: right;
 	}
-	.topbar-button > * {
+	html[dir="rtl"] .topbar-left .topbar-button {
+		float: left;
+	}
+	.topbar-right .topbar-button > * {
 		border-left: thin solid rgba( 134, 134, 134, .333 );
 	}
+	.topbar-left .topbar-button > * {
+		border-right: thin solid rgba( 134, 134, 134, .333 );
+	}
+	#body .topbar-left {
+		border-left-style: solid;
+		border-left-width: 1px;
+	}
+	html[dir="rtl"] #body .topbar-left {
+		float: left;
+	}
 	html[dir="rtl"] .topbar-prev i,
 	html[dir="rtl"] .topbar-next i {
 		transform: scaleX(1);
 	}
-	#toc-menu,
-	#sidebar-toggle-span {
-		border-right: thin solid rgba( 134, 134, 134, .333 );
-	}
-	#body #breadcrumbs {
-		border-left-style: solid;
-		border-left-width: 1px;
-	}
-	html[dir="rtl"] #body #breadcrumbs {
-		float: left;
-	}
 	.progress {
 		left: 1rem;
 	}
@@ -228,23 +230,23 @@
 
 	a,
 	.anchor,
-	#toc-menu,
+	.topbar-button button,
 	#searchresults .autocomplete-suggestion {
 		color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */
 	}
 
-	#body #breadcrumbs {
+	#body .topbar-left {
 		border-left-color: transparent; /* var(--MENU-TOPBAR-SEPARATOR-color) */
 	}
 	@media screen and (max-width: 48rem) {
-		#body #breadcrumbs {
+		#body .topbar-left {
 			border-left-color: transparent;
 		}
 	}
 
 	a:hover,
 	.anchor:hover,
-	#toc-menu:hover {
+	.topbar-button button:hover {
 		color: rgba( 32, 40, 145, 1 ); /* var(--MAIN-LINK-HOVER-color) */
 	}
 
@@ -526,7 +528,7 @@
 		background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
 	}
 
-	#body #breadcrumbs {
+	#body .topbar-left {
 		border-left-color: rgba( 125, 201, 3, 1 ); /* var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color) */
 	}
 
diff --git a/static/css/theme.css b/static/css/theme.css
index 834a658966..97b5d08ddb 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -395,12 +395,12 @@ dd {
     }
 }
 
-.links a:hover,
-.links a:active,
-.links a:focus,
-.links a:hover *,
-.links a:active *,
-.links a:focus *,
+.breadcrumbs a:hover,
+.breadcrumbs a:active,
+.breadcrumbs a:focus,
+.breadcrumbs a:hover *,
+.breadcrumbs a:active *,
+.breadcrumbs a:focus *,
 .toc-wrapper a:hover,
 .toc-wrapper a:active,
 .toc-wrapper a:focus,
@@ -982,44 +982,49 @@ td {
 
 .topbar-button {
     display: block;
-    float: right;
     position: relative;
+}
+.topbar-right .topbar-button {
+    float: right;
     top: 50%;
     transform: translateY(-50%);
 }
-html[dir="rtl"] .topbar-button {
+html[dir="rtl"] .topbar-right .topbar-button {
     float: left;
 }
+.topbar-left .topbar-button {
+    float: left;
+}
+html[dir="rtl"] .topbar-left .topbar-button {
+    float: right;
+}
 
 .topbar-button > * {
-    border-inline-start: thin solid rgba( 134, 134, 134, .333 );
+    display: inline-block;
     padding-left: 1rem;
     padding-right: 1rem;
 }
-html[dir="rtl"] .topbar-prev i,
-html[dir="rtl"] .topbar-next i {
-    transform: scaleX(-1);
+.topbar-right .topbar-button > * {
+    border-inline-start: thin solid rgba( 134, 134, 134, .333 );
 }
+.topbar-left .topbar-button > * {
+    border-inline-end: thin solid rgba( 134, 134, 134, .333 );
+}
+
 .topbar-button span i{
     color: rgba( 134, 134, 134, .333 );
 }
-
-#toc-menu{
-    cursor: pointer;
-}
-#toc-menu,
-#sidebar-toggle-span {
-    border-inline-end: thin solid rgba( 134, 134, 134, .333 );
-    padding-left: 1rem;
-    padding-right: 1rem;
+.topbar-button button{
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
 }
 
-#body #breadcrumbs {
+#body .topbar-left {
     border-inline-start-style: solid;
     border-inline-start-width: 1px;
     float: left;
     height: auto;
-    line-height: 1.2;
     margin-bottom: 0;
     overflow: hidden;
     position: relative;
@@ -1029,55 +1034,61 @@ html[dir="rtl"] .topbar-next i {
     white-space: nowrap;
     width: calc(100% - 5*3.25rem);
 }
-html[dir="rtl"] #body #breadcrumbs {
+html[dir="rtl"] #body .topbar-left {
     float: right;
 }
 @media screen and (max-width: 48rem) {
-    #body #breadcrumbs {
+    #body .topbar-left {
         border-inline-start-color: transparent;
         text-overflow: unset;
     }
 }
 
-#sidebar-toggle-span {
+html[dir="rtl"] .topbar-prev i,
+html[dir="rtl"] .topbar-next i {
+    transform: scaleX(-1);
+}
+.topbar-sidebar {
     display: none;
 }
+
 .progress {
     inset-inline-start: 1rem;
     top: 1rem;
 }
 @media screen and (max-width: 48rem) {
-    .mobile-support #sidebar-toggle-span {
-        display: inline;
+    .mobile-support .topbar-sidebar {
+        display: block;
     }
     .progress {
         inset-inline-start: 4.25rem;
     }
 }
 
-#body #breadcrumbs .links {
+#body .topbar-left .breadcrumbs {
     display: inline;
-    padding: 0 .75rem;
+    line-height: 1.2;
+    padding: 0 1rem;
 }
 @media screen and (max-width: 48rem) {
-    #body #breadcrumbs .links {
+    #body .topbar-left .breadcrumbs {
         /* we just hide the breadcrumbs instead of display: none;
         this makes sure that the breadcrumbs are still usable for
         accessability */
-        visibility: hidden;
+        margin-left: -1000px;
     }
 }
 
-#body #breadcrumbs .links * {
+#body .topbar-left .breadcrumbs * {
     display: inline-block;
     padding: 0;
 }
 
-#body #breadcrumbs .links meta {
+#body .topbar-left .breadcrumbs meta {
     display: none;
 }
 
-#body #breadcrumbs .links li:last-of-type {
+#body .topbar-left .breadcrumbs li:last-of-type {
     cursor: text;
 }
 
@@ -1583,7 +1594,7 @@ html[dir="rtl"] .menu-control span {
 }
 
 @media screen and (max-width: 48rem) {
-    #breadcrumbs .links {
+    .topbar-left .breadcrumbs {
         display: none;
     }
 }
diff --git a/static/css/variant.css b/static/css/variant.css
index 26387dc064..4f3669fb76 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -12,14 +12,14 @@ body {
 
 a,
 .anchor,
-#toc-menu,
+.topbar-button button,
 #searchresults .autocomplete-suggestion {
     color: var(--INTERNAL-MAIN-LINK-color);
 }
 
 a:hover,
 .anchor:hover,
-#toc-menu:hover {
+.topbar-button button:hover {
     color: var(--INTERNAL-MAIN-LINK-HOVER-color);
 }
 
@@ -253,11 +253,11 @@ table {
     background-color: var(--INTERNAL-MAIN-BG-color);
 }
 
-#body #breadcrumbs {
+#body .topbar-left {
     border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color);
 }
 @media screen and (max-width: 48rem) {
-    #body #breadcrumbs {
+    #body .topbar-left {
         border-inline-start-color: transparent;
     }
 }
diff --git a/static/js/theme.js b/static/js/theme.js
index a17927237d..5aae4a9c97 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -886,7 +886,7 @@ function showNav(){
 }
 
 function showToc(){
-    var t = document.querySelector( '#toc-menu' );
+    var t = document.querySelector( '.topbar-toc' );
     if( !t ){
         // we may not have a toc
         return;
@@ -941,13 +941,10 @@ function initToc(){
     document.addEventListener( 'keydown', tocShortcutHandler );
 
     document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav );
-    document.querySelector( '#sidebar-toggle' ).addEventListener( 'click', showNav );
     document.querySelector( '#toc-overlay' ).addEventListener( 'click', showToc );
-    var t = document.querySelector( '#toc-menu' );
     var p = document.querySelector( '.progress' );
-    if( t && p ){
+    if( p ){
         // we may not have a toc
-        t.addEventListener( 'click', showToc );
         p.addEventListener( 'click', showToc );
     }
 
@@ -1116,11 +1113,6 @@ function scrollToPositions() {
 
 function mark() {
 	// mark some additional stuff as searchable
-	var topbarLinks = document.querySelectorAll( '#topbar :not(.topbar-button) a' );
-	for( var i = 0; i < topbarLinks.length; i++ ){
-		topbarLinks[i].classList.add( 'highlight' );
-	}
-
 	var bodyInnerLinks = document.querySelectorAll( '#body-inner a:not(.lightbox-link):not(.btn):not(.lightbox-back)' );
 	for( var i = 0; i < bodyInnerLinks.length; i++ ){
 		bodyInnerLinks[i].classList.add( 'highlight' );