mountain-ui 1.0.80 → 1.0.82

package/src/lib/registry/navigationRegistry/components/Navbar.svelte

@@ -0,0 +1,390 @@
+<script>
+	import { entityRegistry } from '../../entityRegistry/registry.svelte';
+	import { Button, DropdownMenu, IconButton, Scrollbar } from 'hamzus-ui';
+	import NavbarBtn from './NavbarBtn.svelte';
+	import { page } from '$app/stores';
+	import { navigationRegistry } from '../registry.svelte';
+	import NavbarGroup from './NavbarGroup.svelte';
+	import Icon from '../../../components/Icons/Icon.svelte';
+	import { projectRegistry } from '../../projectRegistry/registry.svelte';
+	import NavbarIcon from './NavbarIcon.svelte';
+
+	let {} = $props();
+
+	let content = $state(null);
+
+	let settingsIsOpen = $state(false);
+
+	const allEntities = entityRegistry.getAll();
+
+	const navigation = navigationRegistry.selectNavbarState();
+
+	const navigationGroups = navigationRegistry.getAllGroup();
+
+	const targetProjectHref = projectRegistry.selectTargetProjectHref();
+</script>
+
+<div
+	class="navbar {$navigation.isOpen ? 'open' : 'close'} {$navigation.width === 0 ? 'hidden' : ''}"
+	style="--width:{$navigation.width}px;"
+>
+	<div class="navbar-container">
+		<div class="top">
+			<div class="navbar-btn" onclick={navigationRegistry.toggleNavbar}>
+				<svg
+					width="45"
+					height="45"
+					viewBox="0 0 45 45"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<g clip-path="url(#clip0_183_102)">
+						<path
+							d="M39.2326 16.3969V29.2835C39.2326 31.3936 38.1022 33.3531 36.2747 34.427L25.0836 40.8891C23.2561 41.9442 20.9953 41.9442 19.149 40.8891L7.95791 34.427C6.13041 33.3719 5 31.4125 5 29.2835V16.3969C5 14.2868 6.13041 12.3273 7.95791 11.2535L19.149 4.79129C20.9765 3.73624 23.2373 3.73624 25.0836 4.79129L36.2747 11.2535C38.1022 12.3273 39.2326 14.268 39.2326 16.3969Z"
+							fill="#006FFF"
+						/>
+						<g filter="url(#filter0_d_183_102)">
+							<path
+								fill-rule="evenodd"
+								clip-rule="evenodd"
+								d="M9.84859 26.9601L6.37939 33.0985C6.598 33.3605 6.83987 33.6043 7.103 33.8266L7.38953 33.3196C8.63324 31.1189 11.803 31.1189 13.0467 33.3196L14.279 35.4999L21.5862 23.3116C23.4437 20.2132 27.9338 20.2132 29.7913 23.3116L36.4073 34.3468C38.1567 33.2574 39.2326 31.3422 39.2326 29.2836V28.5983L32.2504 16.9521C30.3928 13.8537 25.9028 13.8537 24.0452 16.9521L16.738 29.1404L15.5058 26.9601C14.2621 24.7594 11.0923 24.7594 9.84859 26.9601Z"
+								fill="white"
+							/>
+						</g>
+					</g>
+					<defs>
+						<filter
+							id="filter0_d_183_102"
+							x="-77.7206"
+							y="-74.4717"
+							width="201.053"
+							height="189.072"
+							filterUnits="userSpaceOnUse"
+							color-interpolation-filters="sRGB"
+						>
+							<feFlood flood-opacity="0" result="BackgroundImageFix" />
+							<feColorMatrix
+								in="SourceAlpha"
+								type="matrix"
+								values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+								result="hardAlpha"
+							/>
+							<feOffset dy="-5" />
+							<feGaussianBlur stdDeviation="42.05" />
+							<feComposite in2="hardAlpha" operator="out" />
+							<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+							<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_183_102" />
+							<feBlend
+								mode="normal"
+								in="SourceGraphic"
+								in2="effect1_dropShadow_183_102"
+								result="shape"
+							/>
+						</filter>
+						<clipPath id="clip0_183_102">
+							<rect width="45" height="45" fill="white" />
+						</clipPath>
+					</defs>
+				</svg>
+
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M11.6791 15.3699C11.4891 15.3699 11.2991 15.2999 11.1491 15.1499C10.8591 14.8599 10.8591 14.3799 11.1491 14.0899L13.1791 12.0599L11.1491 10.0299C10.8591 9.73994 10.8591 9.25994 11.1491 8.96994C11.4391 8.67994 11.9191 8.67994 12.2091 8.96994L14.7691 11.5299C15.0591 11.8199 15.0591 12.2999 14.7691 12.5899L12.2091 15.1499C12.0691 15.2999 11.8691 15.3699 11.6791 15.3699Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M14.17 12.8101H4C3.59 12.8101 3.25 12.4701 3.25 12.0601C3.25 11.6501 3.59 11.3101 4 11.3101H14.17C14.58 11.3101 14.92 11.6501 14.92 12.0601C14.92 12.4701 14.58 12.8101 14.17 12.8101Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M12 20.75C11.59 20.75 11.25 20.41 11.25 20C11.25 19.59 11.59 19.25 12 19.25C16.27 19.25 19.25 16.27 19.25 12C19.25 7.73 16.27 4.75 12 4.75C11.59 4.75 11.25 4.41 11.25 4C11.25 3.59 11.59 3.25 12 3.25C17.15 3.25 20.75 6.85 20.75 12C20.75 17.15 17.15 20.75 12 20.75Z"
+						fill="#292D32"
+					/>
+				</svg>
+			</div>
+			<h3>Mountain ERP</h3>
+		</div>
+		{#if !settingsIsOpen}
+			<div class="content-wrapper">
+				<Scrollbar element={content}></Scrollbar>
+				<div class="content" bind:this={content}>
+					<NavbarBtn href="{$targetProjectHref}/home" text="Acceuil">
+						<svg
+							slot="endContent"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								opacity="0.4"
+								d="M20.0402 6.81994L14.2802 2.78994C12.7102 1.68994 10.3002 1.74994 8.79023 2.91994L3.78023 6.82994C2.78023 7.60994 1.99023 9.20994 1.99023 10.4699V17.3699C1.99023 19.9199 4.06023 21.9999 6.61023 21.9999H17.3902C19.9402 21.9999 22.0102 19.9299 22.0102 17.3799V10.5999C22.0102 9.24994 21.1402 7.58994 20.0402 6.81994Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M12 18.75C11.59 18.75 11.25 18.41 11.25 18V15C11.25 14.59 11.59 14.25 12 14.25C12.41 14.25 12.75 14.59 12.75 15V18C12.75 18.41 12.41 18.75 12 18.75Z"
+								fill="#292D32"
+							/>
+						</svg>
+					</NavbarBtn>
+					{#each $navigationGroups as navigationGroup}
+						{@const children = navigationRegistry.getAllFromGroup(navigationGroup.id)}
+						<NavbarGroup text={navigationGroup.name}>
+							{#if children.length > 0}
+								{#each children as child}
+									{@const entity = entityRegistry.get(child.entity_id)}
+									<NavbarBtn
+										text={entity?.plural_name ?? '-'}
+										href="{$targetProjectHref}/{entity.slug}"
+									></NavbarBtn>
+								{/each}
+							{:else}
+									<NavbarBtn
+										text="Dossier vide !"
+									></NavbarBtn>
+							{/if}
+							<NavbarIcon
+								slot="endContent"
+								icon={navigationGroup.icon}
+								color={navigationGroup.color}
+							></NavbarIcon>
+						</NavbarGroup>
+					{/each}
+					{#each $allEntities as entity}
+						<NavbarBtn href="{$targetProjectHref}/{entity.slug}" text={entity.plural_name}
+						></NavbarBtn>
+					{/each}
+				</div>
+			</div>
+		{/if}
+		<div class="bottom" class:open={settingsIsOpen}>
+			<div class="bottom-btn">
+				<IconButton
+					onClick={() => {
+						settingsIsOpen = !settingsIsOpen;
+					}}
+					variant="outline"
+				>
+					{#if settingsIsOpen}
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M17.9056 7.40735L7.40779 17.9051C7.04911 18.2638 6.45424 18.2638 6.09556 17.9051C5.73689 17.5465 5.73689 16.9516 6.09556 16.5929L16.5933 6.09513C16.952 5.73646 17.5469 5.73646 17.9056 6.09513C18.2642 6.4538 18.2642 7.04868 17.9056 7.40735Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M17.9056 17.9049C17.5469 18.2635 16.952 18.2635 16.5933 17.9049L6.09556 7.40709C5.73689 7.04841 5.73689 6.45354 6.09556 6.09487C6.45424 5.73619 7.04911 5.73619 7.40779 6.09487L17.9056 16.5926C18.2642 16.9513 18.2642 17.5462 17.9056 17.9049Z"
+								fill="#292D32"
+							/>
+						</svg>
+					{:else}
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M22 7.25H16C15.59 7.25 15.25 6.91 15.25 6.5C15.25 6.09 15.59 5.75 16 5.75H22C22.41 5.75 22.75 6.09 22.75 6.5C22.75 6.91 22.41 7.25 22 7.25Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M6 7.25H2C1.59 7.25 1.25 6.91 1.25 6.5C1.25 6.09 1.59 5.75 2 5.75H6C6.41 5.75 6.75 6.09 6.75 6.5C6.75 6.91 6.41 7.25 6 7.25Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M10 10.75C7.66 10.75 5.75 8.84 5.75 6.5C5.75 4.16 7.66 2.25 10 2.25C12.34 2.25 14.25 4.16 14.25 6.5C14.25 8.84 12.34 10.75 10 10.75ZM10 3.75C8.48 3.75 7.25 4.98 7.25 6.5C7.25 8.02 8.48 9.25 10 9.25C11.52 9.25 12.75 8.02 12.75 6.5C12.75 4.98 11.52 3.75 10 3.75Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M22 18.25H18C17.59 18.25 17.25 17.91 17.25 17.5C17.25 17.09 17.59 16.75 18 16.75H22C22.41 16.75 22.75 17.09 22.75 17.5C22.75 17.91 22.41 18.25 22 18.25Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M8 18.25H2C1.59 18.25 1.25 17.91 1.25 17.5C1.25 17.09 1.59 16.75 2 16.75H8C8.41 16.75 8.75 17.09 8.75 17.5C8.75 17.91 8.41 18.25 8 18.25Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M14 21.75C11.66 21.75 9.75 19.84 9.75 17.5C9.75 15.16 11.66 13.25 14 13.25C16.34 13.25 18.25 15.16 18.25 17.5C18.25 19.84 16.34 21.75 14 21.75ZM14 14.75C12.48 14.75 11.25 15.98 11.25 17.5C11.25 19.02 12.48 20.25 14 20.25C15.52 20.25 16.75 19.02 16.75 17.5C16.75 15.98 15.52 14.75 14 14.75Z"
+								fill="#292D32"
+							/>
+						</svg>
+					{/if}
+				</IconButton>
+				<h5>Configuration</h5>
+			</div>
+			{#if settingsIsOpen}
+				<div class="content settings">
+					<slot name="settings" />
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.navbar {
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		width: var(--width);
+		height: 100%;
+		border-right: 1px solid var(--bg-2);
+		background-color: var(--bg-blur);
+		z-index: 20;
+		transition: width 0.2s ease-out;
+		background-color: var(--bg-1);
+	}
+	.navbar.hidden {
+		overflow: hidden;
+	}
+
+	.navbar-container {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+	}
+
+	.top {
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+		overflow: hidden;
+		border-bottom: 1px solid var(--bg-2);
+		min-height: 45px;
+		max-height: 45px;
+	}
+
+	.navbar-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 36px;
+		width: 36px;
+		aspect-ratio: 1/1;
+		padding: var(--pad-m);
+		border-radius: var(--radius-m);
+		margin: var(--pad-m);
+	}
+	.navbar-btn:hover {
+		background-color: var(--bg-blur);
+	}
+	.navbar-btn svg {
+		width: 100%;
+		height: 100%;
+		transition: transform 0.15s ease-out;
+	}
+	.navbar-btn svg:last-child {
+		display: none;
+	}
+	.open .navbar-btn svg:last-child {
+		transform: rotate(180deg);
+	}
+
+	.navbar-btn:hover svg:first-child {
+		display: none;
+	}
+	.navbar-btn:hover svg:last-child {
+		display: initial;
+	}
+
+	.content-wrapper {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		padding: var(--pad-s);
+		gap: var(--pad-xs);
+		overflow-y: auto;
+	}
+	.content {
+		overflow: auto;
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* IE/Edge */
+	}
+
+	.content::-webkit-scrollbar {
+		display: none; /* Chrome, Safari */
+	}
+
+	.content.settings {
+		animation: apear 0.2s ease-out;
+	}
+
+	.bottom {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column-reverse;
+		padding: var(--pad-s);
+		border-top: 1px solid var(--bg-2);
+	}
+
+	.bottom.open {
+		align-items: initial;
+		border-top: 0px solid var(--bg-2);
+		height: 100%;
+	}
+	.bottom .bottom-btn {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+		padding: var(--pad-s);
+		width: 100%;
+		overflow: hidden;
+	}
+
+	@media (max-width: 500px) {
+		.navbar {
+			background-color: var(--bg-1);
+		}
+		.navbar:not(.open) {
+			width: 0px;
+			overflow: hidden;
+		}
+
+		.navbar-btn svg:first-child {
+			display: none;
+		}
+		.navbar-btn svg:last-child {
+			display: initial;
+			transform: rotate(180deg);
+		}
+	}
+	@keyframes apear {
+		from {
+			opacity: 0;
+			transform: scale(0.9) translateY(10px);
+			filter: blur(5px);
+			-webkit-filter: blur(5px);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+			filter: blur(0px) translateY(0px);
+			-webkit-filter: blur(0px);
+		}
+	}
+</style>

package/src/lib/registry/navigationRegistry/components/NavbarBtn.svelte

@@ -0,0 +1,204 @@
+<script>
+	import { Portal } from 'hamzus-ui';
+	import { navigationRegistry } from '../registry.svelte';
+
+	let { text, href } = $props();
+
+	let btn = $state(null);
+	let isHovered = $state(false);
+
+	let x = $state(0);
+	let y = $state(0);
+	let width = $state(0);
+	let height = $state(0);
+
+	const navigation = navigationRegistry.selectNavbarState();
+
+	function updatePosition() {
+		if (!btn) return;
+
+		const rect = btn.getBoundingClientRect();
+
+		x = rect.x;
+		y = rect.y;
+		width = rect.width;
+		height = rect.height;
+	}
+
+	$effect(() => {
+		if (!btn) return;
+
+		let frame;
+
+		const update = () => {
+			cancelAnimationFrame(frame);
+
+			frame = requestAnimationFrame(updatePosition);
+		};
+
+		const resizeObserver = new ResizeObserver(update);
+
+		resizeObserver.observe(btn);
+		resizeObserver.observe(btn.parentNode);
+
+		const mutationObserver = new MutationObserver(update);
+
+		mutationObserver.observe(btn.parentNode, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			characterData: true
+		});
+
+		window.addEventListener('resize', update);
+		window.addEventListener('scroll', update, true);
+
+		update();
+
+		return () => {
+			cancelAnimationFrame(frame);
+
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+
+			window.removeEventListener('resize', update);
+			window.removeEventListener('scroll', update, true);
+		};
+	});
+</script>
+
+<a
+	{href}
+	class="btn"
+	bind:this={btn}
+	onmouseenter={() => {
+		isHovered = true;
+	}}
+	onmouseleave={() => {
+		isHovered = false;
+	}}
+>
+	<h5>{text}</h5>
+
+	<Portal target="body" disabled={isHovered}>
+		{#if isHovered}
+			<h5
+				class="full"
+				style="
+					--x: {x}px;
+					--y: {y}px;
+					--w: {width}px;
+					--h: {height}px;
+				"
+			>
+				{text}
+			</h5>
+		{/if}
+	</Portal>
+
+    <slot name="endContent" />
+</a>
+
+<style>
+	.btn {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+		justify-content: space-between;
+		padding: var(--pad-s) var(--pad-m);
+		border-radius: var(--radius-m);
+		z-index: 1000;
+		position: relative;
+		cursor: pointer;
+        overflow: clip;
+	}
+
+	.btn:hover {
+		background-color: var(--bg-blur);
+	}
+
+	.btn h5 {
+		white-space: nowrap;
+		/* overflow: hidden; */
+		/* text-overflow: ellipsis; */
+	}
+    .btn::after {
+        content: '';
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        width: 30%;
+        height: 100%;
+        background-color: transparent;
+        background: linear-gradient(90deg, rgba(114, 114, 114, 0) 0%, var(--bg-1) 100%);
+        opacity: 1;
+        transition: opacity .2s ease-out;
+    }
+    :global(.group) .btn::after {
+        background: linear-gradient(90deg, rgba(114, 114, 114, 0) 0%, var(--bg-2) 100%);
+    }
+    :global(.navbar.close .group) .btn{
+        border-radius:var(--radius-m) 0 0 var(--radius-m);
+    }
+
+    :global(.navbar.open) .btn::after {
+        user-select: none;
+        pointer-events: none;
+        opacity: 0;
+    }
+
+	.btn h5:not(.full) {
+		width: 100%;
+		min-height: max-content;
+	}
+
+	.full {
+		margin: 0;
+		padding: var(--pad-s) var(--pad-m);
+		border-radius: var(--radius-m);
+
+		position: fixed;
+		top: var(--y);
+		left: var(--x);
+
+		
+		background-color: var(--bg-1);
+		outline: 1px solid var(--bg-blur);
+
+		z-index: 999999;
+		pointer-events: none;
+		user-select: none;
+
+        animation: apear .2s ease-out;
+	}
+
+	.btn > :global(svg) {
+		width: 20px;
+		height: auto;
+        flex-shrink: 0;
+	}
+
+	.btn > :global(svg path) {
+		fill: var(--font-3);
+	}
+
+	.btn:hover > :global(svg path) {
+		fill: var(--font-1);
+	}
+
+    @keyframes apear {
+        from {
+            filter: blur(5px);
+            -webkit-filter: blur(5px);
+            opacity: 0;
+            transform: translateX(-5px);
+        }
+
+        to {
+            filter: blur(0px);
+            -webkit-filter: blur(0px);
+            opacity: 1;
+            transform: translateX(0px);
+        }
+    }
+</style>