Commit 9537a239 authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

Update to new navigation concept

parent 3c18b1b0

dist/css/layout/navigation.css

+50 −24
Original line number Diff line number Diff line
@@ -97,6 +97,7 @@ body { 
  }

}



@media (min-width: 61em) {

  .navigation__sidebar ~ .dialog-off-canvas-main-canvas {

    -webkit-margin-start: var(--drupal-displace-offset-left, var(--sidebar-width));

            margin-inline-start: var(--drupal-displace-offset-left, var(--sidebar-width));
@@ -104,6 +105,7 @@ body { 
    transition: margin-inline-start .2s linear;

    transition: margin-inline-start .2s linear, -webkit-margin-start .2s linear;

  }

}



.navigation-active .navigation__sidebar {

  overflow-y: auto;
@@ -827,10 +829,6 @@ html:not(.navigation-active) .navigation-menu-wrapper { 
  transition: margin-inline-start var(--gin-transition-fast), margin-right var(--gin-transition-fast), -webkit-margin-start var(--gin-transition-fast);

}



#toolbar-administration {

  display: none;

}



.gin--navigation {

  font-family: var(--gin-font);

  padding-top: 0 !important;
@@ -840,21 +838,25 @@ html:not(.navigation-active) .navigation-menu-wrapper { 
  transition: var(--gin-transition-fast);

}



.gin--navigation .navigation__sidebar,

.gin--navigation .navigation__sidebar--sticky-menu {

  background: var(--gin-bg-layer);

}



[dir="ltr"] .gin--navigation .navigation__sidebar,

[dir="ltr"] .gin--navigation .navigation__sidebar--sticky-menu {

[dir="ltr"] .gin--navigation .navigation__sidebar {

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

}



[dir="rtl"] .gin--navigation .navigation__sidebar,

[dir="rtl"] .gin--navigation .navigation__sidebar--sticky-menu {

[dir="rtl"] .gin--navigation .navigation__sidebar {

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

}



@media (max-width: 60.99em) {

  .gin--navigation .navigation__sidebar {

    display: none;

  }

}



.gin--navigation .navigation__sidebar,

.gin--navigation .navigation__sidebar--sticky-menu {

  background: var(--gin-bg-layer);

}



.gin--navigation .navigation__header {

  margin-bottom: -4px;

}
@@ -939,6 +941,13 @@ html:not(.navigation-active) .navigation-menu-wrapper { 
  background: var(--gin-color-primary);

}



.gin--navigation .level-1 > .navigation-link--manage-fields,

.gin--navigation .level-1 > .navigation-link--manage-form-display,

.gin--navigation .level-1 > .navigation-link--manage-display,

.gin--navigation .level-1 > .navigation-link--delete {

  display: none;

}



.gin--navigation .level-2,

.gin--navigation .level-3 {

  font-size: var(--gin-font-size-xs);
@@ -963,7 +972,8 @@ html:not(.navigation-active) .gin--navigation .level-1 > .navigation-menu-wrappe 
  padding-top: 0;

}



.menu-title, .level-1 .navigation-link,

.menu-title,

.level-1 .navigation-link,

.dashboard-link .navigation-link {

  padding-inline: 6px 10px;

}
@@ -1115,10 +1125,6 @@ html:not(.navigation-active) .navigation__sidebar--sticky-menu .navigation-menu- 
  margin-left: -1em;

}



.gin-secondary-toolbar .toolbar-tab--toolbar-item-shortcuts {

  display: none !important;

}



.gin--navigation .navigation-menu__user {

  display: none !important;

}
@@ -1128,3 +1134,23 @@ html:not(.navigation-active) .navigation__sidebar--sticky-menu .navigation-menu- 
  flex-direction: column;

}



#toolbar-administration .level-1 {

  display: block;

}



#toolbar-administration .menu-item {

  font-weight: var(--gin-font-weight-normal);

}



@media (min-width: 61em) {

  #toolbar-administration {

    display: none;

  }

}



.toolbar-menu__title,

.toolbar-menu__sub-title,

.toolbar-menu__trigger {

  display: none !important;

}

includes/html.theme

+4 −28
Original line number Diff line number Diff line
@@ -50,34 +50,10 @@ function gin_preprocess_html(&$variables) { 
    if ($toolbar === 'new') {

      /** @var \Drupal\gin\GinNavigaton $navigation */

      $navigation = \Drupal::classResolver(GinNavigation::class);



      // Get navigation items.

      $menu['top']['bookmarks'] = $navigation->getNavigationBookmarksMenuItems();

      $menu['middle']['content'] = $navigation->getNavigationContentMenuItems();

      $menu['middle']['admin'] = $navigation->getNavigationAdminMenuItems();

      $menu['bottom']['user'] = $navigation->getMenuNavigationUserItems();



      $variables['page_top']['navigation'] = [

        '#theme' => 'navigation',

        '#menu_top' => $menu['top'],

        '#menu_middle' => $menu['middle'],

        '#menu_bottom' => $menu['bottom'],

        '#attached' => [

          'library' => [

            'gin/navigation',

          ],

        ],

        '#access' => \Drupal::currentUser()->hasPermission('access toolbar'),

      ];



      // Get the breadcrumb paths to maintain active trail in the toolbar.

      $links = \Drupal::service('breadcrumb')->build(\Drupal::routeMatch())->getLinks();

      $paths = [];

      foreach ($links as $link) {

        $paths[] = $link->getUrl()->getInternalPath();

      }

      $variables['#attached']['drupalSettings']['active_trail_paths'] = $paths;



      // Get new navigation.

      $variables['page_top']['navigation'] = $navigation->getNavigationStructure();

      // Get active trail.

      $variables['#attached']['drupalSettings']['active_trail_paths'] = $navigation->getNavigationActiveTrail();

      // Set toolbar class.

      $variables['attributes']['class'][] = 'gin--navigation';

    }

includes/theme.theme

+8 −8
Original line number Diff line number Diff line
@@ -38,21 +38,21 @@ function gin_theme() { 
    ],

  ];



  $items['menu_region__middle'] = [

    'base hook' => 'menu',

  $items['menu_region__top'] = [

    'variables' => [

      'menu_name' => NULL,

      'items' => [],

      'attributes' => [],

      'links' => [],

      'title' => NULL,

      'menu_name' => NULL,

    ],

  ];



  $items['menu_region__top'] = [

  $items['menu_region__middle'] = [

    'base hook' => 'menu',

    'variables' => [

      'links' => [],

      'title' => NULL,

      'menu_name' => NULL,

      'items' => [],

      'attributes' => [],

      'title' => NULL,

    ],

  ];

src/GinNavigation.php

+86 −29
Original line number Diff line number Diff line
@@ -68,17 +68,17 @@ class GinNavigation implements ContainerInjectionInterface { 
  }



  /**

   * Get Navigation Content menu.

   * Get Navigation Create menu.

   */

  public function getNavigationContentMenuItems(): array {

  public function getNavigationCreateMenuItems(): array {

    // Get the Entity Type Manager service.

    $entity_type_manager = \Drupal::entityTypeManager();



    // Get node types.

    $content_types = $entity_type_manager->getStorage('node_type')->loadMultiple();

    $content_items = [];

    $content_type_items = [];

    foreach ($content_types as $item) {

      $content_items[] = [

      $content_type_items[] = [

        'title' => $item->label(),

        'url' => Url::fromRoute('node.add', ['node_type' => $item->id()]),

      ];
@@ -86,9 +86,9 @@ class GinNavigation implements ContainerInjectionInterface { 


    // Get block types.

    $block_content_types = BlockContentType::loadMultiple();

    $block_items = [];

    $block_type_items = [];

    foreach ($block_content_types as $item) {

      $block_items[] = [

      $block_type_items[] = [

        'title' => $item->label(),

        'url' => Url::fromRoute('block_content.add_form', ['block_content_type' => $item->id()]),

      ];
@@ -96,9 +96,9 @@ class GinNavigation implements ContainerInjectionInterface { 


    // Get media types.

    $media_types = $entity_type_manager->getStorage('media_type')->loadMultiple();

    $media_items = [];

    $media_type_items = [];

    foreach ($media_types as $item) {

      $media_items[] = [

      $media_type_items[] = [

        'title' => $item->label(),

        'url' => Url::fromRoute('entity.media.add_form', ['media_type' => $item->id()]),

      ];
@@ -106,39 +106,58 @@ class GinNavigation implements ContainerInjectionInterface { 


    // Get taxomony types.

    $taxonomy_types = Vocabulary::loadMultiple();

    $taxonomy_items = [];

    $taxonomy_type_items = [];

    foreach ($taxonomy_types as $item) {

      $taxonomy_items[] = [

      $taxonomy_type_items[] = [

        'title' => $item->label(),

        'url' => Url::fromRoute('entity.taxonomy_term.add_form', ['taxonomy_vocabulary' => $item->id()]),

      ];

    }



    $create_items = [

      ...$content_items,

    // Needs to be this syntax to

    // support older PHP versions

    // for Druapl 9.0+.

    $create_type_items = array_merge(

      $content_type_items,

      [

        [

          'title' => t('Blocks'),

          'url' => '',

        'below' => $block_items,

          'below' => $block_type_items,

        ],

        [

          'title' => t('Media'),

          'url' => '',

        'below' => $media_items,

          'below' => $media_type_items,

        ],

        [

          'title' => t('Taxonomy'),

          'url' => '',

        'below' => $taxonomy_items,

          'below' => $taxonomy_type_items,

        ],

    ];

      ]

    );



    $content_items = [

    $create_items = [

      [

        'title' => t('Create'),

        'url' => Url::fromRoute('node.add_page')->toString(),

        'below' => $create_items,

        'below' => $create_type_items,

      ],

    ];

    return [

      '#theme' => 'menu_region__middle',

      '#items' => $create_items,

      '#menu_name' => 'create',

      '#title' => t('Create Navigation'),

    ];

  }



  /**

   * Get Navigation Content menu.

   */

  public function getNavigationContentMenuItems(): array {

    $content_items = [

      [

        'title' => t('Content'),

        'url' => Url::fromRoute('system.admin_content')->toString(),
@@ -190,4 +209,42 @@ class GinNavigation implements ContainerInjectionInterface { 
    ];

  }



  /**

   * Get Navigation.

   */

  public function getNavigationStructure() {

    // Get navigation items.

    $menu['top']['create'] = $this->getNavigationCreateMenuItems();

    $menu['middle']['content'] = $this->getNavigationContentMenuItems();

    $menu['middle']['admin'] = $this->getNavigationAdminMenuItems();

    $menu['bottom']['user'] = $this->getMenuNavigationUserItems();



    return $variables['page_top']['navigation'] = [

      '#theme' => 'navigation',

      '#menu_top' => $menu['top'],

      '#menu_middle' => $menu['middle'],

      '#menu_bottom' => $menu['bottom'],

      '#attached' => [

        'library' => [

          'gin/navigation',

        ],

      ],

      '#access' => \Drupal::currentUser()->hasPermission('access toolbar'),

    ];

  }



  /**

   * Get Active trail.

   */

  public function getNavigationActiveTrail() {

    // Get the breadcrumb paths to maintain active trail in the toolbar.

    $links = \Drupal::service('breadcrumb')->build(\Drupal::routeMatch())->getLinks();

    $paths = [];

    foreach ($links as $link) {

      $paths[] = $link->getUrl()->getInternalPath();

    }



    return $paths;

  }



}

styles/layout/navigation.scss

+40 −14
Original line number Diff line number Diff line
@@ -39,13 +39,6 @@ html.navigation-active { 
  transition: margin-inline-start var(--gin-transition-fast), margin-left var(--gin-transition-fast);

}



// ------------

// Hide Toolbar

// ------------

#toolbar-administration {

  display: none;

}



// ----------

// Navigation

// ----------
@@ -54,13 +47,18 @@ html.navigation-active { 
  padding-top: 0 !important;



  .navigation__sidebar {

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

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



    // Hide on smaller screens for now as this is not ready yet.

    @include mq($to: medium) {

      display: none;

    }

  }



  .navigation__sidebar,

  .navigation__sidebar--sticky-menu {

    background: var(--gin-bg-layer);

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

  }



  // Navigation header
@@ -141,6 +139,14 @@ html.navigation-active { 
    }

  }



  // Hide Drupal 9 block_content links

  .level-1 > .navigation-link--manage-fields,

  .level-1 > .navigation-link--manage-form-display,

  .level-1 > .navigation-link--manage-display,

  .level-1 > .navigation-link--delete {

    display: none;

  }



  // -----------

  // Level 2 & 3

  // -----------
@@ -176,7 +182,8 @@ html:not(.navigation-active) .gin--navigation .level-1 { 
}



// Fix padding

.menu-title, .level-1 .navigation-link,

.menu-title,

.level-1 .navigation-link,

.dashboard-link .navigation-link {

  padding-inline: 6px 10px;

}
@@ -334,11 +341,6 @@ html:not(.navigation-active) .navigation__sidebar--sticky-menu .navigation-menu- 
  .toolbar-secondary .toolbar-bar .toolbar-id--toolbar-icon-user {

    margin-right: -1em;

  }



  // Hide Shortcuts now we have Bookmarks

  .toolbar-tab--toolbar-item-shortcuts {

    display: none !important;

  }

}



// ---------
@@ -358,3 +360,27 @@ html:not(.navigation-active) .navigation__sidebar--sticky-menu .navigation-menu- 
  display: flex;

  flex-direction: column;

}



// -----------------------

// Hide Toolbar on desktop

// -----------------------

#toolbar-administration {

  .level-1 {

    display: block;

  }



  .menu-item {

    font-weight: var(--gin-font-weight-normal);

  }



  // Show toolbar on smaller screens for now as this is not ready yet.

  @include mq(medium) {

    display: none;

  }

}



.toolbar-menu__title,

.toolbar-menu__sub-title,

.toolbar-menu__trigger {

  display: none !important;

}