Adopts the new top nav from the website (#984)

Signed-off-by: Miki <miki@amazon.com> Signed-off-by: Miki <miki@amazon.com>
2022-08-29 11:07:08 -07:00 · 2022-08-29 11:07:08 -07:00 · caa88cc9e0
parent c48cf8c600
commit caa88cc9e0
6 changed files with 227 additions and 29 deletions
--- a/_config.yml
+++ b/_config.yml
@ -184,3 +184,4 @@ exclude:
  - vendor/gems/
  - vendor/ruby/
  - README.md
+  - .idea
--- a/_data/top_nav.yml
+++ b/_data/top_nav.yml
@ -0,0 +1,50 @@
+items:
+  -
+    label: Download
+    fragments:
+      - downloads
+      - versions
+    url: /downloads.html#opensearch
+  -
+    label: About
+    fragments:
+      - about
+      - releases
+      - faq
+    children:
+      -
+       label: OpenSearch
+       url: /about.html
+      -
+       label: Releases
+       url: /releases.html
+      -
+       label: FAQ
+       url: /faq
+  -
+    label: Community
+    fragments:
+      - events
+      - community_projects
+      - blog
+      - partners
+    children:
+      -
+        label: Blog
+        url: /blog
+      -
+        label: Forum
+        url: https://forum.opensearch.org/
+      -
+        label: Events
+        url: /events
+      -
+        label: Partners
+        url: /partners
+      -
+        label: Projects
+        url: /community_projects
+  -
+    label: Documentation
+    fragment: docs
+    url: /docs/
--- a/_includes/header.html
+++ b/_includes/header.html
@ -1,5 +1,4 @@
-{% assign url_full = site.baseurl | append: page.url %}
-{% assign url_parts = url_full | split: "/" %}
+{% assign url_parts = page.url | split: "/" %}
 {%if page.alert %}
 <div role="banner" class="banner-alert">
  <div class="container">
@ -26,16 +25,35 @@
        <path fill-rule="evenodd" clip-rule="evenodd" d="M107.777 48.2625C110.926 43.7708 112.5 37.3442 112.5 28.9827C112.5 20.6213 110.937 14.2062 107.812 9.73754C104.686 5.24585 100.194 3 94.3368 3C88.4098 3 83.8719 5.23433 80.7231 9.70299C77.5744 14.1486 76 20.5522 76 28.9136C76 37.3442 77.5744 43.8053 80.7231 48.297C83.8719 52.7657 88.3866 55 94.2674 55C100.125 55 104.628 52.7542 107.777 48.2625ZM87.8425 42.1468C86.3839 39.1293 85.6546 34.7413 85.6546 28.9827C85.6546 23.2011 86.3839 18.8131 87.8425 15.8186C89.3011 12.8011 91.4659 11.2924 94.3368 11.2924C99.986 11.2924 102.811 17.1891 102.811 28.9827C102.811 40.7763 99.9629 46.6731 94.2674 46.6731C91.4428 46.6731 89.3011 45.1643 87.8425 42.1468ZM128.186 53.9979C129.469 54.7387 130.85 55 132.5 55C136.03 55 138.9 53.3265 140.94 49.7612C142.98 46.196 144 41.2764 144 35.0025C144 28.6359 143.014 23.7164 141.043 20.2437C139.072 16.7479 136.345 15 132.861 15C129.24 15 126.402 17.1569 124.5 21H124L122.5 16H115.5V71.5H124.5V55C124.5 54.3518 124.367 52.1485 124 49H124.5C125.25 51.25 126.925 53.2339 128.186 53.9979ZM125.882 25.3832C126.685 23.6932 127.979 22.8482 129.767 22.8482C131.44 22.8482 132.666 23.8437 133.446 25.8347C134.248 27.8257 134.649 30.8353 134.649 34.8636C134.649 43.059 133.045 47.1567 129.836 47.1567C127.979 47.1567 126.65 46.1844 125.848 44.2397C125.046 42.295 124.645 39.1928 124.645 34.933V33.7176C124.691 29.8282 125.103 27.0501 125.882 25.3832ZM161.652 55C156.806 55 152.98 53.2915 150.174 49.8745C147.391 46.4343 146 41.5743 146 35.2944C146 28.9221 147.264 23.9466 149.791 20.368C152.319 16.7893 155.843 15 160.365 15C164.585 15 167.913 16.5354 170.348 19.6061C172.783 22.6537 174 26.9365 174 32.4545V37.5H155.5C155.57 40.9401 156.168 43.3752 157.513 45.0606C158.858 46.7229 160.713 47.5541 163.078 47.5541C166.093 47.5541 169.177 46.619 172.33 44.7489V52.3333C169.362 54.1111 165.803 55 161.652 55ZM160.296 22.0996C158.974 22.0996 157.884 22.8038 157.026 24.2121C156.168 25.5974 155.639 28.0678 155.5 31H165C164.954 28.1833 164.446 25.7359 163.635 24.2814C162.823 22.8268 161.71 22.0996 160.296 22.0996ZM196.5 31V54H205.5V29.1991C205.5 24.5589 204.623 21.0323 202.868 18.6194C201.137 16.2065 198.516 15 195.007 15C192.93 15 191.117 15.5104 189.57 16.5313C188.024 17.5289 186.831 19.2135 186 21H185.5L184.25 16H177V54H186.5V35.75C186.5 31.0402 186.673 27.8302 187.597 25.8582C188.52 23.8628 189.974 22.8652 191.96 22.8652C193.46 22.8652 194.546 23.5844 195.215 25.0229C195.885 26.4614 196.5 28.1927 196.5 31Z" fill="#00A3E0"/>
      </svg>
    </a>
-
    <div class="menu-button"><i class="icon icon-reorder"></i><span>Menu</span></div>
    <div class="nav-menu-on" role="navigation">
-      <ul class="small-nav">
-        {%- include nav_item.html text="Download" href="/downloads.html#opensearch" url_full="/downloads.html#opensearch" url_fragment="downloads" -%}
-        {%- include nav_item.html text="Documentation" href="/docs" url_full="/docs/" url_fragment="docs" -%}
-        {%- include nav_item.html text="Blog" href="/blog/" url_full="/blog/" url_fragment="blog" -%}
-        {%- include nav_item.html text="Forum" href="https://forum.opensearch.org/" url_full="https://forum.opensearch.org/" url_fragment="forum" -%}
-        {%- include nav_item.html text="Events" href="/events/" url_full="/events/" url_fragment="events" -%}
-        {%- include nav_item.html text="Partners" href="/partners/" url_full="/partners/" url_fragment="partners" -%}
+      <ul class="nested-nav">
+        {% assign url_fragment = url_parts[1] | replace: '.html', '' %}
+        {% for nav_item in site.data.top_nav.items %}
+        <li>
+          <a {% if nav_item.url %} href="{{ nav_item.url }}" {% endif %}
+             {% if nav_item.fragments contains url_fragment or nav_item.fragment == url_fragment %} class="in-category" {% endif %}
+          >{{ nav_item.label }}</a>
+
+          {% if nav_item.children %}
+          <ul>
+            {% for nav_child in nav_item.children %}
+            {% if nav_child.url contains '://' %}
+            {% assign child_url_fragment = '#' %}
+            {% else %}
+            {% assign child_url_parts = nav_child.url | split: "/" %}
+            {% assign child_url_fragment = child_url_parts[1] | replace: '.html', '' %}
+            {% endif %}
+            <li>
+              <a href="{{ nav_child.url }}"
+                 {% if child_url_fragment == url_fragment %} class="in-category" {% endif %}
+              >{{ nav_child.label }}</a>
+            </li>
+            {% endfor %}
+          </ul>
+          {% endif %}
+        </li>
+        {% endfor %}
      </ul>
    </div>
  </div>
--- a/_sass/_nested-nav.scss
+++ b/_sass/_nested-nav.scss
@ -0,0 +1,130 @@
+#top {
+  z-index: 9;
+}
+
+@media screen and (min-width: 46.25rem) {
+  [role="banner"] {
+    overflow: visible;
+
+    .nav-menu-on {
+      overflow: visible;
+
+      .nested-nav {
+        li {
+          font-size: 0.8125rem;
+        }
+      }
+    }
+
+    [role="navigation"] ul.nested-nav > li:before {
+      display: inline-block;
+    }
+  }
+
+  [role="navigation"] .nested-nav {
+    > li {
+      position: relative;
+      float: left;
+
+      > a {
+        padding: .5em 0;
+      }
+
+      > ul {
+        list-style: none;
+        position: absolute;
+        background: #fff;
+        padding: 0;
+        margin: 0;
+        min-width: 100%;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
+        border-radius: 2px;
+        left: -.5em;
+
+        li {
+          margin: 0;
+          float: none;
+
+          &:before {
+            display: none;
+          }
+
+          a {
+            color: $text;
+            padding: .46875rem .9375rem;
+            display: block;
+            font-size: 90%;
+            white-space: nowrap;
+
+            &:hover {
+              color: $attention;
+            }
+          }
+        }
+      }
+
+      &:not(:first-child) {
+        > ul {
+          left: .5em;
+        }
+      }
+
+      &:hover {
+        > ul {
+          display: block;
+          visibility: visible;
+          opacity: 1;
+          top: calc(100% + .5em);
+          transition: opacity .25s ease-out, top .25s ease-out, visibility 0s;
+        }
+      }
+    }
+
+    ul {
+      /*display: none;*/
+      visibility: hidden;
+      display: block;
+      opacity: 0;
+      transition: opacity .25s ease-out, top 0s .5s, visibility 0s .5s;
+      top: calc(100%);
+    }
+
+    a {
+      cursor: pointer;
+    }
+  }
+}
+
+/* This is placed in a media query to prevent the momentary distortion of the page
+ * when it is rendered and the browser takes its time to evaluate the @media.
+ */
+@media screen and (max-width: 46.24rem) {
+  [role="banner"] .nested-nav {
+    li {
+      line-height: 1.5em;
+      font-size: 1.125rem;
+
+      ul {
+        margin: 0 0 10px;
+      }
+
+      a {
+        padding: 0;
+
+        &:not(:last-child) {
+          pointer-events: none;
+        }
+      }
+    }
+
+    > li {
+      > a.in-category:not(:last-child) {
+        color: white;
+      }
+    }
+  }
+
+  [role="banner"] [role="navigation"] .nested-nav li:before {
+    display: none;
+  }
+}
--- a/_sass/color_schemes/opensearch.scss
+++ b/_sass/color_schemes/opensearch.scss
@ -70,3 +70,14 @@ $base-button-color: $grey-lt-300;
 // $search-background-color: $grey-dk-250;
 // $table-background-color: $grey-dk-250;
 // $feedback-color: darken($sidebar-color, 3%);
+
+$content-width: 740px;
+$toc-width: 232px;
+
+$media-queries: (
+  xs: 320px,
+  sm: 462.5px,
+  md: $content-width,
+  lg: $content-width + $nav-width,
+  xl: $content-width + $nav-width + $toc-width
+);
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@ -41,15 +41,6 @@ $content-width: 740px !default;
 $table-border-color: $grey-lt-300;
 $toc-width: 232px !default;

-// Replaces xl size
-$media-queries: (
-  xs: 320px,
-  sm: 500px,
-  md: $content-width,
-  lg: $content-width + $nav-width,
-  xl: $content-width + $nav-width + $toc-width
-);
-
 body {
  @include serif;
 }
@ -409,11 +400,6 @@ body {
  [role="complementary"] {
    @include sans-serif; // reverse font style on sidebar and secondary areas
  }
-
-  // don't activate mobile styles for larger screens
-  @include mq(md) {
-    min-width: 768px;
-  }
 }

 main {
@ -923,7 +909,7 @@ main {
  @include clearfix;
 }

-@media screen and (max-width: 46.24rem) {
+@media screen and (max-width: ($content-width - 1)) {
  [role="banner"] .nav-menu-on .small-nav {

    li {
@ -1234,3 +1220,5 @@ version-selector {
    transform: rotate(359deg)
  }
 }
+
+@import "../_nested-nav.scss";