@rkosafo/cai.components 0.0.80 → 0.0.81

package/dist/ui/toast/Toast.svelte.d.ts

@@ -1,75 +1,50 @@
-export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'custom';
-export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export interface CustomToastOptions extends ToastOptions {
-    icon?: string;
-    showProgress?: boolean;
-    progressColor?: string;
-    borderColor?: string;
-    backgroundColor?: string;
-    textColor?: string;
-    iconColor?: string;
-    style?: any;
-    action?: {
-        label: string | boolean;
-        onClick: () => void;
-        buttonStyle?: string;
-    };
-}
-export interface ToastTheme {
-    success?: Partial<CustomToastOptions>;
-    error?: Partial<CustomToastOptions>;
-    warning?: Partial<CustomToastOptions>;
-    info?: Partial<CustomToastOptions>;
-    loading?: Partial<CustomToastOptions>;
-    custom?: Partial<CustomToastOptions>;
-}
+import { toast as originalToast, type DefaultToastOptions, type Renderable, resolveValue, type ToastOptions, type ToastPosition, type ValueOrFunction } from 'svelte-french-toast';
+export { CheckmarkIcon, ErrorIcon, LoaderIcon, ToastBar, ToastIcon, useToaster, useToasterStore } from 'svelte-french-toast';
+export { resolveValue };
+export type { DefaultToastOptions, IconTheme, Toast, ToastOptions, ToastPosition, ToastType, Renderable, ValueFunction, ValueOrFunction } from 'svelte-french-toast';
+export type CustomToastOptions = ToastOptions;
+export type ToastTheme = Record<string, never>;
 export interface ToasterProps {
     position?: ToastPosition;
     duration?: number;
-    theme?: ToastTheme;
+    toastOptions?: DefaultToastOptions;
+    reverseOrder?: boolean;
+    gutter?: number;
+    containerStyle?: string;
+    containerClassName?: string;
+    fireWithSound?: boolean;
     className?: string;
-    toastOptions?: ToastOptions;
+    theme?: ToastTheme;
     richColors?: boolean;
     customIcons?: boolean;
     closeButton?: boolean;
     pauseOnHover?: boolean;
-    reverseOrder?: boolean;
     visibleToasts?: number;
     expand?: boolean;
     gap?: number;
     offset?: number | string;
 }
-export declare const toast: {
-    success: (message: string, options?: CustomToastOptions) => string;
-    error: (message: string, options?: CustomToastOptions) => string;
-    warning: (message: string, options?: CustomToastOptions) => string;
-    info: (message: string, options?: CustomToastOptions) => string;
-    loading: (message: string, options?: CustomToastOptions) => string;
-    promise: <T>(promise: Promise<T>, messages: {
-        loading: string;
-        success: string;
-        error: string;
-    }, options?: {
-        loading?: CustomToastOptions;
-        success?: CustomToastOptions;
-        error?: CustomToastOptions;
-    }) => Promise<T>;
-    custom: (message: string, type?: ToastType, options?: CustomToastOptions) => string;
-    action: (message: string, action: {
-        label: string;
-        onClick: () => void;
-    }, options?: CustomToastOptions) => string;
-    dismiss: (toastId?: string) => void;
-    remove: (toastId?: string) => void;
-};
 export declare function updateToastConfig(config: {
     duration?: number;
+    fireWithSound?: boolean;
     theme?: ToastTheme;
     richColors?: boolean;
 }): void;
+export declare const toast: ((message: Renderable, options?: ToastOptions) => string) & {
+    success: (message: Renderable, options?: ToastOptions) => string;
+    error: (message: Renderable, options?: ToastOptions) => string;
+    loading: (message: Renderable, options?: ToastOptions) => string;
+    promise: <T>(promise: Promise<T>, msgs: {
+        loading: Renderable;
+        success: ValueOrFunction<Renderable, T>;
+        error: ValueOrFunction<Renderable, any>;
+    }, opts?: DefaultToastOptions) => Promise<T>;
+    dismiss: (toastId?: string) => void;
+    remove: (toastId?: string) => void;
+    custom: (message: Renderable, options?: ToastOptions) => string;
+};
 export { originalToast };
 export type { ToastOptions };
-import { toast as originalToast, type ToastOptions } from 'svelte-french-toast';
 declare const Toast: import("svelte").Component<ToasterProps, {}, "">;
 type Toast = ReturnType<typeof Toast>;
 export default Toast;

package/dist/ui/toast/index.d.ts

@@ -1 +1,2 @@
-export * from 'svelte-french-toast';
+export { default as Toaster, toast, originalToast, updateToastConfig } from './Toast.svelte';
+export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme, ToastOptions } from './Toast.svelte';

package/dist/ui/toast/index.js

@@ -1,3 +1 @@
-// export { default as Toaster, toast } from './Toast.svelte';
-// export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme } from './Toast.svelte';
-export * from 'svelte-french-toast';
+export { default as Toaster, toast, originalToast, updateToastConfig } from './Toast.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "files": [
     "dist",
     "!dist/**/*.test.*",

package/dist/forms/FormSelect/index.d.ts

@@ -1 +0,0 @@
-export { default as FormSelect } from './FormSelect.svelte';

package/dist/forms/FormSelect/index.js

@@ -1 +0,0 @@
-export { default as FormSelect } from './FormSelect.svelte';

package/dist/forms/input/index.d.ts

@@ -1,4 +0,0 @@
-import type { SizeType } from '../../index.js';
-export { default as Input } from './Input.svelte';
-export { input } from './theme.js';
-export declare function clampSize(s: SizeType): "md" | "sm" | "lg";

package/dist/forms/input/index.js

@@ -1,5 +0,0 @@
-export { default as Input } from './Input.svelte';
-export { input } from './theme.js';
-export function clampSize(s) {
-    return s && s === 'xs' ? 'sm' : s === 'xl' ? 'lg' : s;
-}

package/dist/forms/input/theme.d.ts

@@ -1,301 +0,0 @@
-import type { Classes } from '../../themes/themeUtils.js';
-import { type VariantProps } from 'tailwind-variants';
-export type InputVariants = VariantProps<typeof input> & Classes<typeof input>;
-export declare const input: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: {
-            input: string;
-        };
-        md: {
-            input: string;
-        };
-        lg: {
-            input: string;
-        };
-    };
-    color: {
-        default: {
-            input: string;
-        };
-        tinted: {
-            input: string;
-        };
-        primary: {
-            input: string;
-        };
-        secondary: {
-            input: string;
-        };
-        green: {
-            input: string;
-        };
-        emerald: {
-            input: string;
-        };
-        red: {
-            input: string;
-        };
-        blue: {
-            input: string;
-        };
-        yellow: {
-            input: string;
-        };
-        orange: {
-            input: string;
-        };
-        gray: {
-            input: string;
-        };
-        teal: {
-            input: string;
-        };
-        cyan: {
-            input: string;
-        };
-        sky: {
-            input: string;
-        };
-        indigo: {
-            input: string;
-        };
-        lime: {
-            input: string;
-        };
-        amber: {
-            input: string;
-        };
-        violet: {
-            input: string;
-        };
-        purple: {
-            input: string;
-        };
-        fuchsia: {
-            input: string;
-        };
-        pink: {
-            input: string;
-        };
-        rose: {
-            input: string;
-        };
-    };
-    grouped: {
-        false: {
-            input: string;
-        };
-        true: {
-            input: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    left: string;
-    right: string;
-    close: string;
-    combo: string;
-    comboItem: string;
-    div: string;
-    svg: string;
-    wrapper: string;
-}, undefined, {
-    size: {
-        sm: {
-            input: string;
-        };
-        md: {
-            input: string;
-        };
-        lg: {
-            input: string;
-        };
-    };
-    color: {
-        default: {
-            input: string;
-        };
-        tinted: {
-            input: string;
-        };
-        primary: {
-            input: string;
-        };
-        secondary: {
-            input: string;
-        };
-        green: {
-            input: string;
-        };
-        emerald: {
-            input: string;
-        };
-        red: {
-            input: string;
-        };
-        blue: {
-            input: string;
-        };
-        yellow: {
-            input: string;
-        };
-        orange: {
-            input: string;
-        };
-        gray: {
-            input: string;
-        };
-        teal: {
-            input: string;
-        };
-        cyan: {
-            input: string;
-        };
-        sky: {
-            input: string;
-        };
-        indigo: {
-            input: string;
-        };
-        lime: {
-            input: string;
-        };
-        amber: {
-            input: string;
-        };
-        violet: {
-            input: string;
-        };
-        purple: {
-            input: string;
-        };
-        fuchsia: {
-            input: string;
-        };
-        pink: {
-            input: string;
-        };
-        rose: {
-            input: string;
-        };
-    };
-    grouped: {
-        false: {
-            input: string;
-        };
-        true: {
-            input: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    left: string;
-    right: string;
-    close: string;
-    combo: string;
-    comboItem: string;
-    div: string;
-    svg: string;
-    wrapper: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: {
-            input: string;
-        };
-        md: {
-            input: string;
-        };
-        lg: {
-            input: string;
-        };
-    };
-    color: {
-        default: {
-            input: string;
-        };
-        tinted: {
-            input: string;
-        };
-        primary: {
-            input: string;
-        };
-        secondary: {
-            input: string;
-        };
-        green: {
-            input: string;
-        };
-        emerald: {
-            input: string;
-        };
-        red: {
-            input: string;
-        };
-        blue: {
-            input: string;
-        };
-        yellow: {
-            input: string;
-        };
-        orange: {
-            input: string;
-        };
-        gray: {
-            input: string;
-        };
-        teal: {
-            input: string;
-        };
-        cyan: {
-            input: string;
-        };
-        sky: {
-            input: string;
-        };
-        indigo: {
-            input: string;
-        };
-        lime: {
-            input: string;
-        };
-        amber: {
-            input: string;
-        };
-        violet: {
-            input: string;
-        };
-        purple: {
-            input: string;
-        };
-        fuchsia: {
-            input: string;
-        };
-        pink: {
-            input: string;
-        };
-        rose: {
-            input: string;
-        };
-    };
-    grouped: {
-        false: {
-            input: string;
-        };
-        true: {
-            input: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    left: string;
-    right: string;
-    close: string;
-    combo: string;
-    comboItem: string;
-    div: string;
-    svg: string;
-    wrapper: string;
-}, undefined, unknown, unknown, undefined>>;

package/dist/forms/input/theme.js

@@ -1,100 +0,0 @@
-import { tv } from 'tailwind-variants';
-export const input = tv({
-    slots: {
-        base: 'relative w-full',
-        input: 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:outline-hidden',
-        left: 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 pointer-events-none start-0 p-2.5',
-        right: 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5',
-        close: 'absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black',
-        combo: 'absolute top-full right-0 left-0 z-20 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800',
-        comboItem: 'text-gray-900 dark:text-gray-50',
-        div: '',
-        svg: '',
-        wrapper: ''
-    },
-    variants: {
-        size: {
-            sm: { input: 'text-xs px-2 py-1' },
-            md: { input: 'text-sm px-2.5 py-2.5' },
-            lg: { input: 'sm:text-base px-3 py-3' }
-        },
-        color: {
-            default: {
-                input: 'border border-gray-300 dark:border-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500  text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400'
-            },
-            tinted: {
-                input: 'border border-gray-300 dark:border-gray-500 bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400'
-            },
-            primary: {
-                input: 'border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-gray-700'
-            },
-            secondary: {
-                input: 'border border-secondary-200 dark:border-secondary-400 focus:ring-secondary-500 focus:border-secondary-600 dark:focus:ring-secondary-500 dark:focus:border-secondary-500 bg-secondary-50 text-secondary-900 placeholder-secondary-700 dark:text-secondary-400 dark:placeholder-secondary-500 dark:bg-gray-700'
-            },
-            green: {
-                input: 'border border-green-200 dark:border-green-400 focus:ring-green-500 focus:border-green-600 dark:focus:ring-green-500 dark:focus:border-green-500 bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-gray-700'
-            },
-            emerald: {
-                input: 'border border-emerald-200 dark:border-emerald-400 focus:ring-emerald-500 focus:border-emerald-600 dark:focus:ring-emerald-500 dark:focus:border-emerald-500 bg-emerald-50 text-emerald-900 placeholder-emerald-700 dark:text-emerald-400 dark:placeholder-emerald-500 dark:bg-gray-700'
-            },
-            red: {
-                input: 'border border-red-200 dark:border-red-400 focus:ring-red-500 focus:border-red-600 dark:focus:ring-red-500 dark:focus:border-red-500 bg-red-50 text-red-900 placeholder-red-700 dark:text-red-400 dark:placeholder-red-500 dark:bg-gray-700'
-            },
-            blue: {
-                input: 'border border-blue-200 dark:border-blue-400 focus:ring-blue-500 focus:border-blue-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 dark:text-blue-400 dark:placeholder-blue-500 dark:bg-gray-700'
-            },
-            yellow: {
-                input: 'border border-yellow-200 dark:border-yellow-400 focus:ring-yellow-500 focus:border-yellow-600 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 dark:text-yellow-400 dark:placeholder-yellow-500 dark:bg-gray-700'
-            },
-            orange: {
-                input: 'border border-orange-200 dark:border-orange-400 focus:ring-orange-500 focus:border-orange-600 dark:focus:ring-orange-500 dark:focus:border-orange-500 bg-orange-50 text-orange-900 placeholder-orange-700 dark:text-orange-400 dark:placeholder-orange-500 dark:bg-gray-700'
-            },
-            gray: {
-                input: 'border border-gray-200 dark:border-gray-400 focus:ring-gray-500 focus:border-gray-600 dark:focus:ring-gray-500 dark:focus:border-gray-500 bg-gray-50 text-gray-900 placeholder-gray-700 dark:text-gray-400 dark:placeholder-gray-500 dark:bg-gray-700'
-            },
-            teal: {
-                input: 'border border-teal-200 dark:border-teal-400 focus:ring-teal-500 focus:border-teal-600 dark:focus:ring-teal-500 dark:focus:border-teal-500 bg-teal-50 text-teal-900 placeholder-teal-700 dark:text-teal-400 dark:placeholder-teal-500 dark:bg-gray-700'
-            },
-            cyan: {
-                input: 'border border-cyan-200 dark:border-cyan-400 focus:ring-cyan-500 focus:border-cyan-600 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 dark:text-cyan-400 dark:placeholder-cyan-500 dark:bg-gray-700'
-            },
-            sky: {
-                input: 'border border-sky-200 dark:border-sky-400 focus:ring-sky-500 focus:border-sky-600 dark:focus:ring-sky-500 dark:focus:border-sky-500 bg-sky-50 text-sky-900 placeholder-sky-700 dark:text-sky-400 dark:placeholder-sky-500 dark:bg-gray-700'
-            },
-            indigo: {
-                input: 'border border-indigo-200 dark:border-indigo-400 focus:ring-indigo-500 focus:border-indigo-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 dark:text-indigo-400 dark:placeholder-indigo-500 dark:bg-gray-700'
-            },
-            lime: {
-                input: 'border border-lime-200 dark:border-lime-400 focus:ring-lime-500 focus:border-lime-600 dark:focus:ring-lime-500 dark:focus:border-lime-500 bg-lime-50 text-lime-900 placeholder-lime-700 dark:text-lime-400 dark:placeholder-lime-500 dark:bg-gray-700'
-            },
-            amber: {
-                input: 'border border-amber-200 dark:border-amber-400 focus:ring-amber-500 focus:border-amber-600 dark:focus:ring-amber-500 dark:focus:border-amber-500 bg-amber-50 text-amber-900 placeholder-amber-700 dark:text-amber-400 dark:placeholder-amber-500 dark:bg-gray-700'
-            },
-            violet: {
-                input: 'border border-violet-200 dark:border-violet-400 focus:ring-violet-500 focus:border-violet-600 dark:focus:ring-violet-500 dark:focus:border-violet-500 bg-violet-50 text-violet-900 placeholder-violet-700 dark:text-violet-400 dark:placeholder-violet-500 dark:bg-gray-700'
-            },
-            purple: {
-                input: 'border border-purple-200 dark:border-purple-400 focus:ring-purple-500 focus:border-purple-600 dark:focus:ring-purple-500 dark:focus:border-purple-500 bg-purple-50 text-purple-900 placeholder-purple-700 dark:text-purple-400 dark:placeholder-purple-500 dark:bg-gray-700'
-            },
-            fuchsia: {
-                input: 'border border-fuchsia-200 dark:border-fuchsia-400 focus:ring-fuchsia-500 focus:border-fuchsia-600 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 placeholder-fuchsia-700 dark:text-fuchsia-400 dark:placeholder-fuchsia-500 dark:bg-gray-700'
-            },
-            pink: {
-                input: 'border border-pink-200 dark:border-pink-400 focus:ring-pink-500 focus:border-pink-600 dark:focus:ring-pink-500 dark:focus:border-pink-500 bg-pink-50 text-pink-900 placeholder-pink-700 dark:text-pink-400 dark:placeholder-pink-500 dark:bg-gray-700'
-            },
-            rose: {
-                input: 'border border-rose-200 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-600 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-gray-700'
-            }
-        },
-        grouped: {
-            false: { input: 'rounded-lg' },
-            true: {
-                input: 'first:rounded-s-lg last:rounded-e-lg not-first:-ms-px'
-            }
-        }
-    },
-    defaultVariants: {
-        size: 'md',
-        color: 'default'
-    }
-});

package/dist/layout/TF/Sidebar/Sidebar.svelte

@@ -1,148 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../../utils/index.js';
-	import { page } from '$app/state';
-	import { IconifyIcon, type IMenuItem, type TFSidebarProps } from '../../../index.js';
-	import { slide } from 'svelte/transition';
-
-	let {
-		homeUrl,
-		logoUrl,
-		appName,
-		appShortName,
-		hideSidebar = false,
-		menuItems = [],
-		logo,
-		isActiveFunction
-	}: TFSidebarProps = $props();
-
-	let activeUrl = $state('');
-	let openNestedIndexes = $state<Set<number>>(new Set());
-
-	$effect(() => {
-		activeUrl = page.url.pathname;
-	});
-
-	// Function to toggle nested menu by index
-	function toggleNestedMenu(index: number) {
-		handleMenuItemClick();
-		const newOpenIndexes = new Set(openNestedIndexes);
-
-		if (newOpenIndexes.has(index)) {
-			// If already open, close it
-			newOpenIndexes.delete(index);
-		} else {
-			// If opening new one, just add it (don't clear others)
-			newOpenIndexes.add(index);
-		}
-		openNestedIndexes = newOpenIndexes;
-	}
-
-	// Function to handle regular menu item clicks (non-nested)
-	function handleMenuItemClick() {
-		// Close all nested menus when clicking a regular menu item
-		openNestedIndexes = new Set();
-	}
-
-	// Function to check if a menu item or any of its children is active
-	function isItemOrChildActive(item: IMenuItem): boolean {
-		if (isActiveFunction) {
-			return isActiveFunction(item);
-		}
-
-		if (item.path === activeUrl) {
-			return true;
-		}
-
-		// Check if any child is active
-		if (item.items) {
-			return item.items.some((child) => child.path === activeUrl);
-		}
-
-		return false;
-	}
-</script>
-
-{#snippet menuItemSnippet(item: IMenuItem, active: boolean)}
-	<li class:active class="relative">
-		<a
-			class="space-x-3 pl-3 {active ? 'text-[#3C91E6]' : ''}"
-			href={item.path}
-			onclick={() => handleMenuItemClick()}
-		>
-			<IconifyIcon icon={item.icon} class={active ? 'text-[#3C91E6]' : ''} />
-			<span class="text hidden md:block {active ? 'text-[#3C91E6]' : ''}">{item.title}</span>
-		</a>
-	</li>
-{/snippet}
-
-{#snippet nestedItemSnippet(item: IMenuItem, index: number)}
-	{@const isActive = isItemOrChildActive(item)}
-	{@const isOpen = openNestedIndexes.has(index)}
-
-	<div class="mx-1 rounded-[5px] px-1.5 py-2 {isActive ? 'bg-[#cfe8ff79] text-[#3C91E6]' : ''}">
-		<button
-			class="flex w-full items-center space-x-3 pl-3"
-			onclick={() => toggleNestedMenu(index)}
-			type="button"
-		>
-			<IconifyIcon icon={item.icon} class={isActive ? 'text-[#3C91E6]' : ''} />
-			<span class="text hidden md:block {isActive ? 'text-[#3C91E6]' : ''}">{item.title}</span>
-			<IconifyIcon
-				icon="ri:arrow-down-s-line"
-				class="ml-auto transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
-			/>
-		</button>
-		{#if isOpen}
-			<ul transition:slide class="sub-menu space-y-0 py-1">
-				{#each item.items! as child}
-					{@const isChildActive = isActiveFunction
-						? isActiveFunction(child)
-						: activeUrl === child.path}
-					<div class="pl-4">
-						<li class="relative">
-							<a
-								class="flex items-center space-x-3 rounded transition-colors hover:bg-[#cfe8ff] {isChildActive
-									? 'bg-[#cfe8ff] text-[#3C91E6]'
-									: ''}"
-								href={child.path}
-							>
-								{#if child.icon}
-									<IconifyIcon icon={child.icon} class={isChildActive ? 'text-[#3C91E6]' : ''} />
-								{/if}
-								<span class="text hidden md:block {isChildActive ? 'text-[#3C91E6]' : ''}"
-									>{child.title}</span
-								>
-							</a>
-						</li>
-					</div>
-				{/each}
-			</ul>
-		{/if}
-	</div>
-{/snippet}
-
-<section id="tf-sidebar" class={cn('relative')} class:hide={hideSidebar}>
-	<a href={homeUrl} class="brand flex flex-col pt-4" onclick={() => handleMenuItemClick()}>
-		{#if logo}
-			{@render logo()}
-		{:else}
-			<img src={logoUrl} alt="Logo" class={hideSidebar ? 'w-12' : 'w-12 md:w-24'} loading="lazy" />
-		{/if}
-		<span class="text-base font-thin {hideSidebar ? 'block' : 'md:hidden'}">{appShortName}</span>
-		<p class="text-center text-lg font-medium {hideSidebar ? 'hidden' : 'hidden md:block'}">
-			{appName}
-		</p>
-	</a>
-	{#if menuItems.length > 0}
-		<ul class="side-menu top relative pt-4">
-			{#each menuItems as item, index}
-				{@const active = isActiveFunction ? isActiveFunction(item) : activeUrl === item.path}
-				{#if item.items}
-					{@render nestedItemSnippet(item, index)}
-				{:else}
-					{@render menuItemSnippet(item, active)}
-				{/if}
-			{/each}
-		</ul>
-	{/if}
-</section>