Home
nejaa badr
Sidebar

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.

This tailwind example is contributed by nejaa badr, on 01-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Sidebar

Author nejaa badr

1.1k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Animated Sidebar</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        @keyframes slideOut {
            from { transform: translateX(0); }
            to { transform: translateX(-100%); }
        }
        .sidebar-open {
            animation: slideIn 0.3s forwards;
        }
        .sidebar-closed {
            animation: slideOut 0.3s forwards;
        }
        .nav-item {
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .nav-item:hover {
            transform: translateZ(10px);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-indigo-800 text-white p-5 transform -translate-x-full transition-transform duration-300 ease-in-out z-50">
        <h2 class="text-2xl font-bold mb-5">Dashboard</h2>
        <nav>
            <ul class="space-y-3">
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Home</a></li>
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Analytics</a></li>
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Customers</a></li>
                <li><a href="#" class="nav-item block p-3 rounded hover:bg-indigo-700 transition-colors duration-200">Settings</a></li>
            </ul>
        </nav>
    </div>

<div class="p-5">
        <button id="sidebarToggle" class="bg-indigo-800 text-white p-2 rounded" aria-label="Toggle Sidebar">
            <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>
        <main class="mt-5">
            <h1 class="text-3xl font-bold mb-4">Welcome to the Dashboard</h1>
            <p>This is the main content area. Use the button above to toggle the sidebar.</p>
        </main>
    </div>

sidebarToggle.addEventListener('click', toggleSidebar);

// Close sidebar when clicking outside
        document.addEventListener('click', (event) => {
            if (isOpen && !sidebar.contains(event.target) && event.target !== sidebarToggle) {
                toggleSidebar();
            }
        });

// Add 3D effect to nav items
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('mousemove', (e) => {
                const rect = item.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                item.style.transform = `perspective(1000px) rotateX(${(y - rect.height / 2) / 10}deg) rotateY(${-(x - rect.width / 2) / 10}deg) translateZ(10px)`;
            });

item.addEventListener('mouseleave', () => {
                item.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
            });
        });

// Keyboard accessibility
        sidebarToggle.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                toggleSidebar();
            }
        });

// Trap focus within sidebar when open
        sidebar.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                const focusableElements = sidebar.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
                const firstElement = focusableElements[0];
                const lastElement = focusableElements[focusableElements.length - 1];

if (e.shiftKey && document.activeElement === firstElement) {
                    e.preventDefault();
                    lastElement.focus();
                } else if (!e.shiftKey && document.activeElement === lastElement) {
                    e.preventDefault();
                    firstElement.focus();
                }
            }
        });
    </script>
</body>
</html>

Related Examples

Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

56.2k
Basic sidebar

Author:
Rajesh Maheshwari

1 month ago

199
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

16.8k
Notification
Dev Community Notification Clone

Author:
Samuel Abera

4 months ago

1.9k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
Pardha Saradhy Madabhushi

8 months ago

1.5k
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

4 months ago

1.9k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

9 months ago

3.4k
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.

Author:
nejaa badr

5 months ago

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

Author:
Ameth Galarcio

1 month ago

725
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

23.8k
Sticky sidebar menu for big screens

Author:
Prajwal Hallale

1 year ago

12.2k
Ticket
Sirve para ticket

Author:
ANGEL EMILIANO MARQUEZ VAZQUEZ

5 months ago

918

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components