サイドバーナビゲーションコンポーネント - Memphis Muted (ミュート)
メンフィスのデザインに触発された複雑でレスポンシブなサイドバーナビゲーションコンポーネントで、落ち着いた配色で、ドキュメントやWikiサイトに適しています。ダークモードのサポートとインタラクティブな要素が含まれています。
HTMLコード
<div class="flex h-screen bg-gray-50 dark:bg-gray-900 font-sans">
<!-- Mobile Menu Button (Hamburger) -->
<button id="mobile-sidebar-toggle" class="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-700 bg-gray-200 dark:text-gray-200 dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors duration-300 md:top-6 md:left-6 md:p-3">
<svg class="w-6 h-6" 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 12h16M4 18h16"></path>
</svg>
</button>
<!-- Sidebar -->
<aside id="sidebar" class="fixed inset-y-0 left-0 transform -translate-x-full lg:relative lg:translate-x-0 transition-transform duration-300 ease-in-out z-40 w-64 md:w-72 lg:w-80 overflow-y-auto bg-fuchsia-100 dark:bg-fuchsia-900 border-r-4 border-fuchsia-300 dark:border-fuchsia-700 shadow-xl lg:shadow-none">
<div class="p-6 md:p-8 lg:p-10 border-b-4 border-fuchsia-300 dark:border-fuchsia-700 mb-6 relative">
<h1 class="text-2xl md:text-3xl font-extrabold text-fuchsia-800 dark:text-fuchsia-100 uppercase tracking-wide relative z-10">
<span class="relative">
<span class="block absolute -bottom-1 -left-1 w-6 h-6 bg-amber-400 dark:bg-amber-600 rounded-bl-lg transform rotate-45"></span>
<span class="relative">Doc</span>
</span>
<span class="relative ml-2">
<span class="block absolute -top-1 -right-1 w-6 h-6 bg-lime-400 dark:bg-lime-600 rounded-tr-lg transform -rotate-45"></span>
<span class="relative">Hub</span>
</span>
</h1>
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-0 left-1/2 -ml-8 w-16 h-16 bg-fuchsia-400 dark:bg-fuchsia-600 opacity-20 transform -rotate-30"></div>
<div class="absolute bottom-0 right-1/4 w-10 h-10 bg-indigo-400 dark:bg-indigo-600 opacity-20 transform rotate-45"></div>
</div>
</div>
<!-- Search Bar -->
<div class="px-6 mb-6">
<div class="relative">
<input type="text" placeholder="Search documentation..." class="w-full py-3 pl-12 pr-4 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-700 border-b-4 border-lime-300 dark:border-lime-700 transition-all duration-300">
<svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</div>
<!-- Navigation Menu -->
<nav class="px-6 pb-6 space-y-4 md:space-y-6 lg:space-y-8">
<!-- Category 1 -->
<div>
<h2 class="text-xs md:text-sm font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-300 mb-4 px-3 relative">
<span class="relative z-10">Getting Started</span>
<span class="block absolute left-0 bottom-0 w-full h-1 bg-amber-200 dark:bg-amber-800 z-0 transform -skew-x-12"></span>
</h2>
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-amber-200 hover:text-amber-800 dark:hover:bg-amber-800 dark:hover:text-amber-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
<svg class="w-5 h-5 mr-3 text-amber-500 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
<span class="relative z-10">Introduction</span>
<span class="absolute inset-0 bg-gradient-to-r from-amber-100 to-amber-50 dark:from-amber-900 dark:to-amber-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-amber-200 hover:text-amber-800 dark:hover:bg-amber-800 dark:hover:text-amber-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
<svg class="w-5 h-5 mr-3 text-amber-500 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6a3 3 0 01-3-3V6zm4 6a1 1 0 110 2h3a1 1 0 110-2H7zm0-4a1 1 0 110 2h3a1 1 0 110-2H7z" clip-rule="evenodd"></path></svg>
<span class="relative z-10">Installation Guide</span>
<span class="absolute inset-0 bg-gradient-to-r from-amber-100 to-amber-50 dark:from-amber-900 dark:to-amber-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</a>
</li>
</ul>
</div>
<!-- Category 2 -->
<div>
<h2 class="text-xs md:text-sm font-semibold uppercase tracking-wider text-lime-600 dark:text-lime-300 mb-4 px-3 relative mt-6 md:mt-8">
<span class="relative z-10">Core Concepts</span>
<span class="block absolute left-0 bottom-0 w-full h-1 bg-lime-200 dark:bg-lime-800 z-0 transform -skew-x-12"></span>
</h2>
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-lime-200 hover:text-lime-800 dark:hover:bg-lime-800 dark:hover:text-lime-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
<svg class="w-5 h-5 mr-3 text-lime-500 dark:text-lime-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h.01a1 1 0 100-2H10zm3 0a1 1 0 000 2h.01a1 1 0 100-2H13zm-3 4a1 1 0 000 2h.01a1 1 0 100-2H10z" clip-rule="evenodd"></path></svg>
<span class="relative z-10">Architecture Overview</span>
<span class="absolute inset-0 bg-gradient-to-r from-lime-100 to-lime-50 dark:from-lime-900 dark:to-lime-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-lime-200 hover:text-lime-800 dark:hover:bg-lime-800 dark:hover:text-lime-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
<svg class="w-5 h-5 mr-3 text-lime-500 dark:text-lime-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 3a1 1 0 011-1h2a1 1 0 011 1v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V3z"></path></svg>
<span class="relative z-10">Data Models</span>
<span class="absolute inset-0 bg-gradient-to-r from-lime-100 to-lime-50 dark:from-lime-900 dark:to-lime-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-lime-200 hover:text-lime-800 dark:hover:bg-lime-800 dark:hover:text-lime-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
<svg class="w-5 h-5 mr-3 text-lime-500 dark:text-lime-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
<span class="relative z-10">API Endpoints</span>
<span class="absolute inset-0 bg-gradient-to-r from-lime-100 to-lime-50 dark:from-lime-900 dark:to-lime-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</a>
</li>
</ul>
</div>
<!-- Category 3 -->
<div>
<h2 class="text-xs md:text-sm font-semibold uppercase tracking-wider text-indigo-600 dark:text-indigo-300 mb-4 px-3 relative mt-6 md:mt-8">
<span class="relative z-10">Advanced Topics</span>
<span class="block absolute left-0 bottom-0 w-full h-1 bg-indigo-200 dark:bg-indigo-800 z-0 transform -skew-x-12"></span>
</h2>
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-indigo-200 hover:text-indigo-800 dark:hover:bg-indigo-800 dark:hover:text-indigo-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
<svg class="w-5 h-5 mr-3 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 00-2 0v6a1 1 0 102 0V3zM14 3a1 1 0 00-2 0v6a1 1 0 102 0V3zM17 6a1 1 0 00-2 0v6a1 1 0 102 0V6zM4 9a1 1 0 00-2 0v6a1 1 0 102 0V9z"></path></svg>
<span class="relative z-10">Performance Tuning</span>
<span class="absolute inset-0 bg-gradient-to-r from-indigo-100 to-indigo-50 dark:from-indigo-900 dark:to-indigo-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-indigo-200 hover:text-indigo-800 dark:hover:bg-indigo-800 dark:hover:text-indigo-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
<svg class="w-5 h-5 mr-3 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 01-1.44-8.834 5 5 0 018.303-7.682 4.5 4.5 0 011.453 8.834L18 18.5a1 1 0 01-1.707.707L15.243 17H5.5z" clip-rule="evenodd"></path></svg>
<span class="relative z-10">Security Best Practices</span>
<span class="absolute inset-0 bg-gradient-to-r from-indigo-100 to-indigo-50 dark:from-indigo-900 dark:to-indigo-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</a>
</li>
</ul>
</div>
</nav>
<!-- User Profile / Footer - Memphis Inspired -->
<div class="mt-auto p-6 md:p-8 border-t-4 border-fuchsia-300 dark:border-fuchsia-700 relative">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full ring-4 ring-indigo-400 dark:ring-indigo-600 transition-all duration-300 transform hover:scale-105" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar">
<div>
<p class="text-gray-800 dark:text-gray-100 font-semibold">Jane Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Editor</p>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<a href="#" class="text-fuchsia-700 dark:text-fuchsia-300 hover:text-fuchsia-900 dark:hover:text-fuchsia-100 text-sm font-medium transition-colors duration-200">
Settings
<span class="inline-block w-2 h-2 ml-1 bg-lime-400 dark:bg-lime-600 rounded-full transform rotate-45"></span>
</a>
<button class="p-2 rounded-full bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 hover:bg-amber-300 dark:hover:bg-amber-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10 0a1 1 0 00-1 1v4a1 1 0 102 0V4a1 1 0 00-1-1zM16 3a1 1 0 00-1 1v8a1 1 0 102 0V4a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="absolute -bottom-4 right-0 w-16 h-1 bg-indigo-400 dark:bg-indigo-600 transform skew-x-30 origin-right"></div>
</div>
</aside>
<!-- Main Content Area (for demonstration, not part of the component itself) -->
<main class="flex-1 p-8 lg:p-10 transition-all duration-300">
<h2 class="text-4xl font-extrabold text-fuchsia-700 dark:text-fuchsia-200 mb-6">Welcome to the Documentation</h2>
<p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
This is a placeholder for your main content. The sidebar navigation on the left provides quick access to different sections and topics.
The design incorporates a muted Memphis style with geometric shapes and bold accents.
</p>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-fuchsia-50 dark:bg-fuchsia-950 p-6 rounded-xl shadow-md border-2 border-fuchsia-200 dark:border-fuchsia-800 relative overflow-hidden">
<h3 class="text-2xl font-bold text-amber-700 dark:text-amber-300 mb-3">Guides</h3>
<p class="text-gray-700 dark:text-gray-300">Detailed instructions and tutorials to get you started and beyond.</p>
<span class="absolute -top-4 -right-4 w-12 h-12 bg-amber-300 dark:bg-amber-700 rounded-full opacity-60 transform rotate-12"></span>
</div>
<div class="bg-fuchsia-50 dark:bg-fuchsia-950 p-6 rounded-xl shadow-md border-2 border-fuchsia-200 dark:border-fuchsia-800 relative overflow-hidden">
<h3 class="text-2xl font-bold text-lime-700 dark:text-lime-300 mb-3">API Reference</h3>
<p class="text-gray-700 dark:text-gray-300">Comprehensive documentation for all available API endpoints and models.</p>
<span class="absolute -bottom-4 -left-4 w-12 h-12 bg-lime-300 dark:bg-lime-700 rounded-full opacity-60 transform -rotate-12"></span>
</div>
</div>
</main>
</div>
<script>
// Basic JavaScript for mobile sidebar toggle
document.addEventListener('DOMContentLoaded', function() {
const sidebar = document.getElementById('sidebar');
const toggleButton = document.getElementById('mobile-sidebar-toggle');
toggleButton.addEventListener('click', function() {
sidebar.classList.toggle('-translate-x-full');
});
// Close sidebar if clicking outside on mobile
document.addEventListener('click', function(event) {
if (!sidebar.contains(event.target) && !toggleButton.contains(event.target) && window.innerWidth < 1024) {
sidebar.classList.add('-translate-x-full');
}
});
// Close sidebar on resize if it's open on mobile and becomes desktop
window.addEventListener('resize', function() {
if (window.innerWidth >= 1024 && sidebar.classList.contains('-translate-x-full')) {
sidebar.classList.remove('-translate-x-full');
}
});
});
// Dark mode toggle (example - you'd likely have a dedicated button/
// This is just to demonstrate dark mode styling
/*
document.documentElement.classList.add('dark');
// Or to remove:
// document.documentElement.classList.remove('dark');
*/
</script>関連コンポーネント
Glassmorphismサイドバーナビゲーション
複雑でレスポンシブなGlassmorphismサイドバーナビゲーションは、補完的な配色、ダークモードのサポート、JavaScriptなしのダッシュボード用です。
サイドバーナビゲーションコンポーネント - 農業/農業
農業/農業のWebサイト用に設計された、複雑でミニマリストのサイドバーナビゲーションコンポーネント。ジュエルトーンの色、完全な応答性、ダークモードのサポート、および農業コンテキストのダッシュボードと管理システムに適した複数のインタラクティブ要素を備えています。
Brutalismサイドバーナビゲーション
レスポンシブサイドバーナビゲーションコンポーネント、ブルータリズムデザイン、鮮やかな配色、ブログ/コンテンツ用のシンプルなレイアウト。ダークモードのサポートが含まれています。