Creating the Main Layout Structure
Start by setting up a flex container that holds both the sidebar and main content. This creates the base layout for your page.
Example:
<div class=”flex h-screen”>
<aside class=”w-64 bg-gray-800 text-white”>Sidebar</aside>
<main class=”flex-1 p-6″>Main Content</main>
</div>
Designing the Sidebar
Style the sidebar with background color, spacing, and typography. You can also add a logo or title at the top.
Example:
<aside class=“w-64 bg-gray-900 text-white p-4”>
<h2 class=“text-xl font-bold mb-6”>Dashboard</h2>
</aside>
Adding Navigation Links
Include menu items inside the sidebar using flex or vertical spacing. Add hover effects for better user interaction.
Example:
<nav class=”flex flex-col gap-3″>
<a href=”#” class=”hover:bg-gray-700 p-2 rounded”>Home</a>
<a href=”#” class=”hover:bg-gray-700 p-2 rounded”>Profile</a>
<a href=”#” class=”hover:bg-gray-700 p-2 rounded”>Settings</a>
</nav>
Making the Sidebar Responsive
Hide the sidebar on smaller screens and add a toggle button (hamburger menu) to show/hide it.
Example:
<button class=”md:hidden p-2″>☰</button>
<aside class=”hidden md:block w-64 bg-gray-800 text-white”>
Sidebar
</aside>
Enhancing with Fixed & Scrollable Layout
Make the sidebar fixed and allow scrolling if content overflows. This improves usability for long menus.
Example:
<aside class=“w-64 bg-gray-900 text-white p-4 fixed h-full overflow-y-auto”>
Sidebar with scroll
</aside>
<main class=“ml-64 p-6”>
Main Content Area
</main>
