lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
177 lines (162 loc) • 13.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blurred Side Navigation Bar</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@2.7.0/src/lightswind.css">
<style>
.scrollbar-hide {
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class=" bg-cover bg-center " style="background-color: #ffffff;
">
<div class="flex justify-center mt-4 h-full w-full bg-white dark:bg-black">
<div id="GlassmorphismSidenav" class="w-52 h-[600px] bg-gray-500/10 backdrop-blur-md border border-gray-400 rounded-xl flex flex-col
transition-all duration-700 relative sidebar-closed dark:bg-gray-800/10 dark:border-gray-700 ">
<!-- Header -->
<div class="flex items-center justify-between px-4 py-6">
<div class="flex items-center space-x-3">
<div
class="w-8 h-8 rounded-full bg-white flex items-center justify-center bg-gray-200 dark:bg-gray-700">
<img src="https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png" alt="Profile"
class="w-full h-full rounded-full">
</div>
<div id="GlassmorphismPname" class="text-sm font-medium text-gray-900 dark:text-white">
<span class="block text-xs">Navigation Bar</span>
<p>Lightswind UI</p>
</div>
</div>
</div>
<!-- Toggle Icon (Collapsed Sidebar) -->
<button id="toggler"
class="w-8 h-8 rounded-full bg-gradient-to-r from-transparent to-white flex items-center justify-center absolute -top-4 -right-0 shadow-md dark:bg-gray-600"
onclick="GlassmorphismToggle()">
<div id="GlassmorphismTogglericon" class=" flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
</svg>
</div>
</button>
<!-- Menus -->
<div class="flex-1 flex flex-col px-4 overflow-scroll scrollbar-hide">
<p class="text-xs font-semibold text-gray-600 mb-4 dark:text-gray-300">Menus</p>
<div class="space-y-3">
<!-- Menu Items -->
<div
class="flex items-center space-x-3 p-2 rounded-lg hover:bg-white hover:shadow-md cursor-pointer dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 GlassmorphismMenuText">Dashboard
</p>
</div>
<div
class="flex items-center space-x-3 p-2 rounded-lg hover:bg-white hover:shadow-md cursor-pointer dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
</svg>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 GlassmorphismMenuText">My Task
</p>
</div>
<div
class="flex items-center space-x-3 p-2 rounded-lg hover:bg-white hover:shadow-md cursor-pointer dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.75 2.994v2.25m10.5-2.25v2.25m-14.252 13.5V7.491a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v11.251m-18 0a2.25 2.25 0 0 0 2.25 2.25h13.5a2.25 2.25 0 0 0 2.25-2.25m-18 0v-7.5a2.25 2.25 0 0 1 2.25-2.25h13.5a2.25 2.25 0 0 1 2.25 2.25v7.5m-6.75-6h2.25m-9 2.25h4.5m.002-2.25h.005v.006H12v-.006Zm-.001 4.5h.006v.006h-.006v-.005Zm-2.25.001h.005v.006H9.75v-.006Zm-2.25 0h.005v.005h-.006v-.005Zm6.75-2.247h.005v.005h-.005v-.005Zm0 2.247h.006v.006h-.006v-.006Zm2.25-2.248h.006V15H16.5v-.005Z" />
</svg>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 GlassmorphismMenuText">Calendar
</p>
</div>
<div
class="flex items-center space-x-3 p-2 rounded-lg hover:bg-white hover:shadow-md cursor-pointer dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z" />
</svg>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 GlassmorphismMenuText">Mail</p>
</div>
<div
class="flex items-center space-x-3 p-2 rounded-lg hover:bg-white hover:shadow-md cursor-pointer dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
</svg>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 GlassmorphismMenuText">Activity
</p>
</div>
</div>
<p class="text-xs font-semibold text-gray-600 mt-4 mb-4 dark:text-gray-300">Service</p>
<div class="space-y-3">
<div
class="flex items-center space-x-3 p-2 rounded-lg hover:bg-white hover:shadow-md cursor-pointer dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
</svg>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 GlassmorphismMenuText">SEO</p>
</div>
<div
class="flex items-center space-x-3 p-2 rounded-lg hover:bg-white hover:shadow-md cursor-pointer dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
</svg>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 GlassmorphismMenuText">Web Design
</p>
</div>
<div
class="flex items-center space-x-3 p-2 rounded-lg hover:bg-white hover:shadow-md cursor-pointer dark:hover:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="size-6 text-black dark:text-white">
<path fill-rule="evenodd"
d="M12 3.75a6.715 6.715 0 0 0-3.722 1.118.75.75 0 1 1-.828-1.25 8.25 8.25 0 0 1 12.8 6.883c0 3.014-.574 5.897-1.62 8.543a.75.75 0 0 1-1.395-.551A21.69 21.69 0 0 0 18.75 10.5 6.75 6.75 0 0 0 12 3.75ZM6.157 5.739a.75.75 0 0 1 .21 1.04A6.715 6.715 0 0 0 5.25 10.5c0 1.613-.463 3.12-1.265 4.393a.75.75 0 0 1-1.27-.8A6.715 6.715 0 0 0 3.75 10.5c0-1.68.503-3.246 1.367-4.55a.75.75 0 0 1 1.04-.211ZM12 7.5a3 3 0 0 0-3 3c0 3.1-1.176 5.927-3.105 8.056a.75.75 0 1 1-1.112-1.008A10.459 10.459 0 0 0 7.5 10.5a4.5 4.5 0 1 1 9 0c0 .547-.022 1.09-.067 1.626a.75.75 0 0 1-1.495-.123c.041-.495.062-.996.062-1.503a3 3 0 0 0-3-3Zm0 2.25a.75.75 0 0 1 .75.75c0 3.908-1.424 7.485-3.781 10.238a.75.75 0 0 1-1.14-.975A14.19 14.19 0 0 0 11.25 10.5a.75.75 0 0 1 .75-.75Zm3.239 5.183a.75.75 0 0 1 .515.927 19.417 19.417 0 0 1-2.585 5.544.75.75 0 0 1-1.243-.84 17.915 17.915 0 0 0 2.386-5.116.75.75 0 0 1 .927-.515Z"
clip-rule="evenodd" />
</svg>
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 GlassmorphismMenuText">Logo
Design</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightwind@2.7.0/tailwind.js"></script>
<script>
/* ------------------Glassmorphism Sidebar------------------ */
// const GlassmorphismSidenav = document.getElementById("GlassmorphismSidenav");
// const GlassmorphismPname = document.getElementById("GlassmorphismPname");
// const GlassmorphismTogglericon = document.getElementById("GlassmorphismTogglericon");
// const GlassmorphismMenuText = document.querySelectorAll(".GlassmorphismMenuText");
// const GlassmorphismCreateTask = document.getElementById("GlassmorphismCreateTask");
// const GlassmorphismTaskText = document.getElementById("GlassmorphismTaskText");
// let GlassmorphismisCollapsed = false;
// function GlassmorphismToggle() {
// GlassmorphismisCollapsed = !GlassmorphismisCollapsed;
// GlassmorphismSidenav.style.width = GlassmorphismisCollapsed ? "70px" : "208px";
// GlassmorphismPname.style.display = GlassmorphismisCollapsed ? "none" : "block";
// GlassmorphismMenuText.forEach(text => {
// text.style.display = GlassmorphismisCollapsed ? "none" : "block";
// });
// GlassmorphismTaskText.style.display = GlassmorphismisCollapsed ? "none" : "flex";
// }
</script>
</body>
</html>