소셜 미디어 내비게이션
포레스트 그린 팔레트가 있는 깔끔하고 미니멀한 소셜 미디어 탐색 구성 요소로, 반응형 레이아웃과 다크 모드를 위해 설계되었습니다. 기본 탐색, 사용자 프로필 및 검색 기능을 제공합니다.
HTML 코드
<nav class="bg-emerald-50 dark:bg-gray-900 shadow-sm dark:shadow-lg transition-colors duration-300 md:sticky md:top-0 md:z-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3 flex flex-col md:flex-row items-center justify-between">
<!-- Logo/Brand Name -->
<div class="flex items-center justify-between w-full md:w-auto mb-3 md:mb-0">
<a href="#" class="text-xl md:text-2xl font-bold text-emerald-800 dark:text-emerald-300 tracking-tight flex items-center group">
<svg class="h-7 w-7 md:h-8 md:w-8 mr-2 text-emerald-600 dark:text-emerald-400 group-hover:rotate-12 transition-transform duration-300" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.181-.018-.359-.05-.532a2.997 2.997 0 01-2.976-2.976 2.997 2.997 0 01-2.976 2.976 2.997 2.997 0 01-2.976-2.976A2.997 2.997 0 01-2.976 2.976 2.997 2.997 0 01-2.976 2.976-.05-.532C2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976Z" style="transform: scaleX(-1) translate(24px, 0)"></path>
</svg>
Connectify
</a>
<!-- Mobile Menu Button (Hamburger) -->
<button class="md:hidden flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md" aria-label="Toggle navigation menu">
<svg class="h-6 w-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 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<!-- Main Navigation & Search (Hidden on Mobile by default, can be toggled via JS) -->
<div class="hidden md:flex flex-col md:flex-row items-center flex-grow w-full md:w-auto" id="main-nav-menu">
<ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 lg:space-x-12 mr-0 md:mr-8 lg:mr-12 text-center md:text-left w-full md:w-auto">
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
<svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
Home
</a>
</li>
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
<svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Messages
</a>
</li>
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
<svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
Notifications
<span class="ml-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-red-500 text-white dark:bg-red-600">3</span>
</a>
</li>
</ul>
<div class="relative w-full md:w-64 lg:w-80 mt-4 md:mt-0">
<input type="text" placeholder="Search Connectify..." class="w-full py-2 pl-10 pr-4 rounded-full bg-emerald-100 dark:bg-gray-800 text-emerald-800 dark:text-emerald-100 placeholder-emerald-500 dark:placeholder-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 text-sm md:text-base transition-all duration-200 border border-emerald-200 dark:border-gray-700">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-emerald-500 dark:text-emerald-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>
</div>
<!-- User Profile & Settings -->
<div class="flex items-center space-x-4 mt-3 md:mt-0 ml-0 md:ml-8 lg:ml-12">
<button aria-label="User profile settings" class="hidden sm:block">
<img class="h-9 w-9 md:h-10 md:w-10 rounded-full object-cover ring-2 ring-emerald-300 dark:ring-emerald-600 hover:ring-emerald-500 dark:hover:ring-emerald-400 transition-all duration-200" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
</button>
<button class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md p-1 md:p-2" aria-label="More options">
<svg class="h-6 w-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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
</button>
</div>
</div>
</nav>관련 구성 요소
Navigation Components 컴포넌트
대시보드를 위한 복잡하고 반응이 빠른 탐색 구성 요소로, 마이크로 인터랙션과 유사한 색 구성표를 특징으로 하며 다크 모드를 지원합니다. 스타일링을 위해 Tailwind CSS를 활용하고 JavaScript에 의존하지 않고 대화형 요소를 포함합니다.
Navigation Components 컴포넌트
Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 탐색 구성 요소입니다. 여기에는 로고, 탐색 링크 및 클릭 유도문안 버튼이 포함됩니다.