mertani-web-toolkit 0.1.64 → 0.1.66

package/dist/components/inputs/SelectInput/SelectInput.css

@@ -59,35 +59,56 @@
     box-shadow 0.2s;
 }
 
-.select-trigger:not(:disabled) {
+.select-trigger:not(.disabled) {
   background: var(--color-bg-surface);
   cursor: pointer;
 }
 
-.select-trigger:not(:disabled):hover {
+.select-trigger:not(.disabled):hover {
   border-color: var(--color-border-form);
 }
 
-.select-trigger:not(:disabled):focus {
+.select-trigger:not(.disabled):focus {
   outline: none;
   border-color: var(--color-bg-act-primary);
   box-shadow: 0 0 0 2px var(--color-bg-act-primary) 40;
 }
 
-.select-trigger:disabled {
+.select-trigger.disabled {
   cursor: not-allowed;
   background: var(--color-bg-disabled);
 }
 
-.select-trigger.error:not(:disabled) {
+.select-trigger.error:not(.disabled) {
   border-color: var(--color-text-error-ti);
 }
 
-.select-trigger.error:not(:disabled):focus {
+.select-trigger.error:not(.disabled):focus {
   border-color: var(--color-text-error-ti);
   box-shadow: 0 0 0 2px var(--color-text-error-ti) 40;
 }
 
+.select-clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--color-text-tertiary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    color 0.2s,
+    background-color 0.2s;
+  line-height: 0;
+}
+
+.select-clear-button:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-disabled);
+}
+
 .select-menu {
   position: absolute;
   right: 0;

package/dist/components/inputs/SelectInput/SelectInput.svelte

@@ -41,6 +41,7 @@
 		onOpen?: () => void;
 		/** Dipanggil saat teks search berubah (debounce 300ms), hanya jika remoteSearch. */
 		onSearchQueryChange?: (query: string) => void;
+		onClear?: () => void;
 
 		// Validation
 		isMandatory?: boolean;
@@ -56,6 +57,7 @@
 		class?: string;
 		style?: string;
 		isShowChevron?: boolean;
+		isClearable?: boolean;
 	}
 
 	const {
@@ -92,6 +94,7 @@
 		onSelect,
 		onOpen,
 		onSearchQueryChange,
+		onClear,
 
 		// Validation
 		isMandatory = false,
@@ -105,7 +108,8 @@
 
 		class: className = '',
 		style: customStyle = '',
-		isShowChevron = true
+		isShowChevron = true,
+		isClearable = false
 	}: Props = $props();
 
 	// ===== Constants =====
@@ -123,7 +127,7 @@
 	let open = $state(false);
 	let search = $state('');
 	let placement: 'bottom' | 'top' = $state('bottom');
-	let triggerEl: HTMLButtonElement | null = $state(null);
+	let triggerEl: HTMLDivElement | null = $state(null);
 	let menuEl: HTMLDivElement | null = $state(null);
 	let resizeObs: ResizeObserver | null = $state(null);
 	let unregisterDropdown: (() => void) | null = $state(null);
@@ -306,6 +310,13 @@
 		close();
 	}
 
+	function handleClear(e: MouseEvent) {
+		e.stopPropagation();
+		onSelect?.('');
+		onClear?.();
+		error = validateInput('');
+	}
+
 	function validateInput(val: string): string {
 		if (customValidation) {
 			const customError = customValidation(val);
@@ -403,28 +414,42 @@
 			</label>
 		{/if}
 		<div class="relative flex-1">
-			<button
+			<div
 				bind:this={triggerEl}
-				type="button"
-				class="select-trigger {className} {error ? 'error' : ''}"
-				style={triggerStyles()}
+				role="combobox"
+				tabindex="0"
 				aria-haspopup="listbox"
 				aria-expanded={open}
+				aria-controls={open ? 'select-menu' : undefined}
+				class="select-trigger {className} {error ? 'error' : ''}"
+				style={triggerStyles()}
 				onclick={toggle}
 				onkeydown={handleKeydown}
 				onfocus={handleFocus}
 				onblur={handleBlur}
-				disabled={disabled || isLoading}
 				title={tooltip || ''}
+				class:disabled={disabled || isLoading}
 			>
 				<span class="truncate">{labelOf(value) || placeholder}</span>
-				{#if isShowChevron}
-					<Icon
-						name="bs-chevron-down"
-						style="transform-origin: center; transition: transform 0.25s; transform: rotate({chevronRotation});"
-					/>
-				{/if}
-			</button>
+				<div class="flex items-center gap-1">
+					{#if isClearable && value && !disabled && !isLoading}
+						<button
+							type="button"
+							class="select-clear-button"
+							onclick={handleClear}
+							aria-label="Clear selection"
+						>
+							<Icon name="bs-x-lg" />
+						</button>
+					{/if}
+					{#if isShowChevron}
+						<Icon
+							name="bs-chevron-down"
+							style="transform-origin: center; transition: transform 0.25s; transform: rotate({chevronRotation});"
+						/>
+					{/if}
+				</div>
+			</div>
 
 			{#if open}
 				<div

package/dist/components/inputs/SelectInput/SelectInput.svelte.d.ts

@@ -28,6 +28,7 @@ interface Props {
     onOpen?: () => void;
     /** Dipanggil saat teks search berubah (debounce 300ms), hanya jika remoteSearch. */
     onSearchQueryChange?: (query: string) => void;
+    onClear?: () => void;
     isMandatory?: boolean;
     customValidation?: (value: string) => string | null;
     isLoading?: boolean;
@@ -37,6 +38,7 @@ interface Props {
     class?: string;
     style?: string;
     isShowChevron?: boolean;
+    isClearable?: boolean;
 }
 declare const SelectInput: import("svelte").Component<Props, {}, "">;
 type SelectInput = ReturnType<typeof SelectInput>;

package/dist/index.d.ts

@@ -10,7 +10,6 @@ export { default as Radio } from './components/inputs/Radio/Radio.svelte';
 export { default as Toggle } from './components/inputs/Toggle/Toggle.svelte';
 export { default as Segmented } from './components/inputs/Segmented/Segmented.svelte';
 export { default as Steppers } from './components/inputs/Steppers/Steppers.svelte';
-export { default as IMSLayout1 } from './layouts/IMS/IMSLayout1/IMSLayout1.svelte';
 export { default as Table } from './components/Table/Table.svelte';
 export { default as HeaderContent } from './components/HeaderContent/HeaderContent.svelte';
 export { default as TableBadge } from './components/Table/TableBadge.svelte';

package/dist/index.js

@@ -10,7 +10,6 @@ export { default as Radio } from './components/inputs/Radio/Radio.svelte';
 export { default as Toggle } from './components/inputs/Toggle/Toggle.svelte';
 export { default as Segmented } from './components/inputs/Segmented/Segmented.svelte';
 export { default as Steppers } from './components/inputs/Steppers/Steppers.svelte';
-export { default as IMSLayout1 } from './layouts/IMS/IMSLayout1/IMSLayout1.svelte';
 export { default as Table } from './components/Table/Table.svelte';
 export { default as HeaderContent } from './components/HeaderContent/HeaderContent.svelte';
 export { default as TableBadge } from './components/Table/TableBadge.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.64",
+	"version": "0.1.66",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",

package/dist/layouts/IMS/IMSLayout1/IMSLayout1.css

@@ -1,3 +0,0 @@
-@import 'tailwindcss';
-@import 'tailwindcss/theme';
-@import 'tailwindcss/utilities';

package/dist/layouts/IMS/IMSLayout1/IMSLayout1.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import './IMSLayout1.css';
-	import ImsHeader from './components/ImsHeader.svelte';
-	import ImsSidebar from './components/ImsSidebar.svelte';
-	import type { IImsLayout } from './types/IImsLayout.js';
-
-	const { children, cmsNamespaceResponseData, header, sidebar, pageInfo, content }: IImsLayout = $props();
-
-	let showSidebar = $state(true);
-
-	function onToggleSidebar() {
-		showSidebar = !showSidebar;
-	}
-</script>
-
-<svelte:head>
-	<title>{cmsNamespaceResponseData.name}</title>
-</svelte:head>
-
-<div class="flex h-screen flex-col bg-[#F5F5F5]">
-	<ImsHeader {sidebar} version={header?.version} {content} />
-	<div class="flex flex-1 overflow-hidden">
-		<ImsSidebar
-			{showSidebar}
-			{onToggleSidebar}
-			bind:show={showSidebar}
-			{pageInfo}
-			{sidebar}
-			namespaces={cmsNamespaceResponseData.namespaces}
-		/>
-		<main class="flex-1 overflow-auto bg-[#f6f8fa]">
-			{@render children?.()}
-		</main>
-	</div>
-</div>
-
-<style>
-</style>

package/dist/layouts/IMS/IMSLayout1/IMSLayout1.svelte.d.ts

@@ -1,5 +0,0 @@
-import './IMSLayout1.css';
-import type { IImsLayout } from './types/IImsLayout.js';
-declare const IMSLayout1: import("svelte").Component<IImsLayout, {}, "">;
-type IMSLayout1 = ReturnType<typeof IMSLayout1>;
-export default IMSLayout1;

package/dist/layouts/IMS/IMSLayout1/components/ImsHeader.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { ISidebarData } from '../types/IImsLayout.js';
-
-	const {
-		version = 'v1.0.0',
-		sidebar,
-		content
-	} = $props<{ version?: string; sidebar: ISidebarData; content?: Snippet }>();
-</script>
-
-<header
-	class="sticky top-0 z-20 flex h-15 items-center justify-between border-b border-[#e0e0e0] bg-white p-4"
->
-	<div class="flex h-15 items-center gap-2 border-b border-[#EAECF0]">
-		<img src={sidebar.logoUrl} alt={'Logo'} class="h-13 object-contain" />
-		{@html content}
-	</div>
-	<span class="text-sm font-medium">Versi {version}</span>
-</header>

package/dist/layouts/IMS/IMSLayout1/components/ImsHeader.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ISidebarData } from '../types/IImsLayout.js';
-type $$ComponentProps = {
-    version?: string;
-    sidebar: ISidebarData;
-    content?: Snippet;
-};
-declare const ImsHeader: import("svelte").Component<$$ComponentProps, {}, "">;
-type ImsHeader = ReturnType<typeof ImsHeader>;
-export default ImsHeader;

package/dist/layouts/IMS/IMSLayout1/components/ImsSidebar.svelte

@@ -1,469 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/state';
-	import ChevronDown from '../../../../icons/ChevronDown.svelte';
-	import GearTwo from '../../../../icons/GearTwo.svelte';
-	import User from '../../../../icons/User.svelte';
-	import Logout from '../../../../icons/Logout.svelte';
-	import type { ISidebarData, ISidebarNamespace } from '../types/IImsLayout.js';
-	import { USER_ROLE_ADMIN, UserStore } from '../../../../stores/UserStore.js';
-	import { deleteCookie, USER_TOKEN } from '../../../../utils/Cookie.js';
-	import Window from '../../../../icons/Window.svelte';
-	import Icon from '../../../../components/Icon/Icon.svelte';
-
-	const {
-		show = $bindable(true),
-		pageInfo,
-		sidebar,
-		namespaces,
-		showSidebar,
-		onToggleSidebar
-	} = $props<{
-		show?: boolean;
-		pageInfo: { namespace: string };
-		sidebar: ISidebarData;
-		namespaces: ISidebarNamespace[];
-		showSidebar: boolean;
-		onToggleSidebar: () => void;
-	}>();
-
-	let selectedDropdownId = $state(pageInfo.namespace || namespaces?.[0]?.id);
-	let areaDropdownOpen = $state(false);
-	let userMenuOpen = $state(false);
-	let openGroups = $state<Record<string, boolean>>({});
-
-	let dropdownRef: HTMLDivElement | undefined;
-	const user = sidebar.user ?? { name: '', role: '', initials: '' };
-	const isAdmin = user?.role === USER_ROLE_ADMIN;
-
-	const navItems = $derived(sidebar.nav ?? []);
-	const selectedDropdownLabel = $derived(
-		namespaces?.find((item: any) => item.id === selectedDropdownId)?.name ?? ''
-	);
-
-	onMount(() => {
-		const handleDocumentClick = (event: MouseEvent) => {
-			if (!dropdownRef) return;
-			const target = event.target as Node | null;
-			if (!target || dropdownRef.contains(target)) return;
-			areaDropdownOpen = false;
-		};
-
-		document.addEventListener('click', handleDocumentClick);
-		return () => document.removeEventListener('click', handleDocumentClick);
-	});
-
-	function toggleAreaDropdown() {
-		areaDropdownOpen = !areaDropdownOpen;
-	}
-
-	function closeAreaDropdown() {
-		areaDropdownOpen = false;
-	}
-
-	function toggleUserMenu() {
-		userMenuOpen = !userMenuOpen;
-	}
-
-	function handleLogout() {
-		toggleUserMenu();
-		UserStore.set(null);
-		deleteCookie(USER_TOKEN);
-		sessionStorage.removeItem('organization_detail');
-		goto('/');
-	}
-
-	function handleProfileClick() {
-		goto('/user/profile');
-	}
-
-	function selectArea(areaId: string) {
-		selectedDropdownId = areaId;
-		closeAreaDropdown();
-
-		// Split the current pathname and find if any segment matches an area id
-		const pathSegments = page.url.pathname.split('/').filter(Boolean);
-		const areaIndex = pathSegments.findIndex((segment) =>
-			namespaces?.some((item: any) => item.id === segment)
-		);
-
-		if (areaIndex !== -1) {
-			// Replace the matched area id with the newly selected areaId
-			pathSegments[areaIndex] = areaId;
-			const newPath = '/' + pathSegments.join('/');
-			goto(newPath);
-		}
-	}
-
-	function gotoSlug(slug: string) {
-		if (!slug) return;
-		const segments = page.url.pathname.split('/').filter(Boolean);
-		const areaIndex = segments.findIndex((segment) =>
-			namespaces?.some((item: any) => item.id === segment)
-		);
-		const baseSegments = areaIndex !== -1 ? segments.slice(0, areaIndex + 1) : segments;
-		const targetPath = '/' + [...baseSegments, slug].join('/');
-		if (targetPath !== page.url.pathname) {
-			goto(targetPath);
-		}
-	}
-
-	function handleAreaButtonKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
-			event.preventDefault();
-			if (!areaDropdownOpen) {
-				areaDropdownOpen = true;
-			}
-		}
-		if (event.key === 'Escape') {
-			event.preventDefault();
-			closeAreaDropdown();
-		}
-	}
-
-	function toggleGroup(title: string) {
-		openGroups = { ...openGroups, [title]: !openGroups[title] };
-	}
-
-	$effect(() => {
-		if (typeof window === 'undefined') {
-			return;
-		}
-
-		const pathname = page.url.pathname;
-		const items = navItems;
-		if (!items.length) {
-			return;
-		}
-
-		const hasMatch = items.some((item: any) => {
-			if (item.children && item.children.length) {
-				return item.children.some((child: any) => pathname.split('/').includes(child.slug));
-			}
-			return pathname.split('/').includes(item.slug);
-		});
-		if (hasMatch) {
-			return;
-		}
-
-		const fallbackItem = items[0];
-		const targetSlug = fallbackItem.children?.[0]?.slug ?? fallbackItem.slug;
-
-		//TODO: buat dinamis untuk White list path
-		const pathSegments = pathname.split('/');
-		if (pathSegments.includes('kelola-sub-daerah-irigasi')) {
-			if (sidebar?.user?.role === USER_ROLE_ADMIN) {
-				return;
-			} else {
-				goto('/404');
-				return;
-			}
-		}
-		if (targetSlug && !pathSegments.includes(targetSlug)) {
-			gotoSlug(targetSlug);
-		}
-	});
-
-	$effect(() => {
-		if (!show) {
-			areaDropdownOpen = false;
-			userMenuOpen = false;
-		}
-	});
-</script>
-
-<aside
-	class={`relative shrink-0 overflow-visible border-r border-[#e0e0e0] bg-white transition-all duration-200 ease-in-out ${
-		show ? 'w-[250px]' : 'w-14'
-	}`}
->
-	<button
-		type="button"
-		title="Toggle sidebar"
-		onclick={onToggleSidebar}
-		class={`absolute top-1 right-2 flex h-10 w-10 items-center justify-center rounded-lg border border-transparent bg-[#fff] text-[#495057] transition hover:border-[#e0e0e0] hover:bg-[#f5f5f5]`}
-	>
-		<div class={`transition-transform duration-300 ${show ? '' : 'rotate-180'}`}>
-			<Icon name="window" width={16} height={16} />
-		</div>
-	</button>
-
-	{#if show}
-		<div class={`flex h-full flex-col bg-white pt-6 ${show ? '' : 'hidden'}`}>
-			<div class="flex flex-col gap-1 border-b border-[#EAECF0] px-4 py-4" bind:this={dropdownRef}>
-				<div class="text-sm font-medium text-[#2C2C30]">
-					{sidebar.dropdownLabel || 'Pilih Sub Daerah Irigasi'}
-				</div>
-				<div class="flex items-center rounded-sm border border-[#CED4DA]">
-					{#if show}
-						<div class="relative flex-1">
-							<button
-								type="button"
-								class="flex w-full items-center justify-between rounded-sm bg-white p-2 text-left text-sm text-[#2C2C30]"
-								onclick={toggleAreaDropdown}
-								onkeydown={handleAreaButtonKeydown}
-							>
-								<span class="block w-32 overflow-hidden text-ellipsis whitespace-nowrap"
-									>{selectedDropdownLabel || 'Pilih'}</span
-								>
-								<ChevronDown direction={areaDropdownOpen ? 'up' : 'down'} />
-							</button>
-							{#if areaDropdownOpen}
-								<div
-									class="absolute top-full right-0 left-0 z-20 mt-2 overflow-hidden rounded-md bg-white shadow-lg"
-								>
-									<div class="max-h-56 overflow-y-auto py-1">
-										{#if namespaces.length}
-											{#each namespaces as area}
-												<button
-													type="button"
-													class={`flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-xs transition ${
-														area.id === selectedDropdownId
-															? 'text-[#F79B09]'
-															: 'text-[#212529] hover:bg-[#F5F5F5]'
-													}`}
-													onclick={() => selectArea(area.id)}
-												>
-													<span class="truncate">{area.name}</span>
-												</button>
-											{/each}
-										{:else}
-											<div class="px-3 py-2 text-xs text-slate-400">Tidak ada hasil</div>
-										{/if}
-									</div>
-								</div>
-							{/if}
-						</div>
-					{/if}
-					{#if isAdmin}
-						<button
-							type="button"
-							onclick={() => gotoSlug('kelola-sub-daerah-irigasi')}
-							class="flex size-9 items-center justify-center rounded-r-sm border-l border-[#CED4DA] bg-[#E9ECEF] text-[#2C2C30]"
-						>
-							<GearTwo />
-						</button>
-					{/if}
-				</div>
-			</div>
-
-			<nav class="flex flex-1 flex-col gap-2 overflow-y-auto p-4">
-				{#each sidebar.nav as item}
-					<div>
-						{#if item.children?.length}
-							<button
-								type="button"
-								class="flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-2 text-left text-[14px] text-[#2C2C30] transition hover:bg-[#F5F5F5]"
-								onclick={() => toggleGroup(item.title)}
-							>
-								<span class="flex items-center gap-2">
-									{#if item.icon}
-										<span class="text-[#495057]">{@html item.icon}</span>
-									{/if}
-									<span>{item.title}</span>
-								</span>
-								<ChevronDown direction={openGroups[item.title] ? 'up' : 'down'} />
-							</button>
-							{#if openGroups[item.title]}
-								<div class="mt-1 ml-6 flex flex-col gap-1">
-									{#each item.children as child}
-										<button
-											onclick={() => gotoSlug(child.slug)}
-											class={`flex items-center gap-2 rounded-md px-2.5 py-2 text-[14px] text-[#2C2C30] transition hover:bg-[#F5F5F5] ${page.url.pathname.split('/').includes(child.slug) ? 'bg-[#F8F9FA] text-[#F79B09]' : ''}`}
-										>
-											{#if child.icon}
-												<span class="text-[#495057]">{@html child.icon}</span>
-											{/if}
-											<span class="text-left">{child.title}</span>
-										</button>
-									{/each}
-								</div>
-							{/if}
-						{:else}
-							<button
-								onclick={() => gotoSlug(item.slug)}
-								class={`flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-2 text-[14px] text-[#2C2C30] transition hover:bg-[#F5F5F5] ${page.url.pathname.split('/').includes(item.slug) ? 'bg-[#F8F9FA] text-[#F79B09]' : ''}`}
-							>
-								<span class="flex items-center gap-2">
-									{#if item.icon}
-										<span class="text-[#495057]">{@html item.icon}</span>
-									{/if}
-									<span>{item.title}</span>
-								</span>
-							</button>
-						{/if}
-					</div>
-				{/each}
-			</nav>
-
-			<div class="relative border-t border-[#EAECF0] p-4">
-				<button
-					type="button"
-					class="flex w-full items-center gap-2 text-left"
-					onclick={toggleUserMenu}
-				>
-					<div class="grid size-9 place-items-center">
-						<img src={user.avatarUrl} alt="avatar" class="size-full rounded-full object-cover" />
-					</div>
-					<div class="min-w-0 flex-1">
-						<div class="truncate text-[12px] font-medium text-[#495057]">{user.name}</div>
-						<div class="truncate text-[10px] text-[#ADB5BD]">{user.role}</div>
-					</div>
-					<ChevronDown direction={'right'} />
-				</button>
-				{#if userMenuOpen}
-					<div
-						class="absolute bottom-0 left-[calc(100%+12px)] z-30 w-[216px] rounded-xl border border-[#EAECF0] bg-white p-4 text-left shadow-[0px_12px_32px_rgba(15,23,42,0.12)]"
-					>
-						<div class="flex flex-col gap-3">
-							<!-- <div>
-							<div class="text-xs font-semibold text-[#2C2C30]">Ubah Role</div>
-							<div class="mt-2">
-								<select
-									class="w-full rounded-md border border-[#CED4DA] bg-white px-3 py-2 text-xs text-[#2C2C30] focus:outline-none focus:ring-2 focus:ring-[#F79B09]/40"
-								>
-								</select>
-							</div>
-							<div class="mt-1 text-[10px] text-[#ADB5BD]">Lihat view dari role lainnya</div>
-						</div>
-
-						<hr class="border-[#EAECF0]" /> -->
-
-							<button
-								type="button"
-								class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs font-medium text-[#2C2C30] transition hover:bg-[#F5F5F5]"
-								onclick={handleProfileClick}
-							>
-								<User />
-								<span>Profil Akun</span>
-							</button>
-
-							<button
-								type="button"
-								class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-xs font-semibold text-[#D14343] transition hover:bg-[#FFF5F0]"
-								onclick={handleLogout}
-							>
-								<span>Keluar / Log Out</span>
-								<span class="flex items-center gap-1 text-[#D14343]">
-									<Logout />
-								</span>
-							</button>
-						</div>
-					</div>
-				{/if}
-			</div>
-		</div>
-	{:else}
-		<div class="flex h-full flex-col items-center pt-6">
-			<div class="mb-3 h-8 w-8 rounded-sm bg-transparent"></div>
-
-			<nav class="w-full flex-1 overflow-hidden overflow-y-auto px-2">
-				{#each sidebar.nav as item}
-					{#if item.children?.length}
-						<!-- Group root icon with fly-out -->
-						<div class="group relative my-1">
-							<button
-								type="button"
-								onclick={onToggleSidebar}
-								class="mx-auto flex h-10 w-10 items-center justify-center rounded-md text-[#2C2C30] hover:bg-[#F5F5F5]"
-								aria-haspopup="true"
-								aria-expanded={openGroups[item.title] ? 'true' : 'false'}
-								title={item.title}
-								onmouseenter={() => (openGroups = { ...openGroups, [item.title]: true })}
-								onmouseleave={() => (openGroups = { ...openGroups, [item.title]: false })}
-							>
-								{#if item.icon}
-									<span class="text-[#495057]">{@html item.icon}</span>
-								{/if}
-							</button>
-
-							{#if openGroups[item.title]}
-								<!-- svelte-ignore a11y_no_static_element_interactions -->
-								<div
-									class="absolute top-0 left-[3.25rem] z-30 w-48 overflow-hidden rounded-md border border-[#EAECF0] bg-white py-1 shadow-lg"
-									onmouseenter={() => (openGroups = { ...openGroups, [item.title]: true })}
-									onmouseleave={() => (openGroups = { ...openGroups, [item.title]: false })}
-								>
-									{#each item.children as child}
-										<button
-											onclick={() => gotoSlug(child.slug)}
-											class={`flex w-full items-center gap-2 px-3 py-2 text-sm transition hover:bg-[#F5F5F5] ${
-												page.url.pathname.split('/').includes(child.slug)
-													? 'bg-[#F8F9FA] text-[#F79B09]'
-													: 'text-[#2C2C30]'
-											}`}
-											title={child.title}
-										>
-											{#if child.icon}
-												<span class="text-[#495057]">{@html item.icon}</span>
-											{/if}
-											<span class="truncate">{child.title}</span>
-										</button>
-									{/each}
-								</div>
-							{/if}
-						</div>
-					{:else}
-						<!-- Single item icon -->
-						<button
-							onclick={() => gotoSlug(item.slug)}
-							class={`mx-auto my-1 flex h-10 w-10 items-center justify-center rounded-md transition hover:bg-[#F5F5F5] ${
-								page.url.pathname.split('/').includes(item.slug)
-									? 'bg-[#F8F9FA] ring-1 ring-[#F79B09]/40'
-									: ''
-							}`}
-							title={item.title}
-							aria-label={item.title}
-						>
-							{#if item.icon}
-								<span class="text-[#495057]">{@html item.icon}</span>
-							{/if}
-						</button>
-					{/if}
-				{/each}
-			</nav>
-
-			<!-- User avatar + quick menu (icon only) -->
-			<div class="relative flex w-full items-center justify-center border-t border-[#EAECF0] p-3">
-				<button
-					type="button"
-					class="grid size-9 place-items-center rounded-full"
-					onclick={toggleUserMenu}
-					title={`${user.name} • ${user.role}`}
-					aria-haspopup="true"
-					aria-expanded={userMenuOpen ? 'true' : 'false'}
-				>
-					<img src={user.avatarUrl} alt="avatar" class="size-full rounded-full object-cover" />
-				</button>
-
-				{#if userMenuOpen}
-					<div
-						class="absolute bottom-3 left-[3.25rem] z-30 w-56 rounded-xl border border-[#EAECF0] bg-white p-4 text-left shadow-[0px_12px_32px_rgba(15,23,42,0.12)]"
-					>
-						<div class="mb-2">
-							<div class="truncate text-xs font-medium text-[#495057]">{user.name}</div>
-							<div class="truncate text-[10px] text-[#ADB5BD]">{user.role}</div>
-						</div>
-						<button
-							type="button"
-							class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs font-medium text-[#2C2C30] transition hover:bg-[#F5F5F5]"
-							onclick={handleProfileClick}
-						>
-							<User />
-							<span>Profil Akun</span>
-						</button>
-						<button
-							type="button"
-							class="mt-1 flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-xs font-semibold text-[#D14343] transition hover:bg-[#FFF5F0]"
-							onclick={handleLogout}
-						>
-							<span>Keluar / Log Out</span>
-							<span class="flex items-center gap-1 text-[#D14343]"><Logout /></span>
-						</button>
-					</div>
-				{/if}
-			</div>
-		</div>
-	{/if}
-</aside>

package/dist/layouts/IMS/IMSLayout1/components/ImsSidebar.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { ISidebarData, ISidebarNamespace } from '../types/IImsLayout.js';
-type $$ComponentProps = {
-    show?: boolean;
-    pageInfo: {
-        namespace: string;
-    };
-    sidebar: ISidebarData;
-    namespaces: ISidebarNamespace[];
-    showSidebar: boolean;
-    onToggleSidebar: () => void;
-};
-declare const ImsSidebar: import("svelte").Component<$$ComponentProps, {}, "show">;
-type ImsSidebar = ReturnType<typeof ImsSidebar>;
-export default ImsSidebar;

package/dist/layouts/IMS/IMSLayout1/types/IImsLayout.d.ts

@@ -1,55 +0,0 @@
-import type { Snippet } from 'svelte';
-export interface IImsLayoutHeader {
-    version: string;
-}
-export interface ISidebarNamespace {
-    id: string;
-    name: string;
-}
-export interface ISidebarNavChild {
-    title: string;
-    slug: string;
-    icon?: string;
-}
-export interface ISidebarNavItem {
-    title: string;
-    slug?: string;
-    icon?: string;
-    children?: ISidebarNavChild[];
-}
-export interface ISidebarUser {
-    name: string;
-    role: string;
-    avatarUrl?: string;
-    roleOptions?: Array<unknown>;
-}
-export interface ISidebarData {
-    logoUrl: string;
-    dropdownLabel?: string;
-    nav: ISidebarNavItem[];
-    user: ISidebarUser;
-}
-export interface CMSNamespaceItem {
-    id: string;
-    name: string;
-}
-export interface CMSNamespaceResponse {
-    cms_type: string;
-    enable_public_page: boolean;
-    id: string;
-    name: string;
-    namespaces: CMSNamespaceItem[];
-    slug: string;
-    base_url: string;
-}
-export interface IImsLayout {
-    cmsNamespaceResponseData: CMSNamespaceResponse;
-    type: string;
-    header: IImsLayoutHeader;
-    sidebar: ISidebarData;
-    children: Snippet;
-    content?: Snippet;
-    pageInfo: {
-        namespace: string;
-    };
-}

package/dist/layouts/IMS/IMSLayout1/types/IImsLayout.js

@@ -1 +0,0 @@
-export {};

package/dist/mocks/IMS/index.d.ts

@@ -1,44 +0,0 @@
-export declare const IImsLayout: {
-    type: string;
-    cmsNamespaceResponseData: {
-        id: string;
-        slug: string;
-        name: string;
-        cms_type: string;
-        base_url: string;
-        enable_public_page: boolean;
-        namespaces: {
-            id: string;
-            name: string;
-        }[];
-    };
-    pageInfo: {
-        namespace: string;
-    };
-    header: {
-        version: string;
-    };
-    sidebar: {
-        logoUrl: string;
-        nav: ({
-            icon: string;
-            slug: string;
-            title: string;
-            children?: undefined;
-        } | {
-            children: {
-                icon: string;
-                slug: string;
-                title: string;
-            }[];
-            icon: string;
-            title: string;
-            slug?: undefined;
-        })[];
-        user: {
-            avatarUrl: string;
-            name: string;
-            role: string;
-        };
-    };
-};

package/dist/mocks/IMS/index.js

@@ -1,88 +0,0 @@
-export const IImsLayout = {
-    type: 'ims-layout1',
-    cmsNamespaceResponseData: {
-        id: '',
-        slug: 'ims-saddang',
-        name: 'Saddang',
-        cms_type: 'IMS',
-        base_url: 'https://cms.mertani.my.id',
-        enable_public_page: true,
-        namespaces: [
-            {
-                id: '1efbafdf-f83f-42ba-a710-29f875598895',
-                name: 'pekkaabata'
-            },
-            {
-                id: '5fa1932e-dbca-442d-b06b-a675c5f390bd',
-                name: 'Saddang'
-            }
-        ]
-    },
-    pageInfo: {
-        namespace: '5fa1932e-dbca-442d-b06b-a675c5f390bd'
-    },
-    header: {
-        version: '1.2.0'
-    },
-    sidebar: {
-        logoUrl: '/assets/images/logo.png',
-        nav: [
-            {
-                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                slug: 'beranda',
-                title: 'Beranda'
-            },
-            {
-                children: [
-                    {
-                        icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                        slug: 'profil-daerah-irigasi',
-                        title: 'Profil Daerah Irigasi'
-                    },
-                    {
-                        icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                        slug: 'infrastruktur-irigasi',
-                        title: 'Infrastruktur Irigasi'
-                    },
-                    {
-                        icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                        slug: 'skema-jaringan-irigasi',
-                        title: 'Skema Jaringan Irigasi'
-                    }
-                ],
-                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                title: 'Daerah Irigasi'
-            },
-            {
-                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                slug: 'debit-klimatologi',
-                title: 'Debit & Klimatologi'
-            },
-            {
-                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                slug: 'rencana-pola-tanam',
-                title: 'Rencana Pola Tanam'
-            },
-            {
-                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                slug: 'laporan',
-                title: 'Laporan'
-            },
-            {
-                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                slug: 'monitoring',
-                title: 'Monitoring'
-            },
-            {
-                icon: '<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<g clip-path="url(#clip0_6267_47931)">\n\t\t<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />\n\t\t<path\n\t\t\td="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"\n\t\t\tfill="#212529"\n\t\t/>\n\t</g>\n\t<defs>\n\t\t<clipPath id="clip0_6267_47931">\n\t\t\t<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />\n\t\t</clipPath>\n\t</defs>\n</svg>',
-                slug: 'pengaturan',
-                title: 'Pengaturan'
-            }
-        ],
-        user: {
-            avatarUrl: 'https://storage.mertani.my.id/user-photo-10ca5eb5-5e49-45bc-abc4-59c99657a859',
-            name: 'You rooot',
-            role: 'admin-mertani'
-        },
-    }
-};