feat: none-scrolling navbar on smaller screens

TheArcadiaGroup · Oct 23, 2022 · 44d91e8 · 44d91e8
1 parent 01bf87e
commit 44d91e8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/lib/components/Navbar/NavItem.svelte b/src/lib/components/Navbar/NavItem.svelte
@@ -29,7 +29,7 @@
 <style lang="postcss" global>
 	.nav-item {
 		@apply grid place-items-center;
-		@apply min-w-[3.5rem] min-h-[3.5rem] w-14 h-14 4xl:w-24 4xl:h-24 cursor-pointer;
+		@apply min-w-[3rem] min-h-[3rem] w-12 h-12 4xl:w-24 4xl:h-24 cursor-pointer;
 		@apply text-light-grey dark:text-white;
 		@apply transition-all;
 	}

diff --git a/src/lib/components/Navbar/Navbar.svelte b/src/lib/components/Navbar/Navbar.svelte
@@ -77,6 +77,7 @@
 			</div>
 		{/if}
 		{#if $appInfo?.updatesReady}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div
 				class="text-xs -mt-10"
 				title="Updates Ready, restart to update"
@@ -121,13 +122,13 @@
 
 		@apply flex md:flex-col justify-evenly items-center gap-x-2 md:gap-x-0;
 		@apply ml-1 mr-4 md:mx-0;
-		@apply w-full min-w-[32rem] md:min-w-fit md:h-3/5 md:min-h-[32rem];
+		@apply w-full min-w-[32rem] md:min-w-fit md:h-3/5 md:min-h-[28rem];
 	}
 
 	.navbar-bottom {
 		@apply max-w-[5rem];
 		@apply flex md:flex-col justify-evenly items-center md:gap-y-10;
-		@apply w-[8%] min-w-[2rem] md:w-full md:h-[30%] md:min-h-[16rem];
+		@apply w-[8%] min-w-[2rem] md:w-full md:h-[30%] md:min-h-[12rem];
 		@apply mr-4 md:mr-0 md:pb-4;
 	}