App Layout

Description

A standard layout with a header and sidebar. The App Layout component provides two variants - a container variant that centers the content with padding, and a full variant that spans the entire width of the viewport.

This documentation site is currently using the container variant. Click here to see the full width variant.

Features

Collapsible Sidebar

The App Layout includes a collapsible sidebar that allows users to toggle its visibility. This feature helps to maximize the available screen space and provides a cleaner interface when the sidebar is not needed.

Mobile Responsive Navigation

On mobile devices, the sidebar transforms into a dropdown menu to ensure a seamless user experience. This mobile responsive navigation ensures that all functionalities are accessible even on smaller screens, maintaining usability and accessibility.

Installation

Add component:

Usage

Code

components/ui/app-layout.tsx