v1.3 - client and admin scaffolding
This commit is contained in:
@@ -0,0 +1,333 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { adminSession } from '$lib/session';
|
||||
|
||||
const navigation = [
|
||||
{ href: '/admin', label: 'Overview', shortLabel: 'OV' },
|
||||
{ href: '/admin/client-access', label: 'Client Access', shortLabel: 'CA' }
|
||||
];
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
function matchesRoute(href: string, pathname: string) {
|
||||
return href === '/admin' ? pathname === '/admin' : pathname.startsWith(href);
|
||||
}
|
||||
|
||||
function pageTitle(pathname: string) {
|
||||
return navigation.find((item) => matchesRoute(item.href, pathname))?.label ?? 'Overview';
|
||||
}
|
||||
|
||||
function initials(name: string) {
|
||||
return name
|
||||
.split(' ')
|
||||
.map((piece) => piece[0])
|
||||
.join('')
|
||||
.slice(0, 2)
|
||||
.toUpperCase();
|
||||
}
|
||||
|
||||
const isProtectedRoute = $derived(page.url.pathname !== '/admin');
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{pageTitle(page.url.pathname)} | Lean 101 Admin Panel</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="admin-shell">
|
||||
<aside class="admin-sidebar">
|
||||
<a class="admin-brand" href="/admin">
|
||||
<span class="brand-mark">L1</span>
|
||||
<span>Lean 101 Admin Panel</span>
|
||||
</a>
|
||||
|
||||
<p class="admin-copy">
|
||||
Internal workspace for Lean 101 operators managing client access and controlled workspace changes.
|
||||
</p>
|
||||
|
||||
<nav class="admin-nav" aria-label="Admin navigation">
|
||||
{#each navigation as item}
|
||||
<a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href}>
|
||||
<span class="nav-icon">{item.shortLabel}</span>
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<div class="admin-footer">
|
||||
<a href="/">Open client workspace</a>
|
||||
{#if $adminSession}
|
||||
<button type="button" onclick={() => adminSession.clear()}>Sign out</button>
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="admin-main">
|
||||
<header class="admin-topbar">
|
||||
<div>
|
||||
<p class="eyebrow">Admin Area</p>
|
||||
<h1>{pageTitle(page.url.pathname)}</h1>
|
||||
</div>
|
||||
|
||||
{#if $adminSession}
|
||||
<div class="profile-card">
|
||||
<span class="profile-avatar">{initials($adminSession.name)}</span>
|
||||
<div>
|
||||
<strong>{$adminSession.name}</strong>
|
||||
<span>{$adminSession.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="profile-card guest">
|
||||
<span class="profile-avatar">A</span>
|
||||
<div>
|
||||
<strong>Admin sign-in required</strong>
|
||||
<span>Use `/admin` to authenticate</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<main class="admin-content">
|
||||
{#if isProtectedRoute && !$adminSession}
|
||||
<section class="locked-card">
|
||||
<p class="eyebrow">Restricted</p>
|
||||
<h2>Sign in through the Lean 101 Admin Panel to continue.</h2>
|
||||
<p>Client access controls are only available inside the separate admin workspace.</p>
|
||||
<a href="/admin">Go to admin sign-in</a>
|
||||
</section>
|
||||
{:else}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.admin-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(0, 1fr);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(167, 217, 190, 0.22), transparent 34%),
|
||||
linear-gradient(180deg, #f7f8f4 0%, #eef2ea 100%);
|
||||
color: #203028;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1.1rem;
|
||||
border-right: 1px solid rgba(34, 54, 45, 0.12);
|
||||
background: rgba(20, 29, 24, 0.96);
|
||||
color: #f4f7f1;
|
||||
}
|
||||
|
||||
.admin-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand-mark,
|
||||
.nav-icon,
|
||||
.profile-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.72rem;
|
||||
color: #0f1713;
|
||||
background: linear-gradient(135deg, #cfe4b8 0%, #83c98b 100%);
|
||||
}
|
||||
|
||||
.admin-copy {
|
||||
margin: 0;
|
||||
color: rgba(244, 247, 241, 0.74);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.admin-nav {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.admin-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.72rem;
|
||||
padding: 0.82rem 0.78rem;
|
||||
border-radius: 0.9rem;
|
||||
color: rgba(244, 247, 241, 0.88);
|
||||
transition: background-color 140ms ease;
|
||||
}
|
||||
|
||||
.admin-nav a:hover,
|
||||
.admin-nav a.active {
|
||||
background: rgba(207, 228, 184, 0.16);
|
||||
}
|
||||
|
||||
.admin-nav a.active {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 1.65rem;
|
||||
height: 1.65rem;
|
||||
border-radius: 0.58rem;
|
||||
color: #0f1713;
|
||||
background: linear-gradient(135deg, #cfe4b8 0%, #83c98b 100%);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.admin-footer {
|
||||
margin-top: auto;
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.admin-footer a,
|
||||
.admin-footer button {
|
||||
padding: 0.82rem 0.88rem;
|
||||
border: 1px solid rgba(244, 247, 241, 0.14);
|
||||
border-radius: 0.88rem;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.4rem;
|
||||
border-bottom: 1px solid rgba(34, 54, 45, 0.1);
|
||||
background: rgba(247, 248, 244, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 0.18rem;
|
||||
color: #66806e;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.admin-topbar h1 {
|
||||
margin: 0;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.72rem;
|
||||
padding: 0.45rem 0.52rem;
|
||||
border: 1px solid rgba(34, 54, 45, 0.1);
|
||||
border-radius: 0.95rem;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 999px;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #4f8860 0%, #203028 100%);
|
||||
}
|
||||
|
||||
.profile-card strong,
|
||||
.profile-card span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.profile-card span {
|
||||
margin-top: 0.14rem;
|
||||
color: #6b7f72;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.guest .profile-avatar {
|
||||
background: linear-gradient(135deg, #c4d0c8 0%, #7b8b80 100%);
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
min-width: 0;
|
||||
padding: 1.4rem;
|
||||
}
|
||||
|
||||
.locked-card {
|
||||
max-width: 42rem;
|
||||
padding: 1.35rem;
|
||||
border: 1px solid rgba(34, 54, 45, 0.1);
|
||||
border-radius: 1.35rem;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
box-shadow: 0 18px 40px rgba(15, 23, 17, 0.08);
|
||||
}
|
||||
|
||||
.locked-card h2,
|
||||
.locked-card p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.locked-card h2 {
|
||||
margin-top: 0.35rem;
|
||||
font-size: clamp(1.8rem, 3vw, 2.3rem);
|
||||
}
|
||||
|
||||
.locked-card p:last-of-type {
|
||||
margin-top: 0.45rem;
|
||||
color: #5d7166;
|
||||
}
|
||||
|
||||
.locked-card a {
|
||||
display: inline-flex;
|
||||
margin-top: 1rem;
|
||||
padding: 0.82rem 0.95rem;
|
||||
border-radius: 0.9rem;
|
||||
background: #203028;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.admin-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid rgba(34, 54, 45, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.admin-topbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user