fix/logo-bad-location

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

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { Button } from "$lib/components/ui/button/index.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";
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { cn, getBackendAssetUrl } from '$lib/utils.js';
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+	import type { ComponentProps } from 'svelte';
+	import { useSidebar } from './context.svelte.js';
 
 	let {
 		ref = $bindable(null),
@@ -16,19 +15,6 @@
 	} = $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
@@ -36,13 +22,7 @@
 	data-slot="sidebar-trigger"
 	variant="ghost"
 	size="icon"
-	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
-	)}
+	class={cn('h-8 w-8', className)}
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);
@@ -50,28 +30,6 @@
 	}}
 	{...restProps}
 >
-	<!-- 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" />
+	<PanelLeftIcon />
 	<span class="sr-only">Toggle Sidebar</span>
 </Button>