サイドバー | Code Components Hub

サイドバーコンポーネント

ダッシュボード用の複雑で応答性の高いGlassmorphismスタイルのサイドバーコンポーネントで、アースカラーとダークモードのサポートを備えています。

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-4 shadow-lg md:flex">
    <div class="text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-6">Dashboard</div>
    <nav class="flex-1 space-y-2">
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l-7 7m7-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1v-3m-6 0h6"></path></svg>
        <span>Home</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h3m-3 0h-3"></path></svg>
        <span>Analytics</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M12 20.354a4 4 0 110-5.292M12 14.354a4 4 0 110 5.292M12 8.354a4 4 0 110 5.292"></path></svg>
        <span>Reports</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
        <span>Users</span>
      </a>
    </nav>
    <div class="mt-6 flex items-center space-x-3 p-3 rounded-lg bg-white/40 dark:bg-stone-700/40">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
      <div>
        <p class="font-medium text-stone-800 dark:text-stone-100">John Doe</p>
        <a href="#" class="text-sm text-stone-600 dark:text-stone-300 hover:underline">View Profile</a>
      </div>
    </div>
  </div>

  <!-- Main Content (for demonstration purposes) -->
  <div class="flex-1 p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-6">Dashboard Overview</h1>
    <p class="text-stone-700 dark:text-stone-200">This is the main content area. The sidebar is a Glassmorphism-styled component with earth tones and dark mode support.</p>
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 1</h2>
        <p class="text-stone-700 dark:text-stone-200">Some content for card 1. This demonstrates a typical content area next to the sidebar.</p>
      </div>
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 2</h2>
        <p class="text-stone-700 dark:text-stone-200">More content for card 2. The design uses natural colors and provides a rich interface.</p>
      </div>
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 3</h2>
        <p class="text-stone-700 dark:text-stone-200">Final card content. The responsive design adapts to different screen sizes.</p>
      </div>
    </div>
  </div>
</div>

サイドバーコンポーネント

ダークモードをサポートする、eコマース用のレスポンシブでミニマリストのサイドバーコンポーネント。商品カテゴリとショッピングカートのアイコンが付いたシンプルなレイアウトが特徴です。

プレビューを開く

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 shadow-md p-4">
    <div class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Shop</div>
    <nav>
      <ul class="space-y-4">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Categories</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">New Arrivals</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Best Sellers</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Sale</a></li>
      </ul>
    </nav>
    <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        Shopping Cart
      </a>
    </div>
  </div>

  <!-- Main content area (for context) -->
  <div class="flex-1 p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Welcome to our Shop</h1>
    <p class="text-gray-700 dark:text-gray-300">Select a category from the sidebar to start shopping.</p>
  </div>
</div>

サイドバーコンポーネント

ポートフォリオ用のレスポンシブサイドバーコンポーネントで、ダークテーマの3Dデザインスタイルで、作品や製品の展示に適しており、いくつかのインタラクティブな要素と類似の配色を備えています。

プレビューを開く

                <aside class="bg-gray-800 dark:bg-gray-900 w-64 h-screen shadow-lg transform transition-transform duration-300 relative hover:translate-x-1 hover:shadow-2xl">
    <div class="flex items-center justify-center h-16 border-b border-gray-700 dark:border-gray-600">
        <h1 class="text-white text-lg font-bold">My Portfolio</h1>
    </div>
    <nav class="flex flex-col p-4">
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Home</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>About</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Projects</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Contact</span>
        </a>
    </nav>
    <footer class="absolute bottom-0 left-0 w-full border-t border-gray-700 dark:border-gray-600 p-4">
        <p class="text-gray-500 text-sm text-center">© 2023 My Portfolio</p>
    </footer>
</aside>

サイドバーコンポーネント

魅力的なマイクロインタラクションと補色の配色でポートフォリオアイテムを紹介するためのレスポンシブサイドバーコンポーネントで、ダークモードをサポートします。

プレビューを開く

                <aside class="w-64 h-full bg-white dark:bg-gray-800 shadow-lg transition-transform duration-300 ease-in-out transform hover:scale-105">  
    <div class="p-4">    
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Portfolio</h2>    
        <div class="mt-4">            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Projects</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About Me</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a>        
        </div>  
    </div>  
    <div class="flex flex-col items-center px-4 py-4">    
        <img src="https://picsum.photos/80/80" alt="Portfolio Avatar" class="rounded-full border-2 border-blue-500 dark:border-blue-400 mb-2" />    
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>    
        <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>  
    </div>  
</aside>

シンプルで活気に満ちたブログサイドバー

Tailwind CSSを使用して鮮やかな色とマテリアルのような感触でデザインされた、ブログコンテンツ用のシンプルでレスポンシブなサイドバーコンポーネント。ナビゲーションリンクとユーザープロファイルセクションが含まれています。Tailwind の dark: プレフィックスを使用したダークモードをサポートします。大きな画面では固定され、小さな画面では非表示になります。

プレビューを開く

                <!-- Sidebar Component -->
<div class="hidden lg:block w-64 bg-purple-600 text-white dark:bg-purple-800 dark:text-yellow-200 h-screen fixed top-0 left-0 p-5 space-y-6">
    <!-- Sidebar Header -->
    <div class="flex items-center space-x-3">
        <svg class="w-8 h-8 text-yellow-300 dark:text-yellow-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9m2 10V7a2 2 0 00-2-2h-1C9 4 7 2 5 2c-2 0-3 1.5-3 3v15a1 1 0 001 1h16z"></path></svg>
        <span class="text-2xl font-semibold text-yellow-300 dark:text-yellow-100">Blog Name</span>
    </div>

    <!-- Navigation -->
    <nav class="space-y-2">
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Home
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Categories
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Popular
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            About
        </a>
    </nav>

    <!-- User Profile (Optional) - Position at bottom -->
    <div class="absolute bottom-5 left-5 right-5">
         <div class="flex items-center space-x-3 p-3 bg-purple-700 dark:bg-purple-900 rounded">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="User Avatar">
            <div class="flex flex-col">
                <span class="font-semibold text-yellow-200 dark:text-yellow-100 text-sm">Jane Doe</span>
                <span class="text-xs text-purple-200 dark:text-purple-300">View Profile</span>
            </div>
        </div>
    </div>
</div>

サイドバーコンポーネント

ブルータリズムデザイン、単色の配色、ダークモードのサポートを備えた、シンプルでレスポンシブなサイドバーコンポーネント。

プレビューを開く

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-white dark:bg-gray-950 dark:text-gray-200 flex flex-col">
    <div class="p-6 text-2xl font-bold border-b border-gray-700 dark:border-gray-800">BrutalNav</div>
    <nav class="flex-grow">
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Home</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">About</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Services</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
  </div>

  <!-- Content Area (placeholder) -->
  <div class="flex-grow p-10 text-gray-800 dark:text-gray-200">
    <h1 class="text-3xl font-bold mb-6">Main Content</h1>
    <p>This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

Neumorphism サイドバーコンポーネント

Neumorphismデザイン、アースカラーの配色、シンプルな複雑さを備えたレスポンシブサイドバーコンポーネントで、ブログやコンテンツの消費に適しています。ダークモードのサポートが含まれています。

プレビューを開く

                <div class="flex h-screen bg-gray-200 dark:bg-gray-800">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-300 dark:bg-gray-700 p-6 space-y-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <!-- Logo or Blog Title -->
    <div class="text-2xl font-bold text-gray-800 dark:text-white">My Blog</div>
    
    <!-- Navigation -->
    <nav>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Home</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">About</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Contact</a>
    </nav>

    <!-- Categories or other links -->
    <div class="space-y-2">
      <div class="text-sm font-semibold text-gray-600 dark:text-gray-300">Categories</div>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Technology</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Travel</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Food</a>
    </div>
  </div>

  <!-- Main Content Area (optional - just for demonstration) -->
  <div class="flex-1 p-6 overflow-y-auto">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to the Blog</h1>
    <p class="text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

<!-- Add custom CSS for Neumorphism effect -- In a separate CSS file or style tag -->
<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7acb1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #323232;
}
.shadow-neumorphic-inset-light {
  box-shadow: inset 5px 5px 10px #a7acb1, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #323232;
}
</style>

レトロなサイドバーコンポーネント

作品や製品を展示するためのレトロ/ビンテージデザインのレスポンシブサイドバーコンポーネントで、グレースケールの配色とTailwind CSSクラスを利用し、ダークモードをサポートします。

プレビューを開く

                <div class="flex flex-col h-screen bg-white dark:bg-gray-800">
    <div class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </div>
    <div class="flex-grow p-4">
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Home</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">About</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Projects</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Contact</span>
            </a>
        </div>
    </div>
    <div class="p-4 text-center bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-600 dark:text-gray-300">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</div>

サイドバーコンポーネント

マテリアルデザイン要素とパステルカラースキームを備えたeコマースアプリケーション向けに設計されたレスポンシブサイドバーコンポーネントで、ダークモードがサポートされています。

プレビューを開く

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

サイドバーコンポーネント

補完的な配色を持つ Glassmorphism スタイルのサイドバーコンポーネントで、中程度の複雑さのポートフォリオ Web サイト向けに設計されています。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。

プレビューを開く

                <div class="flex h-screen bg-gray-200 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out">
    <!-- Glassmorphism Effect -->
    <div class="absolute inset-0 bg-blue-500 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded"></div>
    
    <!-- Sidebar Content -->
    <div class="relative z-10">
      <div class="flex items-center space-x-2">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      </div>
      <nav class="mt-8">
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H6a1 1 0 01-1-1v-5a1 1 0 011-1h2"></path></svg>
          <span>Home</span>
        </a>
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7-7h.01"></path></svg>
          <span>Projects</span>
        </a>
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h10a2 2 0 002-2V8a2 2 0 00-2-2h-5m0 0l2-2m-2 2l-2-2m7-3a2 2 0 11-4 0 2 2 0 014 0zM14 13h3m-3 3h3m-9-2h.01"></path></svg>
          <span>Blog</span>
        </a>
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
          <span>Contact</span>
        </a>
      </nav>
    </div>
  </div>

  <!-- Main Content -->
  <div class="flex-1 p-10">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Welcome to my Portfolio</h1>
    <!-- Add your main content here -->
  </div>
</div>