Компоненты Боковая панель Компонент боковой панели

Компонент боковой панели

Компонент боковой панели, выполненный в скевоморфном стиле, обеспечивает ощущение реального мира в цифровом формате. Он поддерживает адаптивный дизайн и темную тему.

Предварительный просмотр

HTML-код

<div class="flex flex-col h-screen bg-white dark:bg-gray-800 shadow-lg rounded-lg w-64">
    <div class="flex items-center justify-center h-16 bg-gray-200 dark:bg-gray-700 rounded-t-lg">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">Sidebar</h1>
    </div>
    <div class="flex-grow overflow-y-auto p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=1" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Dashboard</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=2" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Settings</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=3" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Messages</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=4" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Logout</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Связанные компоненты

Ретро компонент боковой панели

Адаптивный компонент боковой панели с ретро/винтажным дизайном для демонстрации работ или продуктов, использующий цветовую схему в оттенках серого и классы CSS Tailwind, поддерживающий темный режим.

Открытый

Consulting_Sidebar_Dark_Candy_Complex

Сложный, отзывчивый компонент боковой панели для консалтинга/услуг с пользовательским интерфейсом темного режима с конфетными/сладкими цветовыми акцентами. Включает навигацию, профиль пользователя и быстрые ссылки.

Открытый

Компонент боковой панели

Минималистичный компонент боковой панели с адаптивным дизайном и поддержкой темной темы, использующий Tailwind CSS.

Открытый