Glass Effect Sidebar - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Ocean Admin</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font awesome/6.0.0 beta3/css/all.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/vendors/iconsax.css" /> <style> /* Updated Sidebar Styles */ .sidebar { height: 100%; width: 0; position: fixed; top: 0; left: 0; backdrop filter: blur(10px); background: rgba(255, 255, 255, 0.1); /* Slightly translucent white */ box shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Shadow effect */ overflow x: hidden; transition: width 0.5s, box shadow 0.5s; padding top: 60px; z index: 1000; } .sidebar a, .submenu a { padding: 15px 20px; /* Adjusted padding */ text decoration: none; font size: 18px; font weight: bold; color: #fff; display: block; transition: 0.5s; } .sidebar a:hover, .submenu a:hover { background color: rgba(255, 255, 255, 0.1); /* Semi transparent white */ transform: translateX(0px); /* Slight right movement */ box shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */ } .submenu { font size: 16px; padding left: 40px; display: none; /* Initially hidden */ } .sidebar .closebtn { color: #fff; position: absolute; top: 10px; right: 20px; font size: 36px; cursor: pointer; transition: color 0.3s; } .sidebar .closebtn:hover { color: #ff4757; /* Change color on hover */ } .openbtn { cursor: pointer; position: fixed; top: 15px; left: 15px; z index: 1100; background color: transparent; padding: 10px 15px; border radius: 50%; border: none; outline: none; transition: background color 0.3s, transform 0.3s; } .openbtn:hover { background color: rgba(0, 0, 0, 0.2); /* Added hover background */ } .openbtn.active { transform: translateX(220px); /* Adjusted for the sidebar width */ } .openbtn .bar { width: 25px; height: 3px; margin: 5px 0; background color: #fff; transition: 0.4s; } .sidebar open .content { margin left: 250px; transition: margin left 0.5s; } .content { transition: margin left 0.5s; padding: 20px; } .avatar container { position: relative; top: 20px; display: flex; align items: center; margin left: 10px; font weight: bold; } .avatar container h5 { margin left: 10px; /* Adjust spacing between icon and text */ color: #fff; } hr { border: none; border top: 2px solid rgba(255, 255, 255, 0.4); /* Lighter white */ margin: 1em 0; /* Adjust margin */ } /* Animation for sidebar */ .sidebar { transition: width 0.5s ease in out; } .slide down { animation: slideDown 0.5s forwards; } .slide up { animation: slideUp 0.5s forwards; } @keyframes slideDown { from { height: 0; opacity: 0; } to { height: auto; opacity: 1; } } @keyframes slideUp { from { height: auto; opacity: 1; } to { height: 0; opacity: 0; } } /* Responsive styles */ @media (max width: 768px) { .sidebar { width: 0; /* Default width for mobile */ } .sidebar open .content { margin left: 0; } .openbtn.active { transform: translateX(0); /* Adjusted for responsive view */ } } </style> </head> <body> <div class="sidebar" id="sidebar"> <a href="dashboard.php"><i class="fas fa chart line"></i> Dashboard</a> <a href="users list.php"><i class="fas fa users"></i> Users</a> <a href="admin panel deposits.php"><i class="fas fa money bill wave"></i> Deposits</a> <a href="utr verify admin.php"><i class="fas fa money check alt"></i> Auto Deposits</a> <a href="withdraw.php"><i class="fas fa hand holding usd"></i> Withdrawals</a> <a href="push.php"><i class="fas fa bell"></i>Push Notifications</a> <a href="all_coupon.php"><i class="fas fa ticket"></i> All shares</a> <! Submenu example > <a href="#" onclick="toggleSubmenu('pages submenu')"><i class="fas fa folder"></i> Pages</a> <div id="pages submenu" class="submenu"> <a href="auto_sell.php">Auto sell</a> <a href="wallets.php">Wallets</a> <a href="share insert handler.php">Share Handler</a> </div> <! New submenu > <a href="#" onclick="toggleSubmenu('support submenu')"><i class="fas fa life ring"></i> Support Chat</a> <div id="support submenu" class="submenu"> <a href="support">Live Chat</a> <a href="support/history">Chat History</a> </div> <! Nested submenu inside Pages > <a href="#" onclick="toggleSubmenu('reports submenu')"><i class="fal fa cog"></i> Advance</a> <div id="reports submenu" class="submenu nested"> <a href="settings.php">Setting</a> <a href="share requests.php">Share Request</a> <a href="all_share_request.php">All Share Request</a> <a href="shares.php">shares</a> <a href="all stock invest req.php">all stock request</a> <a href="stock invest request.php">stock invest request</a> <a href="stocks.php">stocks</a> </div> </div> <div class="content"> <button class="openbtn" onclick="toggleSidebar()"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </button> </div> <script> function toggleSidebar() { const sidebar = document.getElementById("sidebar"); const openbtn = document.querySelector('.openbtn'); if (sidebar.style.width === '250px') { sidebar.style.width = '0'; openbtn.classList.remove('active'); } else { sidebar.style.width = '250px'; openbtn.classList.add('active'); } document.body.classList.toggle('sidebar open'); } function toggleSubmenu(id) { const submenu = document.getElementById(id); if (submenu.style.display === "block") { submenu.style.display = "none"; submenu.classList.remove('slide down'); submenu.classList.add('slide up'); } else { submenu.style.display = "block"; submenu.classList.remove('slide up'); submenu.classList.add('slide down'); } } </script> </body> </html> iss menu me icons add karo aur ise stylish banao iske bg ko glass effect wala bg ki rakhna per ise stylish banao aur icons aur links ke bich spacing karo submenu dropdown animation lagao aur stylish karo apne hisab se
