サイドバーコンポーネント
Tailwind CSSを使用したレスポンシブサイドバーコンポーネントで、マテリアルデザインの原則とダークテーマのサポートを備えています。ロゴとタイトルを含むヘッダーと、リンクを含むナビゲーション メニューが含まれます。
HTMLコード
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="sidebar w-64 bg-white dark:bg-gray-800 shadow-md">
<div class="sidebar-header flex items-center justify-center h-16 border-b dark:border-gray-700">
<img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white ml-3">My App</h2>
</div>
<div class="sidebar-nav mt-4">
<ul>
<li>
<a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
<svg class="w-5 h-5 mr-3" 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="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
<svg class="w-5 h-5 mr-3" 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 4v16m8-8H4"></path></svg>
Settings
</a>
</li>
<li>
<a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
<svg class="w-5 h-5 mr-3" 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>
Profile
</a>
</li>
</ul>
</div>
</div>
<!-- Page Content (Placeholder) -->
<div class="flex-1 p-6">
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
<p class="mt-4 text-gray-700 dark:text-gray-300">This is where your main page content goes.</p>
</div>
</div>関連コンポーネント
レトロなサイドバーコンポーネント
作品や製品を展示するためのレトロ/ビンテージデザインのレスポンシブサイドバーコンポーネントで、グレースケールの配色とTailwind CSSクラスを利用し、ダークモードをサポートします。
シンプルで活気に満ちたブログサイドバー
Tailwind CSSを使用して鮮やかな色とマテリアルのような感触でデザインされた、ブログコンテンツ用のシンプルでレスポンシブなサイドバーコンポーネント。ナビゲーションリンクとユーザープロファイルセクションが含まれています。Tailwind の dark: プレフィックスを使用したダーク モードをサポートします。大きな画面では固定され、小さな画面では非表示になります。