feat: Aura master-detail-layout and side-nav (#10153)

jouni · web-flow · commit c9028405e3fb · 2025-09-15T08:48:40.000+03:00
diff --git a/dev/assets/lucide-icons/cog.svg b/dev/assets/lucide-icons/cog.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 10.27 7 3.34" />
+  <path d="m11 13.73-4 6.93" />
+  <path d="M12 22v-2" />
+  <path d="M12 2v2" />
+  <path d="M14 12h8" />
+  <path d="m17 20.66-1-1.73" />
+  <path d="m17 3.34-1 1.73" />
+  <path d="M2 12h2" />
+  <path d="m20.66 17-1.73-1" />
+  <path d="m20.66 7-1.73 1" />
+  <path d="m3.34 17 1.73-1" />
+  <path d="m3.34 7 1.73 1" />
+  <circle cx="12" cy="12" r="2" />
+  <circle cx="12" cy="12" r="8" />
+</svg>
diff --git a/dev/assets/lucide-icons/home.svg b/dev/assets/lucide-icons/home.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
+  <path
+    d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+</svg>
diff --git a/dev/assets/lucide-icons/messages-square.svg b/dev/assets/lucide-icons/messages-square.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path
+    d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+  <path
+    d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1" />
+</svg>
diff --git a/dev/aura.html b/dev/aura.html
@@ -7,6 +7,11 @@
     <title>Aura</title>
     <link rel="stylesheet" href="../packages/aura/aura.css" />
     <link rel="stylesheet" href="./aura/aura-view.css" />
+    <script type="module">
+      window.Vaadin ||= {};
+      window.Vaadin.featureFlags ||= {};
+      window.Vaadin.featureFlags.masterDetailLayoutComponent = true;
+    </script>
     <script type="module">
       import './aura/aura-color-control.js';
       import './aura/aura-font-family-control.js';
@@ -19,6 +24,7 @@
       import '@vaadin/button';
       import '@vaadin/checkbox';
       import '@vaadin/icon';
+      import '@vaadin/master-detail-layout';
       import '@vaadin/popover';
       import '@vaadin/side-nav';
       import '@vaadin/vertical-layout';
@@ -116,18 +122,59 @@
         </vaadin-button>
       </footer>
 
-      <main class="aura-view" theme="surface">
-        <header>
-          <vaadin-drawer-toggle theme="tertiary"></vaadin-drawer-toggle>
-          <h1>View Title</h1>
-        </header>
-        <vaadin-vertical-layout theme="padding">
-          <div theme="surface" style="padding: 2em; --aura-surface-level: 1"> Level 1 </div>
-          <div theme="surface" style="padding: 2em; --aura-surface-level: 2"> Level 2 </div>
-          <div theme="surface" style="padding: 2em; --aura-surface-level: 3"> Level 3 </div>
-          <div theme="surface" style="padding: 2em; --aura-surface-level: 4"> Level 4 </div>
-        </vaadin-vertical-layout>
-      </main>
+      <vaadin-master-detail-layout master-min-size="14rem" detail-min-size="40rem" class="dashboard-section">
+        <div class="aura-view">
+          <header>
+            <vaadin-drawer-toggle theme="tertiary"></vaadin-drawer-toggle>
+            <h1>Dashboard</h1>
+          </header>
+          <vaadin-scroller theme="overflow-indicators">
+            <vaadin-side-nav theme="contrast">
+              <vaadin-side-nav-item path="#components">
+                <vaadin-icon src="./assets/lucide-icons/home.svg" slot="prefix"></vaadin-icon>
+                <span>Components</span>
+              </vaadin-side-nav-item>
+              <vaadin-side-nav-item>
+                <vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
+                <span>Grid View</span>
+              </vaadin-side-nav-item>
+              <vaadin-side-nav-item>
+                <vaadin-icon src="./assets/lucide-icons/chart-pie.svg" slot="prefix"></vaadin-icon>
+                <span>Reporting</span>
+              </vaadin-side-nav-item>
+              <vaadin-side-nav-item>
+                <vaadin-icon src="./assets/lucide-icons/cog.svg" slot="prefix"></vaadin-icon>
+                <span>Settings</span>
+                <vaadin-side-nav-item slot="children">
+                  <span>Account</span>
+                </vaadin-side-nav-item>
+                <vaadin-side-nav-item slot="children">
+                  <span>Preferences</span>
+                </vaadin-side-nav-item>
+                <vaadin-side-nav-item slot="children">
+                  <span>Subscription</span>
+                </vaadin-side-nav-item> </vaadin-side-nav-item
+              ><vaadin-side-nav-item>
+                <vaadin-icon src="./assets/lucide-icons/messages-square.svg" slot="prefix"></vaadin-icon>
+                <span>Support</span>
+              </vaadin-side-nav-item>
+            </vaadin-side-nav>
+          </vaadin-scroller>
+        </div>
+
+        <main class="aura-view" slot="detail">
+          <header>
+            <vaadin-drawer-toggle theme="tertiary"></vaadin-drawer-toggle>
+            <h1>Components</h1>
+          </header>
+          <vaadin-vertical-layout theme="padding">
+            <div theme="surface" style="padding: 2em; --aura-surface-level: 1">Level 1</div>
+            <div theme="surface" style="padding: 2em; --aura-surface-level: 2">Level 2</div>
+            <div theme="surface" style="padding: 2em; --aura-surface-level: 3">Level 3</div>
+            <div theme="surface" style="padding: 2em; --aura-surface-level: 4">Level 4</div>
+          </vaadin-vertical-layout>
+        </main>
+      </vaadin-master-detail-layout>
     </vaadin-app-layout>
 
     <vaadin-popover
diff --git a/packages/aura/aura.css b/packages/aura/aura.css
@@ -7,8 +7,12 @@
 @import './src/typography.css';
 
 @import './src/components/app-layout.css';
+@import './src/components/master-detail-layout.css';
 @import './src/components/overlay.css';
+@import './src/components/side-nav.css';
 
 :where(html) {
   cursor: default;
+  /* TODO: slightly smaller chevron than the one in base styles - consider if we should do this in base styles */
+  --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
 }
diff --git a/packages/aura/src/components/master-detail-layout.css b/packages/aura/src/components/master-detail-layout.css
@@ -0,0 +1,40 @@
+vaadin-master-detail-layout::part(detail) {
+  --aura-surface-level: 2;
+  background: var(--aura-surface) padding-box;
+}
+
+vaadin-master-detail-layout[drawer]::part(detail) {
+  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
+  background: var(--aura-surface) padding-box;
+  -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
+  backdrop-filter: var(--aura-overlay-backdrop-filter);
+  box-shadow:
+    inset 1px 0 0 0 var(--aura-overlay-inner-outline-color),
+    -1px 0 0 0 var(--aura-overlay-outline-color),
+    var(--aura-shadow-m);
+}
+
+vaadin-master-detail-layout[containment='viewport'][drawer]::part(detail) {
+  box-shadow: var(--aura-overlay-shadow);
+}
+
+/* TODO could be a built-in variant */
+vaadin-master-detail-layout[theme~='inset-drawer'][drawer]::part(detail),
+vaadin-master-detail-layout[containment='viewport'][drawer]::part(detail) {
+  margin: calc(var(--aura-app-layout-inset) / 2);
+  border-radius: var(--_app-layout-radius);
+}
+
+vaadin-master-detail-layout > vaadin-master-detail-layout,
+vaadin-master-detail-layout:not([drawer])::part(detail) {
+  border-start-end-radius: var(--_app-layout-radius);
+  border-end-end-radius: var(--_app-layout-radius);
+}
+
+/* TODO these end up affecting all MDLs, not just the one directly inside the App Layout */
+::view-transition-group(vaadin-mdl-backdrop),
+::view-transition-group(vaadin-mdl-master),
+::view-transition-group(vaadin-mdl-detail) {
+  border-radius: var(--_app-layout-radius);
+  overflow: hidden;
+}
diff --git a/packages/aura/src/components/side-nav.css b/packages/aura/src/components/side-nav.css
@@ -0,0 +1,90 @@
+:where(:root, :host) {
+  --vaadin-side-nav-label-line-height: var(--aura-line-height-xs);
+  --vaadin-side-nav-label-font-weight: var(--aura-font-weight-medium);
+  --vaadin-side-nav-item-font-weight: var(--aura-font-weight-medium);
+  --vaadin-side-nav-item-border-width: 1px;
+  --vaadin-side-nav-items-gap: var(--vaadin-gap-xs);
+}
+
+vaadin-side-nav + vaadin-side-nav {
+  margin-top: var(--vaadin-gap-l);
+}
+
+vaadin-side-nav-item::part(content) {
+  transition:
+    color 120ms,
+    border-color 120ms,
+    background-color 120ms;
+  background-clip: padding-box;
+  --aura-surface-level: 3;
+}
+
+vaadin-side-nav-item:not([disabled])::part(content):hover {
+  --vaadin-side-nav-item-color: var(--vaadin-color);
+}
+
+vaadin-side-nav-item[current]::part(content) {
+  --vaadin-side-nav-item-background: var(--aura-surface);
+  --vaadin-side-nav-item-border-color: var(--vaadin-border-color-subtle);
+}
+
+/* Contrast variant */
+
+vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current]::part(content) {
+  color-scheme: var(--_side-nav-current-item-color-scheme, dark);
+  background: var(--aura-surface-solid);
+  border-color: transparent;
+  outline-offset: 2px;
+}
+
+vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current] > :not([slot='children']) {
+  --aura-red: var(--vaadin-color);
+  --aura-red-text: var(--vaadin-color);
+  --aura-orange: var(--vaadin-color);
+  --aura-orange-text: var(--vaadin-color);
+  --aura-yellow: var(--vaadin-color);
+  --aura-yellow-text: var(--vaadin-color);
+  --aura-green: var(--vaadin-color);
+  --aura-green-text: var(--vaadin-color);
+  --aura-blue: var(--vaadin-color);
+  --aura-blue-text: var(--vaadin-color);
+  --aura-purple: var(--vaadin-color);
+  --aura-purple-text: var(--vaadin-color);
+}
+
+@container style(--aura-color-scheme: dark) {
+  [slot='drawer'] {
+    --_side-nav-current-item-color-scheme: light;
+  }
+}
+
+@container style(--aura-content-color-scheme: dark) {
+  vaadin-app-layout > :not([slot]) {
+    --_side-nav-current-item-color-scheme: light;
+  }
+}
+
+@container style(--aura-content-color-scheme: light) {
+  vaadin-app-layout > :not([slot]) {
+    --_side-nav-current-item-color-scheme: dark;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  @container style(--aura-content-color-scheme: light dark) {
+    vaadin-app-layout > :not([slot]) {
+      --_side-nav-current-item-color-scheme: light;
+    }
+  }
+
+  @container style(--aura-color-scheme: light dark) {
+    [slot='drawer'] {
+      --_side-nav-current-item-color-scheme: light;
+    }
+  }
+}
+
+/* TODO bug in component/base styles: hide label part if no label is provided */
+vaadin-side-nav:not(:has([slot='label']))::part(label) {
+  display: none;
+}
diff --git a/packages/aura/src/surface.css b/packages/aura/src/surface.css
@@ -8,6 +8,8 @@ html,
 [theme~='surface-solid'],
 vaadin-app-layout::part(navbar),
 vaadin-app-layout::part(drawer),
+vaadin-master-detail-layout::part(detail),
+vaadin-side-nav-item::part(content),
 ::part(overlay) {
   --aura-surface-opacity: 0.5;
 
