Commit db2fa162 authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

New Drupal navigation 

Adding commits f409fe1d, e0dd0e66
And mark active states correctly.
parent 1d5f9d6f

dist/css/layout/navigation.css

+2 −9
Original line number Diff line number Diff line
@@ -94,7 +94,6 @@ body { 
  padding-inline: var(--space-xs);

  -webkit-padding-before: var(--space-xs);

          padding-block-start: var(--space-xs);

  transition: width .2s linear;

  overflow-y: scroll;

}
@@ -639,7 +638,7 @@ button.toolbar-link { 
  text-align: right;

}



button.toolbar-link::after {

button.toolbar-link:not(.toolbar-link--sidebar-toggle)::after {

  display: block;

  block-size: var(--space-s);

  inline-size: var(--space-s);
@@ -866,7 +865,6 @@ html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1:not(.toolbar-menu 


.gin--navigation .admin-toolbar {

  top: 0;

  transition: none;

  overflow-y: initial;

  padding-inline: 0;

  -webkit-padding-before: 0;
@@ -888,8 +886,7 @@ html:not(.admin-toolbar-expanded) .toolbar-menu__item--level-1:not(.toolbar-menu 
}



.gin--navigation .admin-toolbar__content {

  -webkit-padding-before: var(--gin-spacing-xxs);

          padding-block-start: var(--gin-spacing-xxs);

  padding-block: var(--gin-spacing-xxs);

  padding-inline: var(--gin-spacing-xs);

  -webkit-margin-after: 0;

          margin-block-end: 0;
@@ -1120,10 +1117,6 @@ html:not(.admin-toolbar-expanded) .gin--navigation .toolbar-menu__item--level-1. 
          margin-inline-end: 0;

}



.toolbar-link--sidebar-toggle::after {

  display: none !important;

}



.toolbar-link--tools::before {

  --icon: url("../../media/sprite.svg#tool-view");

}

js/navigation/sidebar.js

+20 −0
Original line number Diff line number Diff line
@@ -72,6 +72,16 @@ 
        link.parentElement.classList.add('current', 'is-active');

      }

    });



    // Gin Custom start ---------------------

    // Mark overview pages as active.

    const sidebarTitles = sidebar.querySelectorAll('.toolbar-menu__item--level-1[data-url]');

    sidebarTitles.forEach(title => {

      if (title.getAttribute('data-url') === window.location.pathname) {

        title.querySelector('button.toolbar-link')?.classList.add('current', 'is-active');

      }

    });

    // Gin Custom end ------------------------

  }



  /**
@@ -615,6 +625,16 @@ 
      openCloseSubmenu(e.currentTarget.parentElement);

    }));



    // Gin Custom start ---------------------

    // Make overview buttons clickable when collapsed

    sidebar.querySelectorAll('.toolbar-menu__item--level-1 > button.toolbar-link').forEach(el => el.addEventListener('click', () => {

      const dataUrl = el.parentElement.getAttribute('data-url');

      if (!isNavExpanded() && dataUrl) {

        window.location.assign(dataUrl);

      }

    }));

    // Gin Custom end ------------------------



    // Gin Custom start ---------------------

    // Show toolbar navigation with shortcut:

    // OPTION + T (Mac) / ALT + T (Windows)

styles/layout/navigation.scss

+1 −7
Original line number Diff line number Diff line
@@ -61,7 +61,6 @@ body.gin--navigation { 
  .admin-toolbar {

    top: 0;

    border-right: 1px solid var(--gin-border-color-layer);

    transition: none; //var(--gin-transition-fast);

    overflow-y: initial;

    padding-inline: 0;

    padding-block-start: 0;
@@ -73,7 +72,7 @@ body.gin--navigation { 
  }



  .admin-toolbar__content {

    padding-block-start: var(--gin-spacing-xxs);

    padding-block: var(--gin-spacing-xxs);

    padding-inline: var(--gin-spacing-xs);

    margin-block-end: 0;

    overflow-y: auto;
@@ -295,11 +294,6 @@ html:not(.admin-toolbar-expanded) .gin--navigation .toolbar-menu__item--level-1. 
  }

}



// Hide Toggle chevron

.toolbar-link--sidebar-toggle::after {

  display: none !important;

}



.toolbar-link--tools::before {

  --icon: #{icon('tool')};

}

styles/navigation/admin-toolbar.scss

+0 −1
Original line number Diff line number Diff line
@@ -44,7 +44,6 @@ 
  z-index: 501;

  padding-inline: var(--space-xs);

  padding-block-start: var(--space-xs);

  transition: width 0.2s linear;

  overflow-y: scroll;



  @media only screen and (max-height: 300px)  {

styles/navigation/toolbar-link.scss

+1 −3
Original line number Diff line number Diff line
@@ -47,7 +47,7 @@ button.toolbar-link { 
  text-align: left;



  /* Chevron styles. */

  &::after {

  &:not(.toolbar-link--sidebar-toggle)::after {

    display: block;

    block-size: var(--space-s);

    inline-size: var(--space-s);
@@ -101,14 +101,12 @@ html:not(.admin-toolbar-expanded) { 
  }



  /* Hide the chevron when toolbar collapsed. */

  // Gin Custom start ---------------------

  .toolbar-menu__item--has-dropdown.toolbar-menu__item--level-1,

  .toolbar-menu__item--to-title {

    > button.toolbar-link::after {

      content: unset;

    }

  }

  // Gin Custom end ------------------------

}



.toolbar-link--sidebar-toogle {