flambeaux/flbxcup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

homepage and logo

Browse source
This commit is contained in:
unurled 2025-06-24 20:32:26 +02:00
parent c9d982669a
commit ef6dadb148
12 changed files with 359 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

9
resources/js/components/AppHeader.svelte
View file

@ -42,11 +42,6 @@
];
const rightNavItems: NavItem[] = [
{
title: 'Repository',
href: 'https://github.com/oseughu/svelte-starter-kit',
icon: Folder,
},
{
title: 'Documentation',
href: 'https://laravel.com/docs/starter-kits',
@ -101,9 +96,7 @@
</Sheet>
</div>
<Link href={route('dashboard')} class="flex items-center gap-x-2">
<AppLogo />
</Link>
<AppLogo />
<!-- Desktop Menu -->
<div class="hidden h-full lg:flex lg:flex-1">

41
resources/js/components/AppLogo.svelte
View file

@ -1,12 +1,45 @@
<script lang="ts">
import AppLogoIcon from '@/components/AppLogoIcon.svelte';
import { type Appearance, useAppearance } from '@/hooks/useAppearance.svelte';
import { MonitorIcon, Moon, Sun } from 'lucide-svelte';
import Button from './ui/button/button.svelte';
import { Link } from '@inertiajs/svelte';
const appearanceManager = useAppearance();
// Create a local reactive variable that tracks the hook's value
let currentAppearance = $state(appearanceManager.appearance);
function handleUpdateAppearance(value: Appearance) {
appearanceManager.updateAppearance(value);
// Immediately update local state to ensure UI reflects the change
currentAppearance = value;
}
</script>
<div class="inline-flex items-center gap-3">
<div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">
<AppLogoIcon class="size-5 fill-current text-white! dark:text-black!" />
<div class="inline-flex w-full justify-around">
<div class="inline-flex items-center gap-3">
<div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md">
<AppLogoIcon class="size-5 object-cover" />
</div>
<div class="flex items-center">
<Link href={route('home')} class="flex items-center gap-x-2">
<span class="truncate text-sm font-semibold">FlbxCup</span>
</Link>
</div>
</div>
<div class="flex items-center">
<span class="truncate text-sm font-semibold">Laravel Starter Kit</span>
{#if currentAppearance === 'light'}
<Button onclick={() => handleUpdateAppearance('dark')}>
<Sun class="h-4 w-4" />
</Button>
{:else if currentAppearance === 'dark'}
<Button onclick={() => handleUpdateAppearance('system')}>
<Moon class="h-4 w-4" />
</Button>
{:else}
<Button onclick={() => handleUpdateAppearance('light')}>
<MonitorIcon class="h-4 w-4" />
</Button>
{/if}
</div>
</div>

69
resources/js/components/AppLogoIcon.svelte
View file

File diff suppressed because one or more lines are too long

20
resources/js/components/AppSidebar.svelte
View file

@ -4,9 +4,10 @@
import NavUser from '@/components/NavUser.svelte';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/svelte';
import { Link, page } from '@inertiajs/svelte';
import { BookOpen, Folder, LayoutGrid } from 'lucide-svelte';
import AppLogo from './AppLogo.svelte';
import Button from './ui/button/button.svelte';
const mainNavItems: NavItem[] = [
{
@ -17,11 +18,6 @@
];
const footerNavItems: NavItem[] = [
{
title: 'Repository',
href: 'https://github.com/oseughu/svelte-starter-kit',
icon: Folder,
},
{
title: 'Admin Dashboard',
href: '/admin',
@ -36,9 +32,7 @@
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg">
<Link href={route('dashboard')}>
<AppLogo />
</Link>
<AppLogo />
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
@ -50,6 +44,12 @@
<SidebarFooter>
<NavFooter items={footerNavItems} class="mt-auto" />
<NavUser />
{#if $page.props.auth.user}
<NavUser />
{:else}
<Button>
<a href={route('auth.redirect')} class="flex items-center gap-2">Login</a>
</Button>
{/if}
</SidebarFooter>
</Sidebar>

36
resources/js/components/UserInfo.svelte
View file

@ -4,7 +4,7 @@
import type { User } from '@/types';
interface Props {
user: User;
user?: User;
showEmail?: boolean;
}
@ -12,23 +12,25 @@
const { getInitials } = useInitials();
let showAvatar = $derived(user.avatar && user.avatar !== '');
let showAvatar = $derived(user?.avatar && user?.avatar !== '');
</script>
<Avatar class="h-8 w-8 overflow-hidden rounded-full">
{#if showAvatar}
<AvatarImage src={user.avatar} alt={user.name} />
{:else}
<AvatarFallback class="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
{getInitials(user.name)}
</AvatarFallback>
{/if}
</Avatar>
{#if user}
<Avatar class="h-8 w-8 overflow-hidden rounded-full">
{#if showAvatar}
<AvatarImage src={user.avatar} alt={user.name} />
{:else}
<AvatarFallback class="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
{getInitials(user.name)}
</AvatarFallback>
{/if}
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">{user.name}</span>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">{user.name}</span>
{#if showEmail}
<span class="truncate text-xs text-muted-foreground">{user.email}</span>
{/if}
</div>
{#if showEmail}
<span class="truncate text-xs text-muted-foreground">{user.email}</span>
{/if}
</div>
{/if}