Issue #3425081 by amateescu, finnsky, plopesc, m4olivei, pjudge, arunkumark,...

Issue #3425081 by amateescu, finnsky, plopesc, m4olivei, pjudge, arunkumark, ckrina, gábor hojtsy, trackleft2, KeyboardCowboy: Integrate Navigation with Workspaces

core/modules/navigation/components/toolbar-button/assets/throbber.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <style>
+    @keyframes spinner{to{transform:rotate(360deg)}}
+  </style>
+  <path d="M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 19a8 8 0 1 1 8-8 8 8 0 0 1-8 8Z" opacity=".25"/>
+  <path d="M10.14 1.16a11 11 0 0 0-9 8.92A1.59 1.59 0 0 0 2.46 12a1.52 1.52 0 0 0 1.65-1.3 8 8 0 0 1 6.66-6.61A1.42 1.42 0 0 0 12 2.69a1.57 1.57 0 0 0-1.86-1.53Z" style="animation:spinner .75s infinite linear" transform-origin="center"/>
+</svg>
\ No newline at end of file

core/modules/navigation/components/toolbar-button/assets/workspaces.svg

+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 6.25H1.5C1.10218 6.25 0.720644 6.40804 0.43934 6.68934C0.158035 6.97064 0 7.35218 0 7.75V16.75C0 17.1478 0.158035 17.5294 0.43934 17.8107C0.720644 18.092 1.10218 18.25 1.5 18.25H16.5C16.8978 18.25 17.2794 18.092 17.5607 17.8107C17.842 17.5294 18 17.1478 18 16.75V7.75C18 7.35218 17.842 6.97064 17.5607 6.68934C17.2794 6.40804 16.8978 6.25 16.5 6.25ZM16.5 16.75H1.5V7.75H16.5V16.75ZM1.5 4C1.5 3.80109 1.57902 3.61032 1.71967 3.46967C1.86032 3.32902 2.05109 3.25 2.25 3.25H15.75C15.9489 3.25 16.1397 3.32902 16.2803 3.46967C16.421 3.61032 16.5 3.80109 16.5 4C16.5 4.19891 16.421 4.38968 16.2803 4.53033C16.1397 4.67098 15.9489 4.75 15.75 4.75H2.25C2.05109 4.75 1.86032 4.67098 1.71967 4.53033C1.57902 4.38968 1.5 4.19891 1.5 4ZM3 1C3 0.801088 3.07902 0.610322 3.21967 0.46967C3.36032 0.329018 3.55109 0.25 3.75 0.25H14.25C14.4489 0.25 14.6397 0.329018 14.7803 0.46967C14.921 0.610322 15 0.801088 15 1C15 1.19891 14.921 1.38968 14.7803 1.53033C14.6397 1.67098 14.4489 1.75 14.25 1.75H3.75C3.55109 1.75 3.36032 1.67098 3.21967 1.53033C3.07902 1.38968 3 1.19891 3 1Z" fill="#13161A"/>
+</svg>

core/modules/navigation/components/toolbar-button/toolbar-button.css

@@ -9,8 +9,21 @@
  * @file
  * Toolbar button styles.
  */
-:root {
+[data-drupal-admin-styles] {
   --toolbar-button-outline-offset: 0;
+  --toolbar-button-bg: transparent;
+  --toolbar-button-color: var(--admin-toolbar-color-gray-800);
+  /* Hover styles. */
+  --toolbar-button-hover-bg: var(--admin-toolbar-color-gray-050);
+  --toolbar-button-hover-color: var(--admin-toolbar-color-gray-990);
+  /* Focus variables. */
+  --toolbar-button-focus-color: var(--admin-toolbar-color-blue-700);
+  /* Current variables */
+  --toolbar-button-current-bg: var(--admin-toolbar-color-gray-050);
+  --toolbar-button-current-color: var(--admin-toolbar-color-blue-700);
+  /* Active child variables. */
+  --toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);
+  --toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);
 }
 .toolbar-button {
   z-index: 1;
@@ -23,35 +36,45 @@
   -webkit-text-decoration: none;
   text-decoration: none;
   word-break: break-word;
-  color: var(--admin-toolbar-color-gray-800);
+  color: var(--toolbar-button-color);
   border: 0;
   border-radius: var(--admin-toolbar-space-8);
-  background-color: transparent;
+  background-color: var(--toolbar-button-bg);
   font-size: var(--admin-toolbar-font-size-info-sm);
   font-variation-settings: "wght" 700;
   line-height: var(--admin-toolbar-line-height-info-sm);
   gap: calc(0.5 * var(--admin-toolbar-rem));
 }
 .toolbar-button:has(+ .toolbar-popover__wrapper .is-active) {
-  color: var(--admin-toolbar-color-gray-950);
-  background-color: var(--admin-toolbar-color-gray-050);
+  color: var(--toolbar-button-has-active-child-color);
+  background-color: var(--toolbar-button-has-active-child-bg);
+}
+.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber),
+.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) {
+  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e  %3cstyle%3e    %40keyframes spinner%7bto%7btransform:rotate(360deg)%7d%7d  %3c/style%3e  %3cpath d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 19a8 8 0 1 1 8-8 8 8 0 0 1-8 8Z' opacity='.25'/%3e  %3cpath d='M10.14 1.16a11 11 0 0 0-9 8.92A1.59 1.59 0 0 0 2.46 12a1.52 1.52 0 0 0 1.65-1.3 8 8 0 0 1 6.66-6.61A1.42 1.42 0 0 0 12 2.69a1.57 1.57 0 0 0-1.86-1.53Z' style='animation:spinner .75s infinite linear' transform-origin='center'/%3e%3c/svg%3e");
+}
+.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber) + .ajax-progress--throbber,
+.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) + .ajax-progress--throbber,
+.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber) + .ajax-progress-throbber,
+.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) + .ajax-progress-throbber {
+  display: none;
 }
 .toolbar-button:hover {
   z-index: 20;
-  color: var(--admin-toolbar-color-gray-990);
+  color: var(--toolbar-button-hover-color);
   outline: 2px solid var(--admin-toolbar-color-blue-200);
   outline-offset: var(--toolbar-button-outline-offset);
-  background-color: var(--admin-toolbar-color-gray-050);
+  background-color: var(--toolbar-button-hover-bg);
 }
 .toolbar-button:focus {
   z-index: 10;
-  color: var(--admin-toolbar-color-blue-700);
+  color: var(--toolbar-button-focus-color);
   outline: 2px solid var(--admin-toolbar-color-focus);
   outline-offset: var(--toolbar-button-outline-offset);
 }
 .toolbar-button.current {
-  color: var(--admin-toolbar-color-blue-700);
-  background-color: var(--admin-toolbar-color-gray-050);
+  color: var(--toolbar-button-current-color);
+  background-color: var(--toolbar-button-current-bg);
 }
 /* Dark color modifier for submenus title */
 .toolbar-button--dark {
@@ -67,9 +90,9 @@
 .toolbar-button--non-interactive:hover:focus {
   z-index: 1;
   cursor: auto;
-  color: var(--admin-toolbar-color-gray-800);
+  color: var(--toolbar-button-color);
   outline: 0;
-  background-color: transparent;
+  background-color: var(--toolbar-button-bg);
 }
 .toolbar-button--small-offset {
   --toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
@@ -220,6 +243,9 @@
 .toolbar-button--icon--user {
   --icon: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M10 1.875C8.39303 1.875 6.82214 2.35152 5.486 3.24431C4.14985 4.1371 3.10844 5.40605 2.49348 6.8907C1.87852 8.37535 1.71762 10.009 2.03112 11.5851C2.34463 13.1612 3.11846 14.6089 4.25476 15.7452C5.39106 16.8815 6.8388 17.6554 8.4149 17.9689C9.99099 18.2824 11.6247 18.1215 13.1093 17.5065C14.594 16.8916 15.8629 15.8502 16.7557 14.514C17.6485 13.1779 18.125 11.607 18.125 10C18.1227 7.84581 17.266 5.78051 15.7427 4.25727C14.2195 2.73403 12.1542 1.87727 10 1.875ZM5.7875 15.4297C6.23964 14.7226 6.86251 14.1406 7.59869 13.7375C8.33488 13.3345 9.16069 13.1232 10 13.1232C10.8393 13.1232 11.6651 13.3345 12.4013 13.7375C13.1375 14.1406 13.7604 14.7226 14.2125 15.4297C13.0081 16.3664 11.5258 16.8749 10 16.8749C8.4742 16.8749 6.99193 16.3664 5.7875 15.4297ZM7.5 9.375C7.5 8.88055 7.64663 8.3972 7.92133 7.98607C8.19603 7.57495 8.58648 7.25452 9.04329 7.0653C9.50011 6.87608 10.0028 6.82657 10.4877 6.92304C10.9727 7.0195 11.4181 7.2576 11.7678 7.60723C12.1174 7.95686 12.3555 8.40232 12.452 8.88727C12.5484 9.37223 12.4989 9.87489 12.3097 10.3317C12.1205 10.7885 11.8001 11.179 11.3889 11.4537C10.9778 11.7284 10.4945 11.875 10 11.875C9.33696 11.875 8.70108 11.6116 8.23224 11.1428C7.7634 10.6739 7.5 10.038 7.5 9.375ZM15.1375 14.5633C14.4404 13.5532 13.4603 12.7717 12.3203 12.3172C12.9327 11.8349 13.3795 11.1737 13.5987 10.4257C13.8179 9.67766 13.7985 8.87992 13.5433 8.1434C13.2881 7.40687 12.8097 6.76819 12.1746 6.31616C11.5396 5.86414 10.7795 5.62123 10 5.62123C9.22052 5.62123 8.4604 5.86414 7.82536 6.31616C7.19033 6.76819 6.71193 7.40687 6.45671 8.1434C6.20149 8.87992 6.18212 9.67766 6.40131 10.4257C6.62049 11.1737 7.06734 11.8349 7.67969 12.3172C6.5397 12.7717 5.55956 13.5532 4.8625 14.5633C3.9817 13.5728 3.406 12.3488 3.20473 11.0387C3.00346 9.72856 3.1852 8.3882 3.72806 7.17898C4.27093 5.96977 5.15178 4.94326 6.26454 4.22308C7.3773 3.50289 8.67452 3.11972 10 3.11972C11.3255 3.11972 12.6227 3.50289 13.7355 4.22308C14.8482 4.94326 15.7291 5.96977 16.2719 7.17898C16.8148 8.3882 16.9966 9.72856 16.7953 11.0387C16.594 12.3488 16.0183 13.5728 15.1375 14.5633Z' fill='currentColor'/%3e%3c/svg%3e");
 }
+.toolbar-button--icon--workspaces {
+  --icon: url("data:image/svg+xml,%3csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M16.5 6.25H1.5C1.10218 6.25 0.720644 6.40804 0.43934 6.68934C0.158035 6.97064 0 7.35218 0 7.75V16.75C0 17.1478 0.158035 17.5294 0.43934 17.8107C0.720644 18.092 1.10218 18.25 1.5 18.25H16.5C16.8978 18.25 17.2794 18.092 17.5607 17.8107C17.842 17.5294 18 17.1478 18 16.75V7.75C18 7.35218 17.842 6.97064 17.5607 6.68934C17.2794 6.40804 16.8978 6.25 16.5 6.25ZM16.5 16.75H1.5V7.75H16.5V16.75ZM1.5 4C1.5 3.80109 1.57902 3.61032 1.71967 3.46967C1.86032 3.32902 2.05109 3.25 2.25 3.25H15.75C15.9489 3.25 16.1397 3.32902 16.2803 3.46967C16.421 3.61032 16.5 3.80109 16.5 4C16.5 4.19891 16.421 4.38968 16.2803 4.53033C16.1397 4.67098 15.9489 4.75 15.75 4.75H2.25C2.05109 4.75 1.86032 4.67098 1.71967 4.53033C1.57902 4.38968 1.5 4.19891 1.5 4ZM3 1C3 0.801088 3.07902 0.610322 3.21967 0.46967C3.36032 0.329018 3.55109 0.25 3.75 0.25H14.25C14.4489 0.25 14.6397 0.329018 14.7803 0.46967C14.921 0.610322 15 0.801088 15 1C15 1.19891 14.921 1.38968 14.7803 1.53033C14.6397 1.67098 14.4489 1.75 14.25 1.75H3.75C3.55109 1.75 3.36032 1.67098 3.21967 1.53033C3.07902 1.38968 3 1.19891 3 1Z' fill='%2313161A'/%3e%3c/svg%3e");
+}
 .toolbar-button--collapsible::after {
   display: none;
 }

core/modules/navigation/components/toolbar-button/toolbar-button.pcss.css

@@ -6,8 +6,21 @@
 
 @import "../../css/base/media-queries.pcss.css";
 
-:root {
+[data-drupal-admin-styles] {
   --toolbar-button-outline-offset: 0;
+  --toolbar-button-bg: transparent;
+  --toolbar-button-color: var(--admin-toolbar-color-gray-800);
+  /* Hover styles. */
+  --toolbar-button-hover-bg: var(--admin-toolbar-color-gray-050);
+  --toolbar-button-hover-color: var(--admin-toolbar-color-gray-990);
+  /* Focus variables. */
+  --toolbar-button-focus-color: var(--admin-toolbar-color-blue-700);
+  /* Current variables */
+  --toolbar-button-current-bg: var(--admin-toolbar-color-gray-050);
+  --toolbar-button-current-color: var(--admin-toolbar-color-blue-700);
+  /* Active child variables. */
+  --toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);
+  --toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);
 }
 
 .toolbar-button {
@@ -20,38 +33,48 @@
   text-align: start;
   text-decoration: none;
   word-break: break-word;
-  color: var(--admin-toolbar-color-gray-800);
+  color: var(--toolbar-button-color);
   border: 0;
   border-radius: var(--admin-toolbar-space-8);
-  background-color: transparent;
+  background-color: var(--toolbar-button-bg);
   font-size: var(--admin-toolbar-font-size-info-sm);
   font-variation-settings: "wght" 700;
   line-height: var(--admin-toolbar-line-height-info-sm);
   gap: calc(0.5 * var(--admin-toolbar-rem));
 
   &:has(+ .toolbar-popover__wrapper .is-active) {
-    color: var(--admin-toolbar-color-gray-950);
-    background-color: var(--admin-toolbar-color-gray-050);
+    color: var(--toolbar-button-has-active-child-color);
+    background-color: var(--toolbar-button-has-active-child-bg);
+  }
+
+  &[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber),
+  &[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) {
+    --icon: url(./assets/throbber.svg);
+
+    & + .ajax-progress--throbber,
+    & + .ajax-progress-throbber {
+      display: none;
+    }
   }
 
   &:hover {
     z-index: 20;
-    color: var(--admin-toolbar-color-gray-990);
+    color: var(--toolbar-button-hover-color);
     outline: 2px solid var(--admin-toolbar-color-blue-200);
     outline-offset: var(--toolbar-button-outline-offset);
-    background-color: var(--admin-toolbar-color-gray-050);
+    background-color: var(--toolbar-button-hover-bg);
   }
 
   &:focus {
     z-index: 10;
-    color: var(--admin-toolbar-color-blue-700);
+    color: var(--toolbar-button-focus-color);
     outline: 2px solid var(--admin-toolbar-color-focus);
     outline-offset: var(--toolbar-button-outline-offset);
   }
 
   &.current {
-    color: var(--admin-toolbar-color-blue-700);
-    background-color: var(--admin-toolbar-color-gray-050);
+    color: var(--toolbar-button-current-color);
+    background-color: var(--toolbar-button-current-bg);
   }
 }
 
@@ -72,9 +95,9 @@
   &:hover:focus {
     z-index: 1;
     cursor: auto;
-    color: var(--admin-toolbar-color-gray-800);
+    color: var(--toolbar-button-color);
     outline: 0;
-    background-color: transparent;
+    background-color: var(--toolbar-button-bg);
   }
 }
 
@@ -269,6 +292,10 @@
   --icon: url(./assets/user.svg);
 }
 
+.toolbar-button--icon--workspaces {
+  --icon: url(./assets/workspaces.svg);
+}
+
 .toolbar-button--collapsible {
   &::after {
     display: none;

core/modules/navigation/css/components/toolbar-workspaces.css

+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for the Workspaces navigation item.
+ */
+
+.toolbar-button--workspaces {
+  --toolbar-button-bg: var(--admin-toolbar-color-orange-300);
+  --toolbar-button-color: var(--admin-toolbar-color-gray-990);
+  --toolbar-button-hover-bg: var(--admin-toolbar-color-orange-300);
+  --toolbar-button-current-bg: var(--admin-toolbar-color-orange-300);
+}
+
+.toolbar-button--workspaces--live {
+  --toolbar-button-bg: #87cc5f;
+  --toolbar-button-color: var(--admin-toolbar-color-gray-990);
+  --toolbar-button-hover-bg: #87cc5f;
+  --toolbar-button-current-bg: #87cc5f;
+}

core/modules/navigation/css/components/toolbar-workspaces.pcss.css

+/**
+ * @file
+ * Styling for the Workspaces navigation item.
+ */
+
+.toolbar-button--workspaces {
+  --toolbar-button-bg: var(--admin-toolbar-color-orange-300);
+  --toolbar-button-color: var(--admin-toolbar-color-gray-990);
+  --toolbar-button-hover-bg: var(--admin-toolbar-color-orange-300);
+  --toolbar-button-current-bg: var(--admin-toolbar-color-orange-300);
+}
+
+.toolbar-button--workspaces--live {
+  --toolbar-button-bg: #87cc5f;
+  --toolbar-button-color: var(--admin-toolbar-color-gray-990);
+  --toolbar-button-hover-bg: #87cc5f;
+  --toolbar-button-current-bg: #87cc5f;
+}

core/modules/navigation/css/components/tooltip.pcss.css

@@ -3,7 +3,6 @@
  * @file
  * Tooltip styles.
  */
-
 @import "../base/media-queries.pcss.css";
 
 .toolbar-tooltip {

core/modules/navigation/js/admin-toolbar-wrapper.js

@@ -143,10 +143,13 @@
                 : Drupal.t('Expand sidebar');
             }
           });
+          localStorage.setItem('Drupal.navigation.sidebarExpanded', toState);
         };
 
+        if (context === document) {
           let firstState =
-          localStorage.getItem('Drupal.navigation.sidebarExpanded') !== 'false';
+            localStorage.getItem('Drupal.navigation.sidebarExpanded') !==
+            'false';
 
           // We need to display closed sidebar on init on mobile.
           if (window.matchMedia('(max-width: 1023px)').matches) {
@@ -179,9 +182,9 @@
                 }),
               );
               toggleTriggers(state);
-            localStorage.setItem('Drupal.navigation.sidebarExpanded', state);
             });
           });
+        }
       },
     };
   }

core/modules/navigation/navigation.libraries.yml

@@ -28,6 +28,16 @@ internal.navigation:
     - navigation/internal.popover
     - navigation/internal.safe-triangle
 
+internal.navigation-workspaces:
+  # Internal library. Do not depend on it outside core nor add core usage
+  # beyond the Navigation module.
+  version: VERSION
+  css:
+    theme:
+      css/components/toolbar-workspaces.css: {}
+  dependencies:
+    - navigation/internal.navigation
+
 admin-reset-styles:
   css:
     base:

core/modules/navigation/navigation.services.yml

@@ -16,6 +16,7 @@ services:
         '@request_stack',
         '@extension.list.module',
         '@current_user',
+        '%renderer.config%',
       ]
   Drupal\navigation\NavigationRenderer: '@navigation.renderer'
 

core/modules/navigation/src/Hook/NavigationHooks.php

@@ -2,6 +2,7 @@
 
 namespace Drupal\navigation\Hook;
 
+use Drupal\Core\StringTranslation\StringTranslationTrait;
 use Drupal\navigation\RenderCallbacks;
 use Drupal\Component\Plugin\PluginBase;
 use Drupal\navigation\Plugin\SectionStorage\NavigationSectionStorage;
@@ -17,6 +18,8 @@
  */
 class NavigationHooks {
 
+  use StringTranslationTrait;
+
   /**
    * Implements hook_help().
    */
@@ -197,4 +200,40 @@ public function elementInfoAlter(array &$info): void {
     }
   }
 
+  /**
+   * Implements hook_navigation_content_top().
+   */
+  #[Hook('navigation_content_top')]
+  public function navigationWorkspaces(): array {
+    // This navigation item requires the Workspaces UI module.
+    if (!\Drupal::moduleHandler()->moduleExists('workspaces_ui')) {
+      return [];
+    }
+
+    $current_user = \Drupal::currentUser();
+    if (!$current_user->hasPermission('administer workspaces')
+      && !$current_user->hasPermission('view own workspace')
+      && !$current_user->hasPermission('view any workspace')
+    ) {
+      return [];
+    }
+
+    return [
+      'workspace' => [
+        // @phpstan-ignore-next-line
+        '#lazy_builder' => ['navigation.workspaces_lazy_builders:renderNavigationLinks', []],
+        '#create_placeholder' => TRUE,
+        '#lazy_builder_preview' => [
+          '#type' => 'component',
+          '#component' => 'navigation:toolbar-button',
+          '#props' => [
+            'html_tag' => 'a',
+            'text' => $this->t('Workspace'),
+          ],
+        ],
+        '#weight' => -1000,
+      ],
+    ];
+  }
+
 }

core/modules/navigation/src/NavigationRenderer.php

@@ -77,6 +77,7 @@ public function __construct(
     private RequestStack $requestStack,
     private ModuleExtensionList $moduleExtensionList,
     private AccountInterface $currentUser,
+    private array $rendererConfig,
   ) {}
 
   /**
@@ -130,7 +131,7 @@ public function doBuildNavigation($build): array {
     if ($storage) {
       foreach ($storage->getSections() as $delta => $section) {
         $build[$delta] = $section->toRenderArray([]);
-        $build[$delta]['#cache']['contexts'] = ['user.permissions', 'theme', 'languages:language_interface'];
+        $build[$delta]['#cache']['contexts'] = $this->rendererConfig['required_cache_contexts'];
       }
     }
     // The render array is built based on decisions made by SectionStorage

core/modules/navigation/src/NavigationServiceProvider.php

@@ -25,6 +25,13 @@ public function register(ContainerBuilder $container): void {
         ->register('navigation.shortcut_lazy_builder', ShortcutLazyBuilder::class)
         ->addArgument(new Reference('shortcut.lazy_builders'));
     }
+
+    // If Workspaces module service is available, register our own service.
+    if ($container->has('workspaces.lazy_builders')) {
+      $container
+        ->register('navigation.workspaces_lazy_builders', WorkspacesLazyBuilder::class)
+        ->addArgument(new Reference('workspaces.manager'));
+    }
   }
 
 }

core/modules/navigation/src/WorkspacesLazyBuilder.php

+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\navigation;
+
+use Drupal\Component\Serialization\Json;
+use Drupal\Core\Routing\RedirectDestinationTrait;
+use Drupal\Core\Security\Attribute\TrustedCallback;
+use Drupal\Core\StringTranslation\StringTranslationTrait;
+use Drupal\Core\Url;
+use Drupal\workspaces\WorkspaceManagerInterface;
+
+/**
+ * Defines a service for workspaces #lazy_builder callbacks.
+ *
+ * @internal
+ */
+final class WorkspacesLazyBuilder {
+
+  use RedirectDestinationTrait;
+  use StringTranslationTrait;
+
+  public function __construct(
+    protected WorkspaceManagerInterface $workspaceManager,
+  ) {}
+
+  /**
+   * Lazy builder callback for rendering navigation links.
+   *
+   * @return array
+   *   A renderable array as expected by the renderer service.
+   */
+  #[TrustedCallback]
+  public function renderNavigationLinks(): array {
+    $active_workspace = $this->workspaceManager->getActiveWorkspace();
+
+    $url = Url::fromRoute('entity.workspace.collection', [], ['query' => $this->getDestinationArray()]);
+    $url->setOption('attributes', [
+      'class' => [
+        $active_workspace ? 'toolbar-button--workspaces' : 'toolbar-button--workspaces--live',
+        'use-ajax',
+      ],
+      'data-dialog-type' => 'dialog',
+      'data-dialog-renderer' => 'off_canvas_top',
+      'data-dialog-options' => Json::encode([
+        'height' => 161,
+        'classes' => [
+          'ui-dialog' => 'workspaces-dialog',
+        ],
+      ]),
+    ]);
+
+    return [
+      '#theme' => 'navigation_menu',
+      '#title' => $this->t('Workspace'),
+      '#items' => [
+        [
+          'title' => $active_workspace ? $active_workspace->label() : $this->t('Live'),
+          'url' => $url,
+          'class' => 'workspaces',
+        ],
+      ],
+      '#attached' => [
+        'library' => [
+          'navigation/internal.navigation-workspaces',
+          'workspaces/drupal.workspaces.off-canvas',
+        ],
+      ],
+      '#cache' => [
+        'max-age' => 0,
+      ],
+    ];
+  }
+
+}

core/modules/navigation/tests/src/Nightwatch/Tests/expandCollapseTest.js

@@ -26,17 +26,19 @@ module.exports = {
       browser
         .drupalRelativeURL('/')
         .waitForElementPresent(
-          '[data-once="admin-toolbar-document-triggers-listener"][data-admin-toolbar="expanded"]',
+          '[data-once="admin-toolbar-document-triggers-listener"]',
         )
         // This pause required to wait for first init event.
-        .waitForElementVisible(selectors.expandButton.expanded)
-        .click(selectors.expandButton.expanded)
         .waitForElementNotPresent(selectors.expandButton.expanded)
         .waitForElementPresent(selectors.expandButton.collapsed)
         .waitForElementPresent(selectors.htmlAttribute.collapsed)
         .click(selectors.expandButton.collapsed)
         .waitForElementPresent(selectors.expandButton.expanded)
-        .waitForElementPresent(selectors.htmlAttribute.expanded);
+        .waitForElementPresent(selectors.htmlAttribute.expanded)
+        .click(selectors.expandButton.expanded)
+        .waitForElementNotPresent(selectors.expandButton.expanded)
+        .waitForElementPresent(selectors.expandButton.collapsed)
+        .waitForElementPresent(selectors.htmlAttribute.collapsed);
     });
   },
 };

core/modules/workspaces/workspaces.libraries.yml

-drupal.workspaces.toolbar:
+drupal.workspaces.off-canvas:
   version: VERSION
   css:
     theme:
       css/workspaces.off-canvas.css: {}
+drupal.workspaces.toolbar:
+  version: VERSION
+  css:
+    theme:
       css/workspaces.toolbar.css: {}
+  dependencies:
+    - workspaces/drupal.workspaces.off-canvas
 drupal.workspaces.overview:
   version: VERSION
   css:

core/tests/Drupal/KernelTests/Core/Theme/Stable9LibraryOverrideTest.php

@@ -30,6 +30,7 @@ class Stable9LibraryOverrideTest extends StableLibraryOverrideTestBase {
     'options/drupal.options-icon',
     'telephone/drupal.telephone-icon',
     // This library will be changed in https://www.drupal.org/i/3096017.
+    'workspaces/drupal.workspaces.off-canvas',
     'workspaces/drupal.workspaces.toolbar',
     // This library will be removed in https://www.drupal.org/i/3207233.
     'workspaces/drupal.workspaces.overview',