folded navigation updates

- Added `overflowValue` event to handle folding the navbar when resizing reaches the minimum value.
- Updated navbar paddings.
- The `IconButton` component now includes a new property `width`.

gitbutler-ui/src/lib/components/AccountLink.svelte

@@ -103,8 +103,8 @@
 
 		& .anon-icon,
 		.profile-picture {
-			width: var(--space-20);
-			height: var(--space-20);
+			width: var(--space-24);
+			height: var(--space-24);
 		}
 	}
 </style>

gitbutler-ui/src/lib/components/BaseBranchCard.svelte

@@ -64,7 +64,7 @@
 	.base-branch-card {
 		display: flex;
 		gap: var(--space-10);
-		padding: var(--space-8);
+		padding: var(--space-8) var(--space-10);
 		border-radius: var(--radius-m);
 		transition: background-color var(--transition-fast);
 	}

gitbutler-ui/src/lib/components/DomainButton.svelte

@@ -38,7 +38,7 @@
 		align-items: center;
 		gap: var(--space-10);
 		border-radius: var(--radius-m);
-		padding: var(--space-8);
+		padding: var(--space-8) var(--space-10);
 		color: var(--clr-theme-scale-ntrl-0);
 		transition: background-color var(--transition-fast);
 	}

gitbutler-ui/src/lib/components/Footer.svelte

@@ -16,10 +16,16 @@
 			icon="mail"
 			help="Send feedback"
 			size={isNavCollapsed ? 'xl' : 'l'}
+			width={isNavCollapsed ? '100%' : undefined}
 			on:click={() => events.emit('openSendIssueModal')}
 		/>
 		<Link href={`/${projectId}/settings`}>
-			<IconButton icon="settings" help="Project settings" size={isNavCollapsed ? 'xl' : 'l'} />
+			<IconButton
+				icon="settings"
+				help="Project settings"
+				size={isNavCollapsed ? 'xl' : 'l'}
+				width={isNavCollapsed ? '100%' : undefined}
+			/>
 		</Link>
 	</div>
 	<AccountLink {user} {isNavCollapsed} />
@@ -28,26 +34,26 @@
 <style lang="postcss">
 	.footer {
 		display: flex;
-		align-items: center;
 		justify-content: space-between;
 		padding: var(--space-12);
 		border-top: 1px solid var(--clr-theme-container-outline-light);
 		border-color: var(--clr-theme-container-outline-light);
 	}
 
-	.collapsed {
+	.left-btns {
+		display: flex;
+		gap: var(--space-2);
+	}
+
+	.footer.collapsed {
 		flex-direction: column;
+		padding: 0 var(--space-14);
+		align-items: flex-start;
 		gap: var(--space-4);
-		padding: 0;
 		border: none;
 
 		& .left-btns {
 			flex-direction: column;
 		}
 	}
-
-	.left-btns {
-		display: flex;
-		align-items: center;
-	}
 </style>

gitbutler-ui/src/lib/components/IconButton.svelte

@@ -7,6 +7,7 @@
 	export let size: 's' | 'm' | 'l' | 'xl' = 'l';
 	export let loading = false;
 	export let help = '';
+	export let width: string | undefined = undefined;
 
 	let className = '';
 	let selected = false;
@@ -20,10 +21,11 @@
 	class:small={size == 's'}
 	class:medium={size == 'm'}
 	class:large={size == 'l'}
-	class:extra-large={size == 'xl'}
+	class:x-large={size == 'xl'}
 	use:tooltip={help}
 	{title}
 	on:click
+	style:width
 >
 	<Icon name={loading ? 'spinner' : icon} />
 </button>
@@ -48,10 +50,10 @@
 		background-color: color-mix(in srgb, transparent, var(--darken-tint-light));
 		cursor: default;
 	}
-	.extra-large {
+	.x-large {
 		height: var(--size-btn-xl);
 		width: var(--size-btn-xl);
-		padding: var(--space-8);
+		padding: var(--space-12);
 	}
 	.large {
 		height: var(--size-btn-l);

gitbutler-ui/src/lib/components/Navigation.svelte

@@ -51,6 +51,9 @@
 
 	// check if resizing
 	let isResizerDragging = false;
+	// current resizer width
+	const minResizerWidth = 280;
+	const minResizerRatio = 150;
 </script>
 
 <aside class="navigation-wrapper">
@@ -76,21 +79,36 @@
 		<Resizer
 			{viewport}
 			direction="right"
-			minWidth={280}
-			zIndex={41}
+			minWidth={minResizerWidth}
 			defaultLineColor="var(--clr-theme-container-outline-light)"
+			on:click={() => {
+				if ($isNavCollapsedPersist) {
+					toggleNavCollapse();
+				}
+			}}
+			on:dblclick={() => {
+				if (!$isNavCollapsedPersist) {
+					toggleNavCollapse();
+				}
+			}}
 			on:width={(e) => {
 				$defaultTrayWidthRem = e.detail / (16 * $userSettings.zoom);
 			}}
 			on:resizing={(e) => {
 				isResizerDragging = e.detail;
-
-				if (isNavCollapsed) {
-					toggleNavCollapse();
-				}
 			}}
-			on:dblclick={() => {
-				toggleNavCollapse();
+			on:overflowValue={(e) => {
+				const overflowValue = e.detail;
+
+				if (!$isNavCollapsedPersist && overflowValue > minResizerRatio) {
+					$isNavCollapsedPersist = true;
+					isNavCollapsed = $isNavCollapsedPersist;
+				}
+
+				if ($isNavCollapsedPersist && overflowValue < minResizerRatio) {
+					$isNavCollapsedPersist = false;
+					isNavCollapsed = $isNavCollapsedPersist;
+				}
 			}}
 		/>
 	</div>
@@ -233,5 +251,11 @@
 		width: auto;
 		justify-content: space-between;
 		padding-bottom: var(--space-16);
+		/* padding-left: var(--space-4); */
+
+		/* & .navigation-top {
+			align-items: flex-start;
+			transform: translateX(var(--space-2));
+		} */
 	}
 </style>

gitbutler-ui/src/lib/components/ProjectSelector.svelte

@@ -54,7 +54,7 @@
 		display: flex;
 		gap: var(--space-10);
 		width: 100%;
-		padding: var(--space-8);
+		padding: var(--space-8) var(--space-10);
 		border-radius: var(--radius-m);
 
 		background-color: var(--clr-theme-container-pale);
@@ -91,11 +91,4 @@
 		color: var(--clr-theme-scale-ntrl-0);
 		opacity: 0.3;
 	}
-
-	/* MODIFIERS */
-	/* .wrapper.collapsed {
-		& .button {
-			padding: var(--space-10) var(--space-8);
-		}
-	} */
 </style>

gitbutler-ui/src/lib/components/Resizer.svelte

@@ -32,6 +32,7 @@
 		height: number;
 		width: number;
 		resizing: boolean;
+		overflowValue: number;
 	}>();
 
 	function onMouseDown(e: MouseEvent) {
@@ -48,23 +49,37 @@
 		dispatch('resizing', true);
 	}
 
+	function onOverflowValue(currentValue: number, minVal: number) {
+		if (currentValue < minVal) {
+			dispatch('overflowValue', minVal - currentValue);
+		}
+	}
+
 	function onMouseMove(e: MouseEvent) {
 		dragging = true;
 		if (direction == 'down') {
 			let height = e.clientY - initial;
 			dispatch('height', Math.max(height, minHeight));
+
+			onOverflowValue(height, minHeight);
 		}
 		if (direction == 'up') {
 			let height = document.body.scrollHeight - e.clientY - initial;
 			dispatch('height', Math.max(height, minHeight));
+
+			onOverflowValue(height, minHeight);
 		}
 		if (direction == 'right') {
 			let width = e.clientX - initial + 2;
 			dispatch('width', Math.max(width, minWidth));
+
+			onOverflowValue(width, minWidth);
 		}
 		if (direction == 'left') {
 			let width = document.body.scrollWidth - e.clientX - initial;
 			dispatch('width', Math.max(width, minWidth));
+
+			onOverflowValue(width, minWidth);
 		}
 	}