(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1---
2import BaseLayout from "./BaseLayout.astro";
3import Sidebar from "../components/navigation/Sidebar";
4import RightSidebar from "../components/navigation/RightSidebar";
5import MobileNav from "../components/navigation/MobileNav";
6import type { UserProfile } from "../types";
7
8interface Props {
9 title?: string;
10 description?: string;
11 image?: string;
12 user?: UserProfile | null;
13}
14
15const { title, description, image, user = Astro.locals.user } = Astro.props;
16---
17
18<BaseLayout title={title} description={description} image={image}>
19 <div class="min-h-screen bg-surface-100 dark:bg-surface-900 flex">
20 <div transition:persist="sidebar">
21 <Sidebar
22 client:idle
23 initialUser={user}
24 currentPath={Astro.url.pathname}
25 />
26 </div>
27
28 <div class="flex-1 min-w-0 transition-all duration-200">
29 <div class="flex w-full max-w-[1800px] mx-auto">
30 <main class="flex-1 w-full min-w-0 py-2 md:py-3">
31 <div
32 class="bg-white dark:bg-surface-800 rounded-2xl min-h-[calc(100vh-16px)] md:min-h-[calc(100vh-24px)] py-6 px-4 md:px-6 lg:px-8 pb-20 md:pb-6"
33 >
34 <slot />
35 </div>
36 </main>
37
38 <div transition:persist="right-sidebar">
39 <RightSidebar client:visible />
40 </div>
41 </div>
42 </div>
43
44 <div transition:persist="mobile-nav">
45 <MobileNav
46 client:media="(max-width: 768px)"
47 initialUser={user}
48 currentPath={Astro.url.pathname}
49 />
50 </div>
51 </div>
52</BaseLayout>