📖: Add version dropdown for doc release (#3332)

add version dropdown for doc

Author: pratikmota

docs/book/book.toml

@@ -7,7 +7,7 @@ title = "The Kubebuilder Book"
 [output.html]
 google-analytics = "UA-119864590-1"
 curly-quotes = true
-additional-css = ["theme/css/markers.css", "theme/css/custom.css"]
+additional-css = ["theme/css/markers.css", "theme/css/custom.css", "theme/css/version-dropdown.css"]
 git-repository-url = "https://github.com/kubernetes-sigs/kubebuilder"
 edit-url-template = "https://github.com/kubernetes-sigs/kubebuilder/edit/master/docs/book/{path}"
 

docs/book/theme/css/version-dropdown.css

@@ -0,0 +1,23 @@
+.version-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 90px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+  }
+  
+  .version-dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+  
+  .version-dropdown-content a:hover {
+    background-color: #f1f1f1;
+  }
+  
+  .version-dropdown:hover .version-dropdown-content {
+    display: block;
+  }

docs/book/theme/index.hbs

@@ -126,6 +126,17 @@
                             <i class="fa fa-search"></i>
                         </button>
                         {{/if}}
+                         <!-- custom code for adding release version dropdown menu -->
+                        <div class="version-dropdown">
+                            <button id="release-version" class="icon-button" type="button" title="Release version" aria-label="Release version" aria-haspopup="true" aria-expanded="false" aria-controls="release-versions">
+                            <i class="fa fa-book"></i>
+                            </button>
+                            <div class="version-dropdown-content">
+                                <a href="https://book.kubebuilder.io/"target="_blank" rel="noopener noreferrer">v3-book</a>
+                                <a href="https://book-v2.book.kubebuilder.io/"target="_blank" rel="noopener noreferrer">v2-book</a>
+                                <a href="https://book-v1.book.kubebuilder.io/"target="_blank" rel="noopener noreferrer">v1-book</a>
+                            </div>
+                        </div>     
                     </div>
 
                     <h1 class="menu-title"><img alt="{{ book_title }}" src="{{ path_to_root }}/logos/logo-single-line.png"></h1>