From 1898a005603e092f0176e2b71e554c2d6d028616 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 5 Jul 2024 13:10:10 +0200
Subject: [PATCH] feat(frontend): add vertical navbars (#4027)

* feat(frontend): add vertical navbars

* feat(frontend): add vertical navbars
---
 .../apps/components/display/AppNavbar.svelte    | 17 +++++++++++++++--
 .../components/display/AppNavbarItem.svelte     |  8 ++++++--
 .../apps/editor/component/components.ts         | 11 ++++++++++-
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppNavbar.svelte b/frontend/src/lib/components/apps/components/display/AppNavbar.svelte
index 832ccfbc85..5b47001913 100644
--- a/frontend/src/lib/components/apps/components/display/AppNavbar.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte b/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte
index 0dca9d79fc..f990a8c024 100644
--- a/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index edde1b0932..242f77672b 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/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' }
+					]
+				}
 			}
 		}
 	}