fix: issue with drawer and sub-navigation

Author: nmerget

packages/components/src/components/control-panel-mobile/control-panel-mobile.scss

@@ -59,8 +59,10 @@
 
 	.db-drawer {
 		--db-drawer-content-padding-inline: 0;
-		--db-drawer-max-width: variables.$db-container-xs;
+		--db-drawer-max-width: #{variables.$db-container-xs};
 		--db-drawer-max-height: 63vh;
+		--db-drawer-min-width: #{variables.$db-container-xs};
+		--db-drawer-min-height: 63vh;
 
 		> .db-drawer-container {
 			> .db-drawer-content {

packages/components/src/components/shell/model.ts

@@ -5,7 +5,11 @@ import {
 	ShellControlPanelMobilePositionType
 } from '../../shared/model';
 
-export const ShellSubNavigationMobilePosition = ['top', 'bottom'] as const;
+export const ShellSubNavigationMobilePosition = [
+	'top',
+	'bottom',
+	'none'
+] as const;
 export type ShellSubNavigationMobilePositionType =
 	(typeof ShellSubNavigationMobilePosition)[number];
 

packages/components/src/components/shell/shell-mobile.scss

@@ -15,6 +15,19 @@
 	) {
 		&[data-control-panel-mobile-position="top"] {
 			&:not([data-sub-navigation-mobile-position]),
+			&[data-sub-navigation-mobile-position="none"] {
+				grid-template-areas:
+					"control-panel"
+					"main";
+				grid-template-rows:
+					[control-panel] auto
+					[main] 1fr;
+
+				#{string.unquote(custom-elements.$shell-sub-navigation)} {
+					display: none;
+				}
+			}
+
 			&[data-sub-navigation-mobile-position="top"] {
 				grid-template-areas:
 					"control-panel"
@@ -47,17 +60,34 @@
 		}
 
 		&[data-control-panel-mobile-position="bottom"] {
-			grid-template-areas:
-				"sub-navigation"
-				"main"
-				"control-panel";
-			grid-template-rows:
-				[control-panel] auto
-				[main] 1fr
-				[control-panel] auto;
-
-			#{string.unquote(custom-elements.$shell-sub-navigation)} {
-				@include helpers.divider("bottom");
+			&:not([data-sub-navigation-mobile-position]),
+			&[data-sub-navigation-mobile-position="bottom"],
+			&[data-sub-navigation-mobile-position="none"] {
+				grid-template-areas:
+					"main"
+					"control-panel";
+				grid-template-rows:
+					[main] 1fr
+					[control-panel] auto;
+
+				#{string.unquote(custom-elements.$shell-sub-navigation)} {
+					display: none;
+				}
+			}
+
+			&[data-sub-navigation-mobile-position="top"] {
+				grid-template-areas:
+					"sub-navigation"
+					"main"
+					"control-panel";
+				grid-template-rows:
+					[sub-navigation] auto
+					[main] 1fr
+					[control-panel] auto;
+
+				#{string.unquote(custom-elements.$shell-sub-navigation)} {
+					@include helpers.divider("bottom");
+				}
 			}
 		}
 
@@ -73,7 +103,7 @@
 				display: none !important;
 			}
 
-			.db-navigation{
+			.db-navigation {
 				--db-overflow-scroll-button-inset-block: #{variables.$db-spacing-fixed-xs};
 				--db-overflow-scroll-button-inset-inline-start: 0;
 

packages/foundations/dev/icons.html

@@ -330,6 +330,20 @@
 				>
 			</div>
 
+			<div data-spacing="small" class="db-card">
+				<span
+					aria-hidden="true"
+					class="db-icon"
+					data-icon="intermediary_stop"
+					>intermediary_stop</span
+				><span
+					class="db-infotext"
+					data-icon="none"
+					data-semantic="informational"
+					>intermediary_stop</span
+				>
+			</div>
+
 			<div data-spacing="small" class="db-card">
 				<span
 					aria-hidden="true"

showcases/shared/default-component-data.ts

@@ -38,7 +38,7 @@ export type DefaultSettings = {
 	controlPanelDesktopPosition: 'top' | 'left';
 	controlPanelMobilePosition: 'bottom' | 'top';
 	subNavigationDesktopPosition: 'top' | 'left';
-	subNavigationMobilePosition: 'top' | 'bottom';
+	subNavigationMobilePosition: 'top' | 'bottom' | 'none';
 	subNavigation: 'true' | 'false';
 	subNavigationVariant: 'tree' | 'popover';
 	navigationDesktopVariant: 'tree' | 'popover';
@@ -52,15 +52,15 @@ export const defaultSettingsMapping = {
 	navigationMobileVariant: ['tree', 'popover'],
 	subNavigation: ['true', 'false'],
 	subNavigationDesktopPosition: ['top', 'left'],
-	subNavigationMobilePosition: ['top', 'bottom'],
+	subNavigationMobilePosition: ['top', 'bottom', 'none'],
 	subNavigationVariant: ['tree', 'popover']
 };
 
 export const defaultSettings: DefaultSettings = {
 	navigationMobileVariant: 'popover',
 	subNavigation: 'false',
 	subNavigationDesktopPosition: 'top',
-	subNavigationMobilePosition: 'top',
+	subNavigationMobilePosition: 'none',
 	subNavigationVariant: 'tree',
 	controlPanelDesktopPosition: 'top',
 	controlPanelMobilePosition: 'top',