feat: add layout components (Navbar, Footer, PageContainer, AppShell)
- Navbar: responsive nav with ShieldAI logo, nav links, auth buttons, mobile hamburger menu, theme toggle, scroll-aware glass effect - Footer: multi-column responsive layout with product/company/resources/ legal links, social icons, copyright bar - PageContainer: centered wrapper with max-w-7xl and responsive padding - AppShell: root layout composing Navbar + main + Footer with dot-grid background and MetaProvider - useAuth stub hook for future auth integration (task 23) - Wire AppShell into app.tsx as Router root - Unit tests for PageContainer and useAuth
This commit is contained in:
245
web/src/components/layout/Navbar.tsx
Normal file
245
web/src/components/layout/Navbar.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
import { createSignal, onMount, onCleanup, Show, Suspense } from "solid-js";
|
||||
import { A } from "@solidjs/router";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Button } from "~/components/ui";
|
||||
import { useTheme } from "~/lib/theme";
|
||||
import { useAuth } from "./useAuth";
|
||||
|
||||
function ShieldLogo() {
|
||||
return (
|
||||
<svg
|
||||
width="28"
|
||||
height="32"
|
||||
viewBox="0 0 28 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="shield-grad"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="28"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="var(--color-brand-primary)" />
|
||||
<stop offset="1" stop-color="var(--color-brand-accent)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M14 0L26 6V16C26 24 14 32 14 32S2 24 2 16V6L14 0Z"
|
||||
fill="url(#shield-grad)"
|
||||
/>
|
||||
<path
|
||||
d="M10 16L13 19L19 13"
|
||||
stroke="white"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ThemeToggle() {
|
||||
const { toggle, resolved } = useTheme();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Toggle theme"
|
||||
class="p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
|
||||
onClick={toggle}
|
||||
>
|
||||
<Show
|
||||
when={resolved() === "dark"}
|
||||
fallback={
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<line x1="12" y1="1" x2="12" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="23" />
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||
<line x1="1" y1="12" x2="3" y2="12" />
|
||||
<line x1="21" y1="12" x2="23" y2="12" />
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</svg>
|
||||
}
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
|
||||
</svg>
|
||||
</Show>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const navLinks = [
|
||||
{ label: "Features", href: "/features" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
];
|
||||
|
||||
export default function Navbar() {
|
||||
const [mobileOpen, setMobileOpen] = createSignal(false);
|
||||
const [scrolled, setScrolled] = createSignal(false);
|
||||
const auth = useAuth();
|
||||
|
||||
onMount(() => {
|
||||
const onScroll = () => {
|
||||
setScrolled(window.scrollY > 8);
|
||||
};
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
onCleanup(() => window.removeEventListener("scroll", onScroll));
|
||||
});
|
||||
|
||||
return (
|
||||
<nav
|
||||
class={cn(
|
||||
"fixed top-0 left-0 right-0 z-50 h-16 transition-all duration-300",
|
||||
scrolled()
|
||||
? "glass border-b border-[var(--color-border)] shadow-sm"
|
||||
: "bg-transparent",
|
||||
)}
|
||||
>
|
||||
<div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<A href="/" class="flex items-center gap-2">
|
||||
<ShieldLogo />
|
||||
<span class="text-lg font-bold text-[var(--color-text-primary)]">
|
||||
ShieldAI
|
||||
</span>
|
||||
</A>
|
||||
|
||||
<div class="hidden md:flex items-center gap-6">
|
||||
{navLinks.map(link => (
|
||||
<A
|
||||
href={link.href}
|
||||
class="text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</A>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<ThemeToggle />
|
||||
<Show
|
||||
when={auth.isAuthenticated}
|
||||
fallback={
|
||||
<>
|
||||
<Button variant="secondary" size="sm">
|
||||
<A href="/signin">Sign In</A>
|
||||
</Button>
|
||||
<Button variant="primary" size="sm">
|
||||
<A href="/signup">Get Started</A>
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Button variant="secondary" size="sm">
|
||||
<A href="/dashboard">Dashboard</A>
|
||||
</Button>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Toggle menu"
|
||||
class="p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
|
||||
onClick={() => setMobileOpen(v => !v)}
|
||||
>
|
||||
<Show
|
||||
when={mobileOpen()}
|
||||
fallback={
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
>
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</Show>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={mobileOpen()}>
|
||||
<div class="md:hidden glass border-t border-[var(--color-border)]">
|
||||
<div class="px-4 py-4 space-y-1">
|
||||
{navLinks.map(link => (
|
||||
<A
|
||||
href={link.href}
|
||||
class="block px-3 py-2 rounded-lg text-base font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</A>
|
||||
))}
|
||||
<div class="pt-3 flex flex-col gap-2">
|
||||
<Show
|
||||
when={auth.isAuthenticated}
|
||||
fallback={
|
||||
<>
|
||||
<Button variant="secondary" class="w-full">
|
||||
<A href="/signin">Sign In</A>
|
||||
</Button>
|
||||
<Button variant="primary" class="w-full">
|
||||
<A href="/signup">Get Started</A>
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Button variant="secondary" class="w-full">
|
||||
<A href="/dashboard">Dashboard</A>
|
||||
</Button>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user