[release-1.27] feat: Add Version selector dropdown (#16787)

* Add Version selector dropdown

* Fix Responsiveness

* More maintainable code

* Address Craig`s Suggestion

Co-authored-by: Craig Box <[email protected]>

* More cleaner UI

Co-authored-by: Craig Box <[email protected]>

* Stop generating drop-down in archive docs

Co-authored-by: Craig Box <[email protected]>

* Fix : Mobile View

Co-authored-by: Craig Box <[email protected]>

* More Styling

Co-authored-by: Craig Box <[email protected]>

* Fix: Mobile

Co-authored-by: Craig Box <[email protected]>

* Update Rendering Logic

Co-authored-by: Craig Box <[email protected]>

* Add boolean logic from data/args.yml

Co-authored-by: Craig Box <[email protected]>

* Remove accidental package.json file

* Update Makefile

* Update version-selector.html

* Update version-selector.html

* Update layouts/partials/version-selector.html

Co-authored-by: Craig Box <[email protected]>

* Update layouts/partials/version-selector.html

Co-authored-by: Craig Box <[email protected]>

---------

Co-authored-by: Ajay Singh <[email protected]>
Co-authored-by: Craig Box <[email protected]>

Author: 3 people

layouts/partials/header.html

@@ -23,7 +23,26 @@
                 {{ $currentPage := .}}
                 {{ range .Site.Menus.main }}
                     {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
-                    {{ if .HasChildren }}
+                    {{ if and (eq .Identifier "docs") (eq $.Section "docs") (not $.Site.Data.args.archive) }}
+                    <li class="main-navigation-links-item">
+                    <a href="{{ .URL | relLangURL }}" class="main-navigation-links-link has-dropdown {{ if $active }}active{{ end }}">
+                        <span>{{ .Name }}</span>
+                        {{ partial "icon.html" "dropdown-arrow" }}
+                    </a>
+
+                    <ul class="main-navigation-links-dropdown">
+                        {{ range .Children }}
+                        <li class="main-navigation-links-dropdown-item">
+                            <a href="{{ .URL | relLangURL }}" class="main-navigation-links-link">{{ .Name }}</a>
+                        </li>
+                        {{ end }}
+
+
+                        {{ partial "version-selector.html" $ }}
+
+                    </ul>
+                    </li>
+                    {{else if .HasChildren }}
                         <li class="main-navigation-links-item">
                             <a {{ if ne .URL "" }}href="{{ .URL | relLangURL  }}"{{end}} class="main-navigation-links-link has-dropdown {{ if $active }}active{{ end }}">
                                 <span>{{ .Name }}</span>
@@ -48,11 +67,12 @@
                 {{ end }}
             </ul>
 
+
+
             <div class="main-navigation-footer">
                 <button id="search-show" class="search-show" title='{{ i18n "search" }}' aria-label='{{ i18n "search_label" }}'>{{ partial "icon.html" "magnifier" }}</button>
                 <a href='{{ "/docs/overview/quickstart" | relLangURL }}' class="btn btn--primary" id="try-istio">{{ i18n "try_istio" }}</a>
             </div>
-            
         </div>
 
         <form id="search-form" class="search" name="cse" role="search">
@@ -69,5 +89,7 @@
             <input id="search-textbox" class="search-textbox form-control" name="q" type="search" aria-label='{{ i18n "search" }}' placeholder='{{ i18n "search_label" }}' />
             <button id="search-close" title='{{ i18n "search_cancel" }}' type="reset" aria-label='{{ i18n "search_cancel" }}'>{{ partial "icon.html" "menu-close" }}</button>
         </form>
+
+
     </nav>
 </header>

layouts/partials/version-selector.html

@@ -0,0 +1,40 @@
+{{ $versions := site.Data.versions }}
+{{ $mainVerStr := $versions.main }}
+{{ $preliminaryVerStr := $versions.preliminary }}
+{{ $mainVerParts := split $mainVerStr "." }}
+{{ $major := index $mainVerParts 0 | int }}
+{{ $minor := index $mainVerParts 1 | int }}
+{{ $versionCount := 5 }}
+
+<!-- Preliminary version -->
+{{ $preUrl := printf "https://preliminary.istio.io/v%s/docs" $preliminaryVerStr }}
+<li class="main-navigation-links-dropdown-item">
+  <a href="{{ $preUrl }}"
+     class="main-navigation-links-link">
+     Preliminary
+  </a>
+</li>
+
+<!-- Main version -->
+{{ $mainUrl := printf "https://istio.io/v%s/docs" $mainVerStr }}
+<li class="main-navigation-links-dropdown-item">
+  <a href="{{ $mainUrl }}"
+     class="main-navigation-links-link">
+    <strong>v{{ $mainVerStr }} (Current)</strong>
+  </a>
+</li>
+
+<!-- Previous versions -->
+{{ range $i := seq 1 (sub $versionCount 1) }}
+  {{ $currentMinor := sub $minor $i }}
+  {{ if ge $currentMinor 0 }}
+    {{ $ver := printf "v%d.%d" $major $currentMinor }}
+    {{ $url := printf "https://istio.io/%s/docs" $ver }}
+    <li class="main-navigation-links-dropdown-item">
+      <a href="{{ $url }}"
+         class="main-navigation-links-link">
+        {{ $ver }}
+      </a>
+    </li>
+  {{ end }}
+{{ end }}