diff --git a/js/anchors-indicator/index.js b/js/anchors-indicator/index.js new file mode 100644 index 0000000000..d36ca2a72e --- /dev/null +++ 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 index f01d38f07f..cf57f2a185 100644 --- 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 index b62fbc7d85..fede0e5dbc 100644 --- a/js/index.js +++ b/js/index.js @@ -6,6 +6,7 @@ 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() @@ -13,3 +14,4 @@ searchNavbar() menuMobile() headingsAnchors() dropdownMenu() +anchorsIndicator() diff --git a/package.json b/package.json index ba7be55dd1..d3e972e417 100644 --- 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 index 0a317a3122..a716ad7a40 100644 --- 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" %} -
+
@@ -18,8 +18,8 @@ {% assign category_name_size = category.name | size %} {% if category_name_size != 0 %} {% assign category_icon = category.name | slugify %} -
  • - +
  • + {% include icons/destinations-catalog/{{ category_icon }}.svg %} diff --git a/src/_includes/sidebar/destinations-menu.html b/src/_includes/sidebar/destinations-menu.html index f1720b6d1e..525a4669dc 100644 --- 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" %} -
    +
    - + {% include navbar/navbar-mobile.html %}
    diff --git a/src/_sass/components/_destination-menu-mobile.scss b/src/_sass/components/_destination-menu-mobile.scss index 2636bc2ab5..86c5e4c75c 100644 --- 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 index ffb44e3023..3af637003a 100644 --- 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 index 2d553e0188..99191b86f7 100644 --- a/src/connections/destinations/catalog/index.md +++ b/src/connections/destinations/catalog/index.md @@ -8,7 +8,7 @@ layout: destinations
    {% for category in destination_categories %} -
    +
    {% 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 index d4dc2ea4a0..c4099de253 100644 --- 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"