Opciones de Diseño del Panel de Control

Docs

Elige entre dos opciones diferentes de diseño para tu panel de control.

Explora las diferentes opciones de diseño disponibles para personalizar tu panel de control. Tienes la opción de elegir entre dos diseños para el panel de control.

Barra Lateral y Contenido Principal Centrados

En este diseño, tanto la barra lateral como el contenido principal están centrados en medio de la página, como el panel de control de Stripe.

<MaxWidthWrapper className="max-w-[1650px] px-0">
  <div className="relative flex min-h-screen w-full">
    <DashboardSidebar links={filteredLinks} />
 
    <div className="flex flex-1 flex-col">
      <header className="bg-background sticky top-0 z-50 flex h-14 items-center gap-3 px-4 lg:h-[60px] xl:px-10">
        <MobileSheetSidebar links={filteredLinks} />
 
        <div className="w-full flex-1">
          <SearchCommand links={filteredLinks} />
        </div>
 
        <ModeToggle />
        <UserAccountNav />
      </header>
 
      <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 xl:px-10">
        {children}
      </main>
    </div>
  </div>
</MaxWidthWrapper>

Barra Lateral Fija con Contenido Principal Centrado

En este diseño, la barra lateral está fija en el lado izquierdo de la ventana, mientras que solo el contenido principal está centrado en la página. Esto proporciona un aspecto más tradicional. Este es el diseño predeterminado.

<div className="relative flex min-h-screen w-full">
  <DashboardSidebar links={filteredLinks} />
 
  <div className="flex flex-1 flex-col">
    <header className="bg-background sticky top-0 z-50 flex h-14 px-4 lg:h-[60px] xl:px-8">
      <MaxWidthWrapper className="flex max-w-7xl items-center gap-x-3 px-0">
        <MobileSheetSidebar links={filteredLinks} />
 
        <div className="w-full flex-1">
          <SearchCommand links={filteredLinks} />
        </div>
 
        <ModeToggle />
        <UserAccountNav />
      </MaxWidthWrapper>
    </header>
 
    <main className="flex-1 p-4 xl:px-8">
      <MaxWidthWrapper className="flex h-full max-w-7xl flex-col gap-4 px-0 lg:gap-6">
        {children}
      </MaxWidthWrapper>
    </main>
  </div>
</div>

Siéntete libre de elegir el diseño que mejor se adapte a tus preferencias de diseño y objetivos de experiencia de usuario.

Correo electrónico Archivos Markdown