App Layout

TailAdmin utilizes a robust, responsive layout system built with Flexbox and Tailwind CSS. It is designed to handle complex dashboard interfaces while adapting seamlessly from large desktop monitors to mobile screens.

The Layout Wrapper

The application is wrapped in a main container that manages the relationship between the Sidebar and the Main Content Area.

<div className="flex h-screen overflow-hidden">
 
  {/* Sidebar Component */}
  <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
 
  {/* Content Area Wrapper */}
  <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
 
    {/* Header Component */}
    <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
 
    {/* Main Page Content */}
    <main>
      <div className="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
        {children}
      </div>
    </main>
 
  </div>
</div>

Key Structural Components

Component	Role	CSS Behavior
Wrapper	Flex container holding sidebar & content.	`flex h-screen overflow-hidden` - Ensures the app takes full viewport height and prevents body scroll.
Sidebar	Navigation menu.	`fixed` on mobile / `static` on desktop. Uses `translate-x` for smooth toggling animations.
Header	Top navigation & actions.	`sticky top-0 z-999` - Stays visible while scrolling content.
Main	Dynamic page content.	`flex-1` - Expands to fill remaining width. `overflow-y-auto` handles internal scrolling.

Responsive Behavior

TailAdmin uses a mobile-first approach for its layout logic.

Desktop (`lg:`)

On screens larger than 1024px:

The Sidebar is static (lg:static) and always visible.
The Main Content sits next to the sidebar, taking up the remaining space.

Mobile & Tablet

On smaller screens:

The Sidebar becomes absolute or fixed and is hidden by default (-translate-x-full).
A Hamburger Menu in the Header toggles the sidebarOpen state.
When open, the sidebar slides in (translate-x-0) over the content.
An overlay functionality (optional or implicit) is often used to close the sidebar when clicking outside.

Customizing the Layout

Changing Sidebar Width

Navigate to your specific Sidebar component file (e.g., src/partials/Sidebar or resources/views/components/sidebar.blade.php) and adjust the width classes (e.g., w-64 to w-72).

Adjusting Content Padding

The main content wrapper uses max-w-screen-2xl to constrain widely stretched content on ultra-wide monitors. You can remove this class if you prefer a 100% fluid width.

<!-- Fluid Width Example -->
<div className="mx-auto w-full p-4 ...">

Laravel HTML