From cca20b9d038fb28a5a1bef9d05b41a1b268708be Mon Sep 17 00:00:00 2001
From: cpkio <krasilnikov.cpkio@gmail.com>
Date: Wed, 18 Dec 2024 10:29:56 +0300
Subject: [PATCH] feat: UI example for dropdown menus with version selector

---
 .../version-selector/css/menubar.css          | 94 +++++++++++++++++++
 .../partials/header-content.hbs               | 23 +++++
 .../partials/main-menu-docref.hbs             | 18 ++++
 .../partials/main-menu-group-end.hbs          |  1 +
 .../partials/main-menu-group-start.hbs        |  2 +
 .../version-selector/partials/main-menu.hbs   |  1 +
 6 files changed, 139 insertions(+)
 create mode 100644 doc/ui-examples/version-selector/css/menubar.css
 create mode 100644 doc/ui-examples/version-selector/partials/header-content.hbs
 create mode 100644 doc/ui-examples/version-selector/partials/main-menu-docref.hbs
 create mode 100644 doc/ui-examples/version-selector/partials/main-menu-group-end.hbs
 create mode 100644 doc/ui-examples/version-selector/partials/main-menu-group-start.hbs
 create mode 100644 doc/ui-examples/version-selector/partials/main-menu.hbs

diff --git a/doc/ui-examples/version-selector/css/menubar.css b/doc/ui-examples/version-selector/css/menubar.css
new file mode 100644
index 0000000..dfc9f65
--- /dev/null
+++ b/doc/ui-examples/version-selector/css/menubar.css
@@ -0,0 +1,94 @@
+.component-selector {
+  position: relative;
+  top: 0.45rem;
+}
+.component-selector i.fa {
+  font-size: 100%;
+  vertical-align: middle;
+}
+.component-selector a { color: var(--menubar-text-color); }
+.component-selector ul {
+  font-size: 0;
+  list-style-type: none;
+  padding: 0;
+}
+.component-selector ul li {
+  display: inline-block;
+  font-size: .86rem;
+  color: var(--menubar-text-color);
+  padding: 14px;
+  position: relative;
+  z-index: 999;
+}
+.component-selector ul li .nav-item-toggle {
+  background: transparent url(../img/chevron.svg) no-repeat center / 50%;
+  border: none;
+  outline: none;
+  line-height: inherit;
+  padding: 0;
+  position: absolute;
+  margin-top: 0;
+  margin-left: calc(var(--nav-line-height) * 1em - 1.5em);
+  transform: rotate(0deg);
+}
+.component-selector ul li span {
+  background-color: var(--menubar-version-label-color);
+  border-radius: 3px;
+  display: inline-block;
+  font-size: 0.6rem;
+  padding: 2px 5px;
+  text-align: center;
+  vertical-align: bottom;
+}
+.component-selector ul li span a { color: white }
+.component-selector ul li span:hover {
+  background-color: var(--menubar-version-label-hover-color);
+}
+.component-selector ul li span:hover a {
+  text-decoration: none;
+  color: var(--menubar-text-color);
+}
+.component-selector ul li ul {
+  display: none;
+  top: 28px;
+}
+.component-selector ul li:hover {
+  cursor: pointer;
+  /* background-color: var(--menubar-background-color); */
+}
+.component-selector ul li:hover ul {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  display: block;
+  left: 0;
+  margin-top: 15px;
+  max-height: 72vh;
+  overflow-y: auto;
+  position: absolute;
+  scrollbar-color: auto;
+  overscroll-behavior-y: none;
+  width: 320px;
+}
+.component-selector ul li:hover ul li {
+  display: block;
+  background-color: var(--menubar-background-color);
+}
+.component-selector ul li:hover ul li:hover {
+  background-color: var(--menubar-hover-color);
+}
+.component-selector ul li:hover ul li span {
+  background-color: var(--menubar-version-label-color);
+  border-radius: 3px;
+  display: inline-block;
+  font-size: 0.6rem;
+  padding: 2px 5px;
+  text-align: center;
+  vertical-align: bottom;
+}
+.component-selector ul li:hover ul li span a { color: white }
+.component-selector ul li:hover ul li span:hover {
+  background-color: var(--menubar-version-label-hover-color);
+}
+.component-selector ul li:hover ul li span:hover a {
+  text-decoration: none;
+  color: var(--menubar-text-color);
+}
diff --git a/doc/ui-examples/version-selector/partials/header-content.hbs b/doc/ui-examples/version-selector/partials/header-content.hbs
new file mode 100644
index 0000000..d51e370
--- /dev/null
+++ b/doc/ui-examples/version-selector/partials/header-content.hbs
@@ -0,0 +1,23 @@
+<header class="header">
+  <nav class="navbar">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="{{{or site.url siteRootPath}}}">here should be your logo</a>
+    <div class="component-selector">
+      <ul>
+      {{> main-menu}}
+      </ul>
+    </div>
+    </div>
+    <div id="topbar-nav" class="navbar-menu">
+      <div class="navbar-end">
+        {{#if env.SITE_SEARCH_PROVIDER}}
+        <div class="navbar-item search hide-for-print">
+          <div id="search-field" class="field">
+            <input id="search-input" type="text" placeholder="Поиск"{{#if page.home}} autofocus{{/if}}>
+          </div>
+        </div>
+        {{/if}}
+      </div>
+    </div>
+  </nav>
+</header>
diff --git a/doc/ui-examples/version-selector/partials/main-menu-docref.hbs b/doc/ui-examples/version-selector/partials/main-menu-docref.hbs
new file mode 100644
index 0000000..926733f
--- /dev/null
+++ b/doc/ui-examples/version-selector/partials/main-menu-docref.hbs
@@ -0,0 +1,18 @@
+<li>
+{{#if (and resolved (not external))}}
+{{#with (lookup site.components component)}}
+  <a href="{{{relativize ./url}}}">{{{./title}}}</a>
+  {{#each ./versions}}
+  {{#if (ne ./displayVersion 'default')}}
+  <span class="version
+    {{#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if}}
+    {{#if (eq this ../latest)}} is-latest{{/if}}">
+    <a href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+  </span>
+  {{/if}}
+  {{/each}}
+{{/with}}
+{{else}}
+  <a href="{{{relativize ref page.url}}}"{{#if external}} target="_blank"{{/if}}>{{doc_title}}{{#if external}} <i class="fa fa-external-link-alt"></i>{{/if}}</a>
+{{/if}}
+</li>
diff --git a/doc/ui-examples/version-selector/partials/main-menu-group-end.hbs b/doc/ui-examples/version-selector/partials/main-menu-group-end.hbs
new file mode 100644
index 0000000..a25f9ee
--- /dev/null
+++ b/doc/ui-examples/version-selector/partials/main-menu-group-end.hbs
@@ -0,0 +1 @@
+</ul></li>
diff --git a/doc/ui-examples/version-selector/partials/main-menu-group-start.hbs b/doc/ui-examples/version-selector/partials/main-menu-group-start.hbs
new file mode 100644
index 0000000..e311f76
--- /dev/null
+++ b/doc/ui-examples/version-selector/partials/main-menu-group-start.hbs
@@ -0,0 +1,2 @@
+<li>{{group_title}}<button class="nav-item-toggle"></button>
+<ul>
diff --git a/doc/ui-examples/version-selector/partials/main-menu.hbs b/doc/ui-examples/version-selector/partials/main-menu.hbs
new file mode 100644
index 0000000..5a6eb2e
--- /dev/null
+++ b/doc/ui-examples/version-selector/partials/main-menu.hbs
@@ -0,0 +1 @@
+<!-- to be overridden by the extension -->