granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update database layout with sidebar navigation

Browse source
This commit is contained in:
Justin Edmund 2025-09-17 13:42:02 -07:00
parent 54491b1158
commit 281a595eb3
2 changed files with 35 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/routes/database/+layout.server.ts
View file

@ -2,20 +2,20 @@ import { redirect } from '@sveltejs/kit'
import type { LayoutServerLoad } from './$types' import type { LayoutServerLoad } from './$types'
export const load: LayoutServerLoad = async ({ locals, url }) => { export const load: LayoutServerLoad = async ({ locals, url }) => {
// Check authentication first // Check authentication first
if (!locals.session.isAuthenticated) { if (!locals.session.isAuthenticated) {
throw redirect(302, '/login') throw redirect(302, '/login')
} }
// Check role authorization // Check role authorization
const role = locals.session.account?.role ?? 0 const role = locals.session.account?.role ?? 0
if (role < 7) { if (role < 7) {
// Redirect to home with no indication of why (security best practice) // Redirect to home with no indication of why (security best practice)
throw redirect(302, '/') throw redirect(302, '/')
} }
return { return {
role role,
} user: locals.session.user
}
} }

71
src/routes/database/+layout.svelte
View file

@ -1,59 +1,30 @@
<script lang="ts"> <script lang="ts">
import { localizeHref } from '$lib/paraglide/runtime' import { localizeHref } from '$lib/paraglide/runtime'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { page } from '$app/stores'
import type { PageData } from './$types'
const baseHref = localizeHref('/database') const { data, children }: { data: PageData; children: () => any } = $props()
const summonsHref = localizeHref('/database/summons')
const charactersHref = localizeHref('/database/characters')
const weaponsHref = localizeHref('/database/weapons')
// Apply wider layout to the main element for database pages const baseHref = localizeHref('/database')
onMount(() => { const summonsHref = localizeHref('/database/summons')
const main = document.querySelector('main') const charactersHref = localizeHref('/database/characters')
if (main) { const weaponsHref = localizeHref('/database/weapons')
main.classList.add('database-layout')
}
return () => { // Function to check if a nav item is selected based on current path
const main = document.querySelector('main') function isSelected(href: string): boolean {
if (main) { return $page.url.pathname === href || $page.url.pathname.startsWith(href + '/')
main.classList.remove('database-layout') }
}
} // Get user's element for styling
}) const userElement = $derived((data as any)?.user?.element || 'null')
</script> </script>
<section class="db-nav"> {@render children?.()}
<nav>
<a href={summonsHref}>Summons</a>
<a href={charactersHref}>Characters</a>
<a href={weaponsHref}>Weapons</a>
</nav>
</section>
<slot />
<style lang="scss"> <style lang="scss">
@use '$src/themes/layout' as layout; @use '$src/themes/layout' as layout;
@use '$src/themes/spacing' as spacing; @use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography; @use '$src/themes/typography' as typography;
@use '$src/themes/colors' as colors;
.db-nav {
margin: spacing.$unit 0;
nav {
display: flex;
gap: spacing.$unit-half;
a {
text-decoration: none;
color: var(--menu-text);
background: var(--menu-bg);
padding: spacing.$unit (spacing.$unit * 1.5);
border-radius: layout.$full-corner;
font-size: typography.$font-small;
font-weight: typography.$medium;
}
a:hover { background: var(--menu-bg-item-hover); }
}
}
</style> </style>