margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
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-100 dark:bg-surface-900 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-2 md:py-3">
22 <div className="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">
23 {children}
24 </div>
25 </main>
26
27 <RightSidebar />
28 </div>
29 </div>
30
31 <MobileNav />
32 </div>
33 );
34}
35
36export function LandingLayout({ children }: AppLayoutProps) {
37 return (
38 <div className="min-h-screen bg-white dark:bg-surface-950">{children}</div>
39 );
40}