Home
nejaa badr
sidebar

sidebar

This sidebar implementation includes:

1. Responsive design that works on both desktop and mobile
2. Indigo-800 and Blue-900 color scheme for the background
3. Dark mode support
4. Beautiful animations and effects:

1. Slide-in animation when opening the sidebar
2. Fade-in animation for menu items with staggered delays
3. Hover effects on menu items with underline animation
4. Smooth color transitions

5. SVG icons for menu items
6. User profile section at the bottom of the sidebar
7. Close button for easy dismissal on mobile
8. Main content area with a toggle button for the sidebar
9. Accessibility considerations (proper heading structure, color contrast, focus styles)

Key features:

- The background uses a gradient from Indigo-800 to Blue-900
- The sidebar has a white background in light mode and dark gray in dark mode
- Text colors are adjusted for readability in both light and dark modes
- Menu items have hover effects with background color changes and underline animations
- Icons change color on hover
- The sidebar slides in from the left with a smooth animation
- Menu items fade in with a staggered delay for a smooth entrance
- Dark mode is automatically applied based on system preferences
- The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it

This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

This tailwind example is contributed by nejaa badr, on 01-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are drawer,Admin Dashboard, User dashboard

Sidebar Dashboard

Author nejaa badr

2.7k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Sidebar</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }
        .animate-slide-in {
            animation: slideIn 0.5s ease-out forwards;
        }
        .menu-item-hover {
            position: relative;
            overflow: hidden;
        }
        .menu-item-hover::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: currentColor;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease-out;
        }
        .menu-item-hover:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }
    </style>
</head>
<body class="bg-gradient-to-r from-indigo-800 to-blue-900 min-h-screen flex">
    <aside id="sidebar" class="bg-white dark:bg-gray-800 w-64 min-h-screen flex flex-col transition-all duration-300 ease-in-out transform -translate-x-full">
        <div class="p-4 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
            <h1 class="text-2xl font-bold text-indigo-800 dark:text-white">Dashboard</h1>
            <button id="closeSidebar" class="text-gray-500 hover:text-indigo-800 dark:text-gray-400 dark:hover:text-white focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <nav class="flex-1 overflow-y-auto">
            <ul class="p-4 space-y-2">
                <li class="animate-fade-in" style="animation-delay: 0.1s;">
                    <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-indigo-100 dark:hover:bg-indigo-900 transition-colors duration-300 menu-item-hover">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                        </svg>
                        Home
                    </a>
                </li>
                <li class="animate-fade-in" style="animation-delay: 0.2s;">
                    <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-indigo-100 dark:hover:bg-indigo-900 transition-colors duration-300 menu-item-hover">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                        </svg>
                        Analytics
                    </a>
                </li>
                <li class="animate-fade-in" style="animation-delay: 0.3s;">
                    <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-indigo-100 dark:hover:bg-indigo-900 transition-colors duration-300 menu-item-hover">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                        Messages
                    </a>
                </li>
                <li class="animate-fade-in" style="animation-delay: 0.4s;">
                    <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-indigo-100 dark:hover:bg-indigo-900 transition-colors duration-300 menu-item-hover">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        Settings
                    </a>
                </li>
            </ul>
        </nav>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
            <a href="#" class="flex items-center text-gray-700 dark:text-gray-200 hover:text-indigo-800 dark:hover:text-white transition-colors duration-300">
                <img src="https://i.pravatar.cc/40?img=1" alt="User avatar" class="w-8 h-8 rounded-full mr-3">
                <span class="font-medium">John Doe</span>
            </a>
        </div>
    </aside>

<main class="flex-1 p-8">
        <button id="openSidebar" class="text-white hover:text-indigo-200 focus:outline-none mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
        <h1 class="text-4xl font-bold text-white mb-4">Welcome to the Dashboard</h1>
        <p class="text-white">This is the main content area. The sidebar can be toggled using the menu button.</p>
    </main>

function openSidebar() {
            sidebar.classList.remove('-translate-x-full');
            sidebar.classList.add('animate-slide-in');
        }

function closeSidebar() {
            sidebar.classList.remove('animate-slide-in');
            sidebar.classList.add('-translate-x-full');
        }

openSidebarBtn.addEventListener('click', openSidebar);
        closeSidebarBtn.addEventListener('click', closeSidebar);

// Toggle dark mode based on system preference
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.classList.add('dark');
        }

// Add hover effect to menu items
        const menuItems = document.querySelectorAll('.menu-item-hover');
        menuItems.forEach(item => {
            item.addEventListener('mouseenter', () => {
                item.querySelector('svg').classList.add('text-indigo-800', 'dark:text-white');
            });
            item.addEventListener('mouseleave', () => {
                item.querySelector('svg').classList.remove('text-indigo-800', 'dark:text-white');
            });
        });
    </script>
</body>
</html>

Related Examples

Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

5 months ago

2.4k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

2 months ago

1.4k
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Author:
SANJAY SINGH GARIYA

2 months ago

606
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

1 year ago

7.8k
Sidebar
This HTML file includes: 1. A responsive sidebar with 3D animation effects: 1. The sidebar slides in and out smoothly. 2. Navigation items have a 3D hover effect using CSS transforms and transitions. 2. Tailwind CSS for styling: 1. Included via CDN for easy setup. 2. Used for layout, colors, and basic styling. 3. Custom CSS for animations and 3D effects: 1. Keyframe animations for sidebar open/close. 2. 3D transform effects for nav items. 4. JavaScript for interactivity: 1. Toggles the sidebar open and close. 2. Adds 3D effect to nav items on hover using mouse position. 3. Closes the sidebar when clicking outside. 5. Accessibility features: 1. ARIA label for the toggle button. 2. Keyboard navigation support (Enter/Space to toggle sidebar). 3. Focus trapping within the sidebar when open. 6. Responsive design: 1. The sidebar is full-height and toggleable, suitable for both desktop and mobile views. This implementation provides a visually appealing sidebar with 3D animations and effects, while maintaining accessibility and responsiveness. It uses HTML for structure, Tailwind CSS for styling, and vanilla JavaScript for interactivity, as requested.

Author:
nejaa badr

5 months ago

1.2k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

1 year ago

24.3k
dashboard layout

Author:
AKASH GANDHAR

1 month ago

209
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'

Author:
Hielke Brandsma

5 months ago

2k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

2 months ago

858
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

2 months ago

469
quora/reddit
reddit / quora have some kind of same template. looksalikes. brothas

Author:
Katherine Glenn

4 months ago

1.1k
Responsive Dashboard
1. Background Colors: 1. Main background: `bg-indigo-50` 2. Welcome card: `bg-indigo-100` with `border-indigo-200` 3. Inbox card: `bg-blue-100` with `border-blue-200` 4. Overlay: `bg-indigo-900/50` 2. Text Colors: 1. Header text: `text-indigo-800` 2. Logo: `text-blue-900` and `text-indigo-800` 3. Menu items hover: `hover:text-indigo-800` 4. Card headings: `text-blue-900` 3. Button/Badge Colors: 1. Welcome badge: `bg-indigo-800` 2. Inbox button: `bg-blue-800` with `hover:bg-blue-900` 3. Stats card titles: `text-indigo-800` 4. Maintained all functionality: 1. Responsive design 2. Animations and transitions 3. Mobile menu 4. Hover effects 5. Notification animation The color scheme now uses a mix of Indigo-800 and Blue-900 while maintaining visual hierarchy and accessibility. The colors create a professional and cohesive look across all components.

Author:
nejaa badr

5 months ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components