From faa046a3fdc326084df93f8e57dd5c573164b91d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Thu, 29 Dec 2022 09:55:53 +0100
Subject: [PATCH] feat(app): Update sidebar menu (#1050)

---
 .../components/sidebar/SidebarContent.svelte  | 28 +++++++++----------
 .../src/routes/(root)/(logged)/+layout.svelte | 26 +++++++++--------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index 874c846df0..fccda0e19e 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -10,7 +10,7 @@
 		faUsersCog,
 		faCog,
 		faDollarSign,
-		faFolderTree
+		faFolderOpen
 	} from '@fortawesome/free-solid-svg-icons'
 	import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
 	import MenuLink from './MenuLink.svelte'
@@ -25,7 +25,7 @@
 
 	$: secondaryMenuLinks = [
 		{ label: 'Schedules', href: '/schedules', icon: faCalendar, disabled: $userStore?.operator },
-		{ label: 'Folders', href: '/folders', icon: faFolderTree, disabled: $userStore?.operator },
+		{ label: 'Folders', href: '/folders', icon: faFolderOpen, disabled: $userStore?.operator },
 		{ label: 'Groups', href: '/groups', icon: faUsersCog, disabled: $userStore?.operator },
 		{ label: 'Audit Logs', href: '/audit_logs', icon: faEye, disabled: $userStore?.operator },
 		{
@@ -50,22 +50,22 @@
 	export let isCollapsed: boolean = false
 </script>
 
-<div class="flex-1 flex flex-col pb-4 overflow-x-hidden scrollbar-hidden">
-	<nav class="h-full flex justify-between flex-col px-2">
-		<div class="space-y-1 pt-4">
-			{#each mainMenuLinks as menuLink (menuLink.href)}
-				<MenuLink class="text-md" {...menuLink} {isCollapsed} />
-			{/each}
-			<div class="h-2" />
-		</div>
-		<div class="space-1-2">
+<nav class="grow flex md:justify-between flex-col overflow-x-hidden scrollbar-hidden px-2 md:pb-4">
+	<div class="space-y-1 pt-4 mb-6 md:mb-10">
+		{#each mainMenuLinks as menuLink (menuLink.href)}
+			<MenuLink class="text-md" {...menuLink} {isCollapsed} />
+		{/each}
+	</div>
+	<div>
+		<div class="space-y-1 mb-6 md:mb-10">
 			{#each secondaryMenuLinks as menuLink (menuLink.href)}
 				<MenuLink class="text-xs" {...menuLink} {isCollapsed} />
 			{/each}
-			<div class="h-8" />
+		</div>
+		<div>
 			{#each thirdMenuLinks as menuLink (menuLink.href)}
 				<MenuLink class="text-xs" {...menuLink} {isCollapsed} />
 			{/each}
 		</div>
-	</nav>
-</div>
+	</div>
+</nav>
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index f009d219ca..d3faa11cf8 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -111,7 +111,7 @@
 	{/if}
 	<div>
 		<div
-			class={classNames('relative  md:hidden 	', menuOpen ? 'z-40' : 'pointer-events-none')}
+			class={classNames('relative md:hidden', menuOpen ? 'z-40' : 'pointer-events-none')}
 			role="dialog"
 			aria-modal="true"
 		>
@@ -164,7 +164,7 @@
 							{#if !isCollapsed}Windmill{/if}
 						</div>
 
-						<div class="px-2 py-4 space-y-2 border-y border-gray-400">
+						<div class="px-2 py-4 space-y-2 border-y border-gray-500">
 							<WorkspaceMenu />
 							<UserMenu
 								on:user-settings={() => userSettings.openDrawer()}
@@ -181,29 +181,31 @@
 
 		<div
 			class={classNames(
-				'hidden md:flex md:flex-col md:fixed md:inset-y-0  transition-all ease-in-out duration-200 shadow-md z-40',
+				'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 shadow-md z-40',
 				isCollapsed ? 'md:w-12' : 'md:w-40'
 			)}
 		>
-			<div class="flex-1 flex flex-col min-h-0 shadow-lg bg-[#2e3440]">
+			<div class="flex-1 flex flex-col min-h-0 h-screen overflow-y-auto shadow-lg bg-[#2e3440]">
 				<button
 					on:click={() => {
 						goto('/')
 					}}
 				>
 					<div
-						class="flex flex-row items-center flex-shrink-0 px-4 py-3.5 font-extrabold text-white w-14 h-12"
+						class="center-center flex-row flex-shrink-0 px-2 py-3.5 font-extrabold text-white h-12"
 						class:w-40={!isCollapsed}
 					>
-						<div class="mr-1">
-							<WindmillIcon white={true} height="19px" width="20px" />
+						<div class:mr-1={!isCollapsed}>
+							<WindmillIcon white={true} height="20px" width="20px" />
 						</div>
-						<span class=""
-							>{#if !isCollapsed}Windmill{/if}</span
-						>
+						{#if !isCollapsed}
+							<span>
+								Windmill
+							</span>
+						{/if}
 					</div>
 				</button>
-				<div class="px-2 py-4 space-y-2 border-y border-gray-300">
+				<div class="px-2 py-4 space-y-2 border-y border-gray-500">
 					<WorkspaceMenu {isCollapsed} />
 					<UserMenu
 						on:user-settings={userSettings.openDrawer}
@@ -214,7 +216,7 @@
 				</div>
 				<SidebarContent {isCollapsed} />
 
-				<div class="flex-shrink-0 flex px-4 pb-3.5 pt-3 border-t border-gray-300">
+				<div class="flex-shrink-0 flex px-4 pb-3.5 pt-3 border-t border-gray-500">
 					<button
 						on:click={() => {
 							isCollapsed = !isCollapsed