From dcb29c9d014cf7eadf087c948723030f3f3e555f Mon Sep 17 00:00:00 2001
From: Laura Perry <10005215+lperry25@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:03:07 +0100
Subject: [PATCH 1/6] create a poc for a Vespa version select in the
 documentation

---
 _data/sidebar.yml      |  1 +
 _includes/navbar.html  | 65 ++++++++++++++++++++++++++++++++++++++++++
 _includes/sidebar.html | 18 ++++++++----
 3 files changed, 78 insertions(+), 6 deletions(-)

diff --git a/_data/sidebar.yml b/_data/sidebar.yml
index b3b157811b..9a757a02c0 100644
--- a/_data/sidebar.yml
+++ b/_data/sidebar.yml
@@ -301,6 +301,7 @@ docs:
         url: /en/operations/tools.html
 
   - title: Operations - selfhosted
+    version: selfhosted
     documents:
       - page: Multinode Systems
         url: /en/operations-selfhosted/multinode-systems.html
diff --git a/_includes/navbar.html b/_includes/navbar.html
index f36f1d3926..6d5b8d930a 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -1,10 +1,75 @@
 <!-- Copyright Vespa.ai. All rights reserved.. -->
+<script>
+
+	function setVersionParam(version) {
+		const currentUrl = new URL(window.location.href);  // Get the current URL
+		const urlParams = new URLSearchParams(currentUrl.search);
+		urlParams.set('version', version);  // Set or update the query parameter
+		currentUrl.search = urlParams.toString();
+		window.history.pushState({}, '', currentUrl);
+	}
+
+	function hideElements(version){
+		const hiddenElements = document.querySelector(`.version-${version}`);
+		if (hiddenElements){
+			hiddenElements.style.display = 'none';  
+		}
+	}
+
+	function showElements(version){
+		const hiddenElements = document.querySelector(`.version-${version}`);
+		if (hiddenElements){
+			hiddenElements.style.display = 'block';  
+		}
+	}
+	
+	function handleCurrentVersion(currentVersion){
+        localStorage.setItem('version', currentVersion);
+		if (currentVersion === 'cloud'){
+			hideElements('selfhosted');
+			showElements('cloud');
+		} else if (currentVersion === 'selfhosted'){
+			hideElements('cloud');
+			showElements('selfhosted')
+		}
+	}
+	function selectVersion(version) {
+		setVersionParam(version);
+		handleCurrentVersion(version);
+	}
+
+	document.addEventListener('DOMContentLoaded', function() {
+        console.log('loaded')
+		const currentUrl = new URL(window.location.href); 
+		const urlParams = new URLSearchParams(currentUrl.search);
+		let currentVersion = urlParams.get('version');
+        if (!currentVersion) {
+            currentVersion = localStorage.getItem('version');
+            setVersionParam(currentVersion);
+        }
+		
+		if(currentVersion){
+			document.getElementById('docs-version').value = currentVersion;
+			handleCurrentVersion(currentVersion);
+		}
+
+		document.getElementById('docs-version').addEventListener('change', function() {
+			const selectedValue = this.value;
+			selectVersion(selectedValue);
+		});
+	});
+	
+</script>
 <!-- Navbar -->
 <nav class="nav sticky-top {{include.class}}">
     <div class="nav-left">
         <span class="nav-item hide-small-desktop-up" onclick="toggleMenu()"><i class="d-icon d-menu-hamburger"></i></span>
         <a href="https://docs.vespa.ai/">
             <img class="nav-brand" src="{{ site.baseurl }}/assets/logos/{{include.logo}}" alt="Vespa logo"/></a>
+            <select id="docs-version" style="width: 80%; padding: 10px 5px; margin-top: -7px; font-size: 1.6rem;">
+                <option value="cloud">Vespa Cloud</option>
+                <option value="selfhosted">Vespa Self-hosted</option>
+            </select>
     </div>
 
     <div  id="navMenu" class="nav-responsive">
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 69b6d2939e..272297a720 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,20 +1,22 @@
 <!-- Copyright Vespa.ai. All rights reserved. -->
 
-<div class="tabs is-primary is-vertical">
-  <ul class="p-b-10">
-    <li class="collapse-all tabs__section-header" onclick="expandAllItems();">[+] expand all</li>
+
+<div class="tabs is-primary is-vertical p-t-35">
+  <ul class="p-b-0">
+    <li class="collapse-all tabs__section-header" onclick="expandAllItems();" id="collapse-all"><span class="d-icon d-add-circle" style="font-size: 16px; max-width: 20px; padding-left: 0"></span>expand all</li>
+	<li class="collapse-all tabs__section-header hide" onclick="collapseAllItems();" id="expand-all"><span class="d-icon d-minus-circle" style="font-size: 16px; max-width: 20px; padding-left: 0"></span>collapse all</li>
   </ul>
   {% if site.data.sidebar.docs[0] %}
     {% for section in site.data.sidebar.docs %}
-      <ul class="p-b-0">
+      <ul class="p-b-0{% if section.version %} version-{{ section.version }} {% endif %}">
         <li class="collapse-parent tabs__section-header" onclick="toggleCollapse(this);">{{ section.title }}</li>
         {% if section.documents[0] %}
           {% for entry in section.documents %}
             {% if entry.sidebar_exclude != true %}
               {% if entry.url == page.url %}
-                <li class="m-l-10 collapsable active"><b><a href="{{ entry.url }}">{{ entry.page }}</a></b></li>
+                <li class="m-l-10 collapsable active{% if section.version %} version-{{ section.version }} {% endif %}"><b><a href="{{ entry.url }}">{{ entry.page }}</a></b></li>
               {% else %}
-                <li class="m-l-10 collapsable"><a href="{{ entry.url }}">{{ entry.page }}</a></li>
+                <li class="m-l-10 collapsable{% if section.version %} version-{{ section.version }} {% endif %}"><a href="{{ entry.url }}">{{ entry.page }}</a></li>
               {% endif %}
             {% endif%}
           {% endfor %}
@@ -32,12 +34,16 @@
 	}
 
 	function collapseAllItems() {
+		document.getElementById('collapse-all').classList.remove('hide');
+		document.getElementById('expand-all').classList.add('hide');
 		for (const item of document.getElementsByClassName("collapsable")) {
 			item.classList.add("collapsed");
 		}
 	}
 
 	function expandAllItems() {
+		document.getElementById('collapse-all').classList.add('hide');
+		document.getElementById('expand-all').classList.remove('hide');
 		for (const item of document.getElementsByClassName("collapsable")) {
 			item.classList.remove("collapsed");
 		}

From a498445ccdf93446542fa6baa1e65820bc285c47 Mon Sep 17 00:00:00 2001
From: Laura Perry <10005215+lperry25@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:12:34 +0100
Subject: [PATCH 2/6] only scroll the sidebar into view if the topic is not
 already in view

---
 _includes/sidebar.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 272297a720..c0dc313b5e 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -30,7 +30,7 @@
 	function initSidebar() {
 		collapseAllItems();
 		expandActiveSection();
-		scrollSidebar();
+		scrollSidebar(); // I really do not like this behaviour
 	}
 
 	function collapseAllItems() {
@@ -74,7 +74,14 @@
 	function scrollSidebar() {
 		const activeElement = document.getElementsByClassName("active")[0];
 		if (typeof(activeElement) !== "undefined") {
-			activeElement.parentElement.scrollIntoView();
+			const rect = activeElement.getBoundingClientRect();
+    		const isInViewport = rect.top >= 0 && rect.left >= 0 
+			&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) 
+			&& rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+			if (!isInViewport){
+				activeElement.parentElement.scrollIntoView();
+			}
 		}
 	}
 

From 70013373e7c54b19a1559b662eb4c188c989763a Mon Sep 17 00:00:00 2001
From: Laura Perry <10005215+lperry25@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:19:47 +0100
Subject: [PATCH 3/6] I do not mind the scrollling behaviour now that I fixed
 it

---
 _includes/sidebar.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index c0dc313b5e..ca23a2adf0 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -30,7 +30,7 @@
 	function initSidebar() {
 		collapseAllItems();
 		expandActiveSection();
-		scrollSidebar(); // I really do not like this behaviour
+		scrollSidebar(); 
 	}
 
 	function collapseAllItems() {

From 0648e4838ae895f557cb5317fe338497d3324f09 Mon Sep 17 00:00:00 2001
From: Laura Perry <10005215+lperry25@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:24:44 +0100
Subject: [PATCH 4/6] remove console log

---
 Gemfile.lock          | 3 +--
 _includes/navbar.html | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index e918129b80..e7d40b6956 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -2,7 +2,7 @@ GEM
   remote: https://rubygems.org/
   specs:
     Ascii85 (1.1.1)
-    activesupport (8.0.0)
+    activesupport (7.2.2.1)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -14,7 +14,6 @@ GEM
       minitest (>= 5.1)
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
-      uri (>= 0.13.1)
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     afm (0.2.2)
diff --git a/_includes/navbar.html b/_includes/navbar.html
index 6d5b8d930a..34c558b9fc 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -39,7 +39,6 @@
 	}
 
 	document.addEventListener('DOMContentLoaded', function() {
-        console.log('loaded')
 		const currentUrl = new URL(window.location.href); 
 		const urlParams = new URLSearchParams(currentUrl.search);
 		let currentVersion = urlParams.get('version');

From 2136abf50c532fa1ac3fc25885eb5d14b38b0c39 Mon Sep 17 00:00:00 2001
From: Laura Perry <10005215+lperry25@users.noreply.github.com>
Date: Fri, 20 Dec 2024 11:03:56 +0100
Subject: [PATCH 5/6] rename version to mode. only show mode selector when we
 add the mode parameter to the url or if it exists in local storage

---
 Gemfile.lock           |  3 ++-
 _data/sidebar.yml      |  2 +-
 _includes/navbar.html  | 54 ++++++++++++++++++++++++------------------
 _includes/sidebar.html |  8 +++----
 4 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index e7d40b6956..e918129b80 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -2,7 +2,7 @@ GEM
   remote: https://rubygems.org/
   specs:
     Ascii85 (1.1.1)
-    activesupport (7.2.2.1)
+    activesupport (8.0.0)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -14,6 +14,7 @@ GEM
       minitest (>= 5.1)
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     afm (0.2.2)
diff --git a/_data/sidebar.yml b/_data/sidebar.yml
index 9a757a02c0..b4647886fa 100644
--- a/_data/sidebar.yml
+++ b/_data/sidebar.yml
@@ -301,7 +301,7 @@ docs:
         url: /en/operations/tools.html
 
   - title: Operations - selfhosted
-    version: selfhosted
+    mode: selfhosted
     documents:
       - page: Multinode Systems
         url: /en/operations-selfhosted/multinode-systems.html
diff --git a/_includes/navbar.html b/_includes/navbar.html
index 34c558b9fc..250cf3c6f8 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -1,60 +1,68 @@
 <!-- Copyright Vespa.ai. All rights reserved.. -->
 <script>
 
-	function setVersionParam(version) {
+	function setmodeParam(mode) {
 		const currentUrl = new URL(window.location.href);  // Get the current URL
 		const urlParams = new URLSearchParams(currentUrl.search);
-		urlParams.set('version', version);  // Set or update the query parameter
+		urlParams.set('mode', mode);  // Set or update the query parameter
 		currentUrl.search = urlParams.toString();
 		window.history.pushState({}, '', currentUrl);
 	}
 
-	function hideElements(version){
-		const hiddenElements = document.querySelector(`.version-${version}`);
+	function hideElements(mode){
+		const hiddenElements = document.querySelector(`.mode-${mode}`);
 		if (hiddenElements){
 			hiddenElements.style.display = 'none';  
 		}
 	}
 
-	function showElements(version){
-		const hiddenElements = document.querySelector(`.version-${version}`);
+	function showElements(mode){
+		const hiddenElements = document.querySelector(`.mode-${mode}`);
 		if (hiddenElements){
 			hiddenElements.style.display = 'block';  
 		}
 	}
 	
-	function handleCurrentVersion(currentVersion){
-        localStorage.setItem('version', currentVersion);
-		if (currentVersion === 'cloud'){
+	function handleCurrentmode(currentmode){
+        localStorage.setItem('mode', currentmode);
+		if (currentmode === 'cloud'){
 			hideElements('selfhosted');
 			showElements('cloud');
-		} else if (currentVersion === 'selfhosted'){
+		} else if (currentmode === 'selfhosted'){
 			hideElements('cloud');
 			showElements('selfhosted')
 		}
 	}
-	function selectVersion(version) {
-		setVersionParam(version);
-		handleCurrentVersion(version);
+	function selectmode(mode) {
+		setmodeParam(mode);
+		handleCurrentmode(mode);
 	}
 
 	document.addEventListener('DOMContentLoaded', function() {
 		const currentUrl = new URL(window.location.href); 
 		const urlParams = new URLSearchParams(currentUrl.search);
-		let currentVersion = urlParams.get('version');
-        if (!currentVersion) {
-            currentVersion = localStorage.getItem('version');
-            setVersionParam(currentVersion);
+		let currentmode = urlParams.get('mode');
+        if (!currentmode) {
+            currentmode = localStorage.getItem('mode');
+            setmodeParam(currentmode);
+            // This is temporairly added so that we can test the new mode selector
+            // The selector will only appear if there is ?mode= in the url or if it is stored in local storage
+            if (!currentmode) {
+                document.getElementById('docs-mode').classList.add('hide');
+                document.getElementById('sidebar').classList.remove('p-t-35');
+                showElements('cloud');
+                showElements('selfhosted');
+            }
         }
 		
-		if(currentVersion){
-			document.getElementById('docs-version').value = currentVersion;
-			handleCurrentVersion(currentVersion);
+		if(currentmode){
+			document.getElementById('docs-mode').value = currentmode;
+			handleCurrentmode(currentmode);
 		}
 
-		document.getElementById('docs-version').addEventListener('change', function() {
+		document.getElementById('docs-mode').addEventListener('change', function() {
 			const selectedValue = this.value;
-			selectVersion(selectedValue);
+			selectmode(selectedValue);
 		});
 	});
 	
@@ -65,7 +73,7 @@
         <span class="nav-item hide-small-desktop-up" onclick="toggleMenu()"><i class="d-icon d-menu-hamburger"></i></span>
         <a href="https://docs.vespa.ai/">
             <img class="nav-brand" src="{{ site.baseurl }}/assets/logos/{{include.logo}}" alt="Vespa logo"/></a>
-            <select id="docs-version" style="width: 80%; padding: 10px 5px; margin-top: -7px; font-size: 1.6rem;">
+            <select id="docs-mode" style="width: 80%; padding: 10px 5px; margin-top: -7px; font-size: 1.6rem;">
                 <option value="cloud">Vespa Cloud</option>
                 <option value="selfhosted">Vespa Self-hosted</option>
             </select>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index ca23a2adf0..4ec9013cc6 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,22 +1,22 @@
 <!-- Copyright Vespa.ai. All rights reserved. -->
 
 
-<div class="tabs is-primary is-vertical p-t-35">
+<div id="sidebar" class="tabs is-primary is-vertical p-t-35">
   <ul class="p-b-0">
     <li class="collapse-all tabs__section-header" onclick="expandAllItems();" id="collapse-all"><span class="d-icon d-add-circle" style="font-size: 16px; max-width: 20px; padding-left: 0"></span>expand all</li>
 	<li class="collapse-all tabs__section-header hide" onclick="collapseAllItems();" id="expand-all"><span class="d-icon d-minus-circle" style="font-size: 16px; max-width: 20px; padding-left: 0"></span>collapse all</li>
   </ul>
   {% if site.data.sidebar.docs[0] %}
     {% for section in site.data.sidebar.docs %}
-      <ul class="p-b-0{% if section.version %} version-{{ section.version }} {% endif %}">
+      <ul class="p-b-0{% if section.mode %} mode-{{ section.mode }} {% endif %}">
         <li class="collapse-parent tabs__section-header" onclick="toggleCollapse(this);">{{ section.title }}</li>
         {% if section.documents[0] %}
           {% for entry in section.documents %}
             {% if entry.sidebar_exclude != true %}
               {% if entry.url == page.url %}
-                <li class="m-l-10 collapsable active{% if section.version %} version-{{ section.version }} {% endif %}"><b><a href="{{ entry.url }}">{{ entry.page }}</a></b></li>
+                <li class="m-l-10 collapsable active{% if section.mode %} mode-{{ section.mode }} {% endif %}"><b><a href="{{ entry.url }}">{{ entry.page }}</a></b></li>
               {% else %}
-                <li class="m-l-10 collapsable{% if section.version %} version-{{ section.version }} {% endif %}"><a href="{{ entry.url }}">{{ entry.page }}</a></li>
+                <li class="m-l-10 collapsable{% if section.mode %} mode-{{ section.mode }} {% endif %}"><a href="{{ entry.url }}">{{ entry.page }}</a></li>
               {% endif %}
             {% endif%}
           {% endfor %}

From d58e5d8d5b7ad05a0cbc82765d685211c2d0e0c9 Mon Sep 17 00:00:00 2001
From: Laura Perry <10005215+lperry25@users.noreply.github.com>
Date: Fri, 20 Dec 2024 11:10:54 +0100
Subject: [PATCH 6/6] fix bug when mode is null

---
 _includes/navbar.html | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/_includes/navbar.html b/_includes/navbar.html
index 250cf3c6f8..dcc3f18749 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -1,7 +1,7 @@
 <!-- Copyright Vespa.ai. All rights reserved.. -->
 <script>
 
-	function setmodeParam(mode) {
+	function setModeParam(mode) {
 		const currentUrl = new URL(window.location.href);  // Get the current URL
 		const urlParams = new URLSearchParams(currentUrl.search);
 		urlParams.set('mode', mode);  // Set or update the query parameter
@@ -23,7 +23,7 @@
 		}
 	}
 	
-	function handleCurrentmode(currentmode){
+	function handleCurrentMode(currentmode){
         localStorage.setItem('mode', currentmode);
 		if (currentmode === 'cloud'){
 			hideElements('selfhosted');
@@ -33,9 +33,9 @@
 			showElements('selfhosted')
 		}
 	}
-	function selectmode(mode) {
-		setmodeParam(mode);
-		handleCurrentmode(mode);
+	function selectMode(mode) {
+		setModeParam(mode);
+		handleCurrentMode(mode);
 	}
 
 	document.addEventListener('DOMContentLoaded', function() {
@@ -44,10 +44,11 @@
 		let currentmode = urlParams.get('mode');
         if (!currentmode) {
             currentmode = localStorage.getItem('mode');
-            setmodeParam(currentmode);
+            if (currentmode) {
+                setModeParam(currentmode);
+            } else if (!currentmode) {
             // This is temporairly added so that we can test the new mode selector
             // The selector will only appear if there is ?mode= in the url or if it is stored in local storage
-            if (!currentmode) {
                 document.getElementById('docs-mode').classList.add('hide');
                 document.getElementById('sidebar').classList.remove('p-t-35');
                 showElements('cloud');
@@ -55,14 +56,14 @@
             }
         }
 		
-		if(currentmode){
+		if(currentmode !== null){
 			document.getElementById('docs-mode').value = currentmode;
-			handleCurrentmode(currentmode);
+			handleCurrentMode(currentmode);
 		}
 
 		document.getElementById('docs-mode').addEventListener('change', function() {
 			const selectedValue = this.value;
-			selectmode(selectedValue);
+			selectMode(selectedValue);
 		});
 	});