starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-21 08:15:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: update user navigation and add logo component for improved branding

Browse Source
This commit is contained in:
maxDorninger
2025-05-19 19:56:37 +02:00
parent 30007702db
commit 0894772e86
13 changed files with 363 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/lib/components/app-sidebar.svelte
View File

@@ -63,6 +63,8 @@
import * as Sidebar from '$lib/components/ui/sidebar/index.js';
import Command from '@lucide/svelte/icons/command';
import type {ComponentProps} from 'svelte';
import logo from '$lib/images/logo.svg';
import {base} from "$app/paths";
let {ref = $bindable(null), ...restProps}: ComponentProps<typeof Sidebar.Root> = $props();
</script>
@@ -73,15 +75,11 @@
<Sidebar.MenuItem>
<Sidebar.MenuButton size="lg">
{#snippet child({props})}
<a href="##" {...props}>
<div
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
>
<Command class="size-4"/>
</div>
<a href="{base}/dashboard" {...props}>
<img class="size-12" src={logo} alt="Media Manager Logo"/>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Acme Inc</span>
<span class="truncate text-xs">Enterprise</span>
<span class="truncate font-semibold">Media Manager</span>
<span class="truncate text-xs">version? or smth else?</span>
</div>
</a>
{/snippet}

10
web/src/lib/components/logo-side-by-side.svelte Normal file
View File

@@ -0,0 +1,10 @@
<script lang="ts">
import logo from '$lib/images/logo.svg';
let props = $props();
</script>
<div {...props} class="flex items-center">
<img alt="Logo" class="h-12 w-12 mr-2" src={logo}/>
<span class="text-3xl font-bold">Media Manager</span>
</div>

4
web/src/lib/components/nav-user.svelte
View File

@@ -51,7 +51,9 @@
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar.Root class="h-8 w-8 rounded-lg">
<!--<Avatar.Image src={user.avatar} alt={user.name} />-->
<Avatar.Fallback class="rounded-lg">CN</Avatar.Fallback>
<Avatar.Fallback class="rounded-lg">
<UserRound/>
</Avatar.Fallback>
</Avatar.Root>
<div class="grid flex-1 text-left text-sm leading-tight">
<UserDetails/>