侧边栏导航组件 - Memphis Muted
一个复杂的响应式侧边栏导航组件，其灵感来自 Memphis 设计，具有柔和的配色方案，适用于文档和 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>