Layouts

Structures de mise en page utilisées dans Wagoo.

Sidebar Layout

Structure commune pour les dashboards avec navigation à gauche.


import { SidebarProvider, Sidebar, SidebarContent, SidebarInset } from "@/components/ui/sidebar";
import { Navbar } from "@/components/layout/navbar";
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          {/* Navigation items */}
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <Navbar />
        <main className="p-6">
          {children}
        </main>
      </SidebarInset>
    </SidebarProvider>
  );
}

Main Container

Largeur maximale avec padding.


<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* Contenu */}
</div>

Header

Barre d’en-tête avec navigation et user menu.


export default function Header() {
  return (
    <header className="border-b bg-white sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <Logo />
          <Nav />
          <UserMenu />
        </div>
      </div>
    </header>
  );
}

Footer

Pied de page avec liens.


export default function Footer() {
  return (
    <footer className="bg-gray-900 text-white py-12 mt-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-4 gap-8">
          <div>{/* Column 1 */}</div>
          <div>{/* Column 2 */}</div>
          <div>{/* Column 3 */}</div>
          <div>{/* Column 4 */}</div>
        </div>
        <div className="border-t border-gray-800 mt-8 pt-8 flex justify-between">
          <p>&copy; 2024 Wagoo. All rights reserved.</p>
          <div className="flex gap-4">{/* Links */}</div>
        </div>
      </div>
    </footer>
  );
}

Responsive Grid

Grid qui s’adapte à la taille de l’écran.


<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* Items */}
</div>

Breakpoints :

sm : 640px
md : 768px
lg : 1024px
xl : 1280px
2xl : 1536px

Page Layout

Structure pour une page complète.


export default function Page() {
  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <main className="flex-1">
        <div className="max-w-7xl mx-auto px-4 py-12">
          {/* Page content */}
        </div>
      </main>
      <Footer />
    </div>
  );
}

Breadcrumbs

Navigation pour les pages imbriquées.


import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
 
export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="/projects">Projects</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>Project Detail</BreadcrumbItem>
    </Breadcrumb>
  );
}

Mobile Responsive

Astuces pour le responsive:


{/* Hidden on mobile */}
<div className="hidden md:block">
  {/* Desktop only */}
</div>
 
{/* Visible on mobile */}
<div className="md:hidden">
  {/* Mobile only */}
</div>
 
{/* Responsive padding */}
<div className="p-4 md:p-6 lg:p-8">
  {/* Increases padding on larger screens */}
</div>
 
{/* Responsive text */}
<h1 className="text-2xl md:text-3xl lg:text-4xl">
  Responsive Heading
</h1>

Grid Systems

2-Column Layout


<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  <div>{/* Left column */}</div>
  <div>{/* Right column */}</div>
</div>

3-Column Layout


<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* Items */}
</div>

Custom Ratios


{/* 60/40 split */}
<div className="grid grid-cols-3 gap-6">
  <div className="col-span-2">{/* 60% */}</div>
  <div>{/* 40% */}</div>
</div>

Voir aussi

Voir Composants UI pour les composants disponibles.