(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import React from "react";
2import { useStore } from "@nanostores/react";
3import Sidebar from "../components/navigation/Sidebar";
4import RightSidebar from "../components/navigation/RightSidebar";
5import MobileNav from "../components/navigation/MobileNav";
6import { $theme } from "../store/theme";
7
8interface AppLayoutProps {
9 children: React.ReactNode;
10}
11
12export default function AppLayout({ children }: AppLayoutProps) {
13 useStore($theme);
14
15 return (
16 <div className="min-h-screen bg-surface-50 dark:bg-surface-950 flex">
17 <Sidebar />
18
19 <div className="flex-1 min-w-0 transition-all duration-200">
20 <div className="flex w-full max-w-[1800px] mx-auto">
21 <main className="flex-1 w-full min-w-0 py-6 px-3 md:px-5 lg:px-8 pb-20 md:pb-6">
22 {children}
23 </main>
24
25 <RightSidebar />
26 </div>
27 </div>
28
29 <MobileNav />
30 </div>
31 );
32}
33
34export function LandingLayout({ children }: AppLayoutProps) {
35 return (
36 <div className="min-h-screen bg-white dark:bg-surface-950">{children}</div>
37 );
38}