사이드바 구성 요소

전자상거래 애플리케이션용으로 설계된 반응형 사이드바 구성 요소로, 머티리얼 디자인 요소와 파스텔 색상 구성표가 있으며 다크 모드를 지원합니다.

미리 보기

HTML 코드

<aside class="bg-white dark:bg-gray-800 h-full w-64 p-5 shadow-lg  transition-transform duration-300 transform lg:translate-x-0 lg:fixed lg:left-0 lg:top-0 lg:h-full">
    <div class="flex items-center mb-5">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <h2 class="ml-3 text-gray-800 dark:text-white font-semibold">User Name</h2>
    </div>
    <nav>
        <ul>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Home</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Shop</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Orders</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Wishlist</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Profile</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Settings</a>
            </li>
            <li>
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Logout</a>
            </li>
        </ul>
    </nav>
    <div class="mt-5">
        <h3 class="text-gray-600 dark:text-gray-400 font-semibold">Featured Products</h3>
        <div class="mt-3">
            <img class="w-full h-24 object-cover rounded-lg shadow-md" src="https://picsum.photos/200/100?random=1" alt="Product 1">
            <img class="w-full h-24 object-cover rounded-lg shadow-md mt-2" src="https://picsum.photos/200/100?random=2" alt="Product 2">
        </div>
    </div>
</aside>

사이드바 구성 요소

미리 보기

HTML 코드

관련 구성 요소

3D_Sidebar_Documentation_Wiki

스큐어모피즘 사이드바

Neon_Glow_Grayscale_Sports_Sidebar