feat(frontend): add vertical navbars (#4027)

* feat(frontend): add vertical navbars

* feat(frontend): add vertical navbars

frontend/src/lib/components/apps/components/display/AppNavbar.svelte

@@ -54,7 +54,13 @@
 
 <InitializeComponent {id} />
 {#if render}
-	<div class="flex flex-row w-full items-center border-b px-4 gap-4 h-12">
+	<div
+		class={twMerge(
+			resolvedConfig?.orientation === 'horizontal'
+				? 'flex flex-row w-full items-center border-b px-4 gap-4 h-12'
+				: 'flex flex-col h-full items-start border-r px-8 gap-2 w-56'
+		)}
+	>
 		{#if resolvedConfig.logo?.selected === 'yes'}
 			<img
 				on:pointerdown|preventDefault
@@ -73,7 +79,13 @@
 		<div class="font-semibold">
 			{resolvedConfig?.title ?? 'No Title'}
 		</div>
-		<div class="flex flex-row gap-4 overflow-x-auto">
+		<div
+			class={twMerge(
+				resolvedConfig?.orientation === 'horizontal'
+					? 'flex flex-row gap-4 overflow-x-auto'
+					: 'flex flex-col gap-4 overflow-y-auto'
+			)}
+		>
 			{#each navbarItems ?? [] as navbarItem, index (index)}
 				<Popover notClickable disablePopup={!Boolean(navbarItem.caption)}>
 					<svelte:fragment slot="text">{navbarItem.caption}</svelte:fragment>
@@ -83,6 +95,7 @@
 						borderColor={resolvedConfig?.borderColor}
 						{index}
 						bind:output
+						orientation={resolvedConfig?.orientation}
 					/>
 				</Popover>
 			{/each}

frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte

@@ -23,6 +23,7 @@
 			currentPath: string
 		}>
 	}
+	export let orientation: 'horizontal' | 'vertical' | undefined = undefined
 
 	let icon: any
 
@@ -143,8 +144,10 @@
 
 {#if !resolvedHidden}
 	<div
-		class={twMerge('py-2', $selected === resolvedPath ? 'border-b-2 border-gray-500' : '')}
-		style={`border-color: ${borderColor ?? 'transparent'}`}
+		class={twMerge('py-2 border-b-2')}
+		style={`border-color: ${
+			$selected === resolvedPath ? borderColor ?? 'transparent' : 'transparent'
+		}`}
 	>
 		<Button
 			on:click={buttonProps.onClick}
@@ -153,6 +156,7 @@
 			color="light"
 			size="xs"
 			disabled={resolvedDisabled}
+			btnClasses={orientation === 'vertical' ? '!justify-start' : ''}
 		>
 			{#if navbarItem.icon}
 				{#key navbarItem.icon}

frontend/src/lib/components/apps/editor/component/components.ts

@@ -3908,7 +3908,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 						},
 						no: {}
 					}
-				} as const
+				} as const,
+				orientation: {
+					type: 'static',
+					fieldType: 'select',
+					value: 'horizontal',
+					selectOptions: [
+						{ value: 'horizontal', label: 'Horizontal' },
+						{ value: 'vertical', label: 'Vertical' }
+					]
+				}
 			}
 		}
 	}