Merge pull request 'feature/logo-nav' (#118) from feature/logo-nav into development

Reviewed-on: ADUANASOFT/anexo76#118

frontend/src/lib/components/ui/sidebar/sidebar-trigger.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { Button } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { cn, getBackendAssetUrl } from "$lib/utils.js";
 	import PanelLeftIcon from "@lucide/svelte/icons/panel-left";
 	import type { ComponentProps } from "svelte";
+	import { companyStore } from "$lib/stores/company.svelte";
 	import { useSidebar } from "./context.svelte.js";
 
 	let {
@@ -15,6 +16,19 @@
 	} = $props();
 
 	const sidebar = useSidebar();
+
+	// Derive the current company logo as a skin for the trigger when collapsed.
+	let activeCompanyLogoUrl = $derived(
+		companyStore.activeCompany?.logo
+			? getBackendAssetUrl(
+				`v1/a76/company/${companyStore.activeCompany.id}/logo/image?t=${Date.now()}`
+			)
+			: null
+	);
+
+	// Keep a short fallback in case there is no logo.
+	const fallbackBg =
+		"radial-gradient(circle at 30% 30%, rgba(0,0,0,0.08), rgba(0,0,0,0.12)), linear-gradient(135deg, rgba(99,102,241,0.08), rgba(14,165,233,0.14))";
 </script>
 
 <Button
@@ -22,7 +36,13 @@
 	data-slot="sidebar-trigger"
 	variant="ghost"
 	size="icon"
-	class={cn("size-7", className)}
+	class={cn(
+		"relative flex aspect-square h-10 w-10 items-center justify-center overflow-hidden rounded-lg",
+		"border border-sidebar-border/60 bg-sidebar shadow-sm transition-all duration-300",
+		"hover:bg-sidebar-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+		"group-data-[collapsible=icon]/sidebar-wrapper:size-9",
+		className
+	)}
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);
@@ -30,6 +50,28 @@
 	}}
 	{...restProps}
 >
-	<PanelLeftIcon />
+	<!-- Logo skin behind the icon; fades/blurs when collapsed for legibility -->
+	<span
+		aria-hidden
+		class={cn(
+			"absolute inset-0 bg-center bg-no-repeat transition-all duration-300",
+			"bg-contain",
+			sidebar.state === "collapsed"
+				? "opacity-75 blur-[0.5px] scale-95"
+				: "opacity-100 blur-0 scale-105"
+		)}
+		style:background-image={activeCompanyLogoUrl ? `url(${activeCompanyLogoUrl})` : fallbackBg}
+	/>
+
+	<!-- Subtle overlay to keep the icon readable over the logo skin -->
+	<span
+		class={cn(
+			"pointer-events-none absolute inset-0 transition-opacity duration-300",
+			sidebar.state === "collapsed" ? "bg-black/10 opacity-100" : "opacity-0"
+		)}
+		aria-hidden
+	/>
+
+	<PanelLeftIcon class="relative z-10 transition-transform duration-300" />
 	<span class="sr-only">Toggle Sidebar</span>
 </Button>