segmentio · jedrzejchalubek · Oct 10, 2019 · Oct 9, 2019 · Oct 10, 2019 · Oct 10, 2019
diff --git a/js/anchors-indicator/index.js b/js/anchors-indicator/index.js
@@ -0,0 +1,19 @@
+import MenuSpy from 'menuspy'
+const COMPONENT_SELECTOR = '[data-anchors-indicator]'
+const ACTIVE_CLASS = 'data-active-class'
+
+const OPTIONS = {
+  enableLocationHash: false
+}
+
+export default function () {
+  const components = document.querySelectorAll(COMPONENT_SELECTOR)
+
+  components.forEach(component => {
+    const activeClass = component.getAttribute(ACTIVE_CLASS)
+
+    new MenuSpy(component, Object.assign({
+      activeClass: activeClass
+    }, OPTIONS))
+  })
+}
diff --git a/js/dropdown-menu/index.js b/js/dropdown-menu/index.js
@@ -4,12 +4,14 @@ const DROPDOWN_HEAD_INNER = '[data-ref="dropdown-menu[head-inner]"]'
 const DROPDOWN_BODY = '[data-ref="dropdown-menu[body]"]'
 const DROPDOWN_LINK = '[data-ref="dropdown-menu[link]"]'
 const ACTIVE_CLASS_ATTR = 'data-active-class'
+const ANCHOR = '[data-ref="dropdown-menu[item]"]'
 
 export default function () {
   const components = document.querySelectorAll(COMPONENT_SELECTOR)
 
   components.forEach(component => {
     const dropdownHeadInner = component.querySelector(DROPDOWN_HEAD_INNER)
+    const itemActiveClass = component.getAttribute(ACTIVE_CLASS_ATTR)
 
     const dropdownHead = component.querySelector(DROPDOWN_HEAD)
     const dropdownHeadActive = dropdownHead.getAttribute(ACTIVE_CLASS_ATTR)
@@ -24,13 +26,23 @@ export default function () {
       dropdownBody.classList.toggle(dropdownBodyActive)
     })
 
+    const updateValue = (dest) => {
+      dropdownHeadInner.innerHTML = dest.innerHTML
+    }
+
     links.forEach(link => {
       link.addEventListener('click', () => {
-        dropdownHeadInner.innerHTML = link.innerHTML
+        updateValue(link)
 
         dropdownHead.classList.remove(dropdownHeadActive)
         dropdownBody.classList.remove(dropdownBodyActive)
       })
     })
+
+    window.addEventListener('scroll', () => {
+      const currentActiveIndicator = document.querySelector(`${ANCHOR}.${itemActiveClass} a`)
+
+      updateValue(currentActiveIndicator)
+    })
   })
 }
diff --git a/js/index.js b/js/index.js
@@ -6,10 +6,12 @@ import searchNavbar from './search-navbar'
 import menuMobile from './menu-mobile'
 import headingsAnchors from './headings-anchors'
 import dropdownMenu from './dropdown-menu'
+import anchorsIndicator from './anchors-indicator'
 
 feedback()
 accordion()
 searchNavbar()
 menuMobile()
 headingsAnchors()
 dropdownMenu()
+anchorsIndicator()
diff --git a/package.json b/package.json
@@ -16,5 +16,8 @@
     "concurrently": "4.1.2",
     "webpack": "4.40.2",
     "webpack-cli": "3.3.9"
+  },
+  "dependencies": {
+    "menuspy": "1.3.0"
   }
 }
diff --git a/src/_includes/sidebar/destinations-menu-mobile.html b/src/_includes/sidebar/destinations-menu-mobile.html
@@ -1,6 +1,6 @@
 {% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %}
 
-<div class="destination-menu-mobile" data-dropdown-menu>
+<div class="destination-menu-mobile" data-dropdown-menu data-anchors-indicator data-active-class="destination-menu-mobile__item--active">
   <div class="destination-menu-mobile__select" data-ref="dropdown-menu[head]" data-active-class="destination-menu-mobile__select--active">
     <div class="destination-menu-mobile__select-inner">
       <span class="flex flex--middle" data-ref="dropdown-menu[head-inner]">
@@ -18,8 +18,8 @@
       {% assign category_name_size = category.name | size %}
       {% if category_name_size != 0 %}
         {% assign category_icon = category.name | slugify %}
-        <li class="destination-menu-mobile__item" >
-          <a class="destination-menu-mobile__link" href="#{{ category.name }}" title="{{ category.name }}" data-ref="dropdown-menu[link]" >
+        <li class="destination-menu-mobile__item" data-ref="dropdown-menu[item]">
+          <a class="destination-menu-mobile__link" href="#{{ category.name | slugify }}" title="{{ category.name }}" data-ref="dropdown-menu[link]" >
             <span class="destination-menu-mobile__icon">
               {% include icons/destinations-catalog/{{ category_icon }}.svg %}
             </span>

diff --git a/src/_includes/sidebar/destinations-menu.html b/src/_includes/sidebar/destinations-menu.html
@@ -1,13 +1,13 @@
 {% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %}
 
-<div class="destination-menu">
+<div class="destination-menu" data-anchors-indicator data-active-class="destination-menu__item--active">
   <ul class="destination-menu__list list list--unstyle">
       {% for category in destination_categories %}
       {% assign category_name_size = category.name | size %}
       {% if category_name_size != 0 %}
         {% assign category_icon = category.name | slugify %}
         <li class="destination-menu__item">
-          <a class="destination-menu__link" href="#{{ category.name }}" title="{{ category.name }}">
+          <a class="destination-menu__link flex" href="#{{ category.name | slugify }}" title="{{ category.name }}">
             {% include icons/destinations-catalog/{{ category_icon }}.svg %}
             {{ category.name }}
           </a>

diff --git a/src/_layouts/destinations.html b/src/_layouts/destinations.html
@@ -16,33 +16,7 @@
           {% include navbar/search.html %}
         </div>
 
-        <nav class="navbar-mobile" data-search-navbar data-active-class="navbar-mobile--active">
-          <div class="flex flex--middle">
-            <div class="flex__column">
-              {% include navbar/logo.html %}
-            </div>
-
-            <div class="flex__column flex__column--shrink">
-              <div class="flex flex--medium gutter gutter--large">
-                <div class="flex__column">
-                  <button class="search-button" data-ref="search-navbar[trigger]">
-                    {% include icons/symbols/search.svg %}
-                  </button>
-                </div>
-
-                <div class="flex__column">
-                  <button class="menu-button">
-                    <span class="menu-button__line"></span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="navbar-mobile__search">
-            {% include navbar/search.html %}
-          </div>
-        </nav>
+        {% include navbar/navbar-mobile.html %}
       </div>
 
 

diff --git a/src/_sass/components/_destination-menu-mobile.scss b/src/_sass/components/_destination-menu-mobile.scss
@@ -4,6 +4,7 @@
   position: relative;
   padding: 20px 0 25px 0;
   position: sticky;
+  position: -webkit-sticky;
   top: 0;
   z-index: 1;
 

diff --git a/src/_sass/components/_destination-menu.scss b/src/_sass/components/_destination-menu.scss
@@ -5,6 +5,8 @@
   }
 
   &__item {
+    color: color(gray);
+
     & + & {
       margin-top: 13px;
     }
@@ -13,13 +15,17 @@
       width: 14px;
       max-height: 14px;
       margin-right: 8px;
+      margin-top: 2px;
+    }
+
+    &--active {
+      color: color(secondary-dark);
     }
   }
 
   &__link {
-    display: flex;
     width: 100%;
-    color: color(gray);
+    color: inherit;
     font-size: 14px;
     line-height: 20px;
     transition: 0.3s color, 0.3s font-weight;

diff --git a/src/connections/destinations/catalog/index.md b/src/connections/destinations/catalog/index.md
@@ -8,7 +8,7 @@ layout: destinations
 
 <div class="destinations-catalog">
   {% for category in destination_categories %}
-    <div class="destinations-catalog__section" id="{{ category.name }}">
+    <div class="destinations-catalog__section" id="{{ category.name | slugify }}">
       {% assign category_name_size = category.name | size %}
       {% if category_name_size != 0 %}
         {% assign category_icon = category.name | slugify %}

diff --git a/yarn.lock b/yarn.lock
@@ -2479,6 +2479,11 @@ memory-fs@^0.4.0, memory-fs@^0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+menuspy@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/menuspy/-/menuspy-1.3.0.tgz#2afe5e751f1c4540cdba4af7cd96be24fcf5b3f1"
+  integrity sha512-cZD8Ik4gfWzOADiCiGP0l08DQerQfeli82u7NKSP+Br3C6YmpYeZmGlTqmLwQvOIeJVoDnlEdkkz9m133L5CIQ==
+
 micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"