JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.1/pico.min.css">

  <!-- <button class="menu-toggle" onclick="toggleSidebar()">☰ Menu</button> -->

  <aside class="sidebar" id="sidebar">
    <div class="logo">AdminHub</div>
    <div class="search-bar">
      <input type="search" placeholder="Search..." aria-label="Search">
    </div>
    <nav>
      <ul>
        <li><a href="#dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
        <li class="has-submenu">
          <a href="#users" onclick="toggleSubmenu('users-submenu')"><i class="fas fa-users"></i> Users <i class="fas fa-chevron-down submenu-indicator"></i></a>
          <ul id="users-submenu" class="submenu">
            <li><a href="#all-users"><i class="fas fa-list"></i> All Users</a></li>
            <li><a href="#add-user"><i class="fas fa-user-plus"></i> Add User</a></li>
            <li><a href="#roles"><i class="fas fa-user-shield"></i> Roles</a></li>
          </ul>
        </li>
        <li class="has-submenu">
          <a href="#settings" onclick="toggleSubmenu('settings-submenu')"><i class="fas fa-cog"></i> Settings <i class="fas fa-chevron-down submenu-indicator"></i></a>
          <ul id="settings-submenu" class="submenu">
            <li><a href="#general"><i class="fas fa-sliders-h"></i> General</a></li>
            <li><a href="#security"><i class="fas fa-lock"></i> Security</a></li>
          </ul>
        </li>
        <li><a href="#reports"><i class="fas fa-chart-bar"></i> Reports</a></li>
        <li><a href="#logout"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
      </ul>
    </nav>
  </aside>
  <main class="main-content">
    <h1>Welcome to AdminHub</h1>
    <p>This is the main content area of your admin dashboard. Add your content here.</p>
  </main>

CSS

body {
      display: flex;
      min-height: 100vh;
      margin: 0;
      overflow-x: hidden;
    }
    .sidebar {
      width: 250px;
      background: var(--pico-background-color);
      border-right: 1px solid var(--pico-muted-border-color);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: transform 0.3s ease-in-out;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
    }
    .sidebar.hidden {
      transform: translateX(-100%);
    }
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 1rem;
    }
    .sidebar nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .sidebar nav ul li {
      margin-bottom: 0.5rem;
    }
    .sidebar nav ul li a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      text-decoration: none;
      border-radius: var(--pico-border-radius);
    }
    .sidebar nav ul li a:hover {
      background: var(--pico-primary-background);
      color: var(--pico-primary-inverse);
    }
    .submenu {
      padding-left: 1.5rem;
      display: none;
    }
    .submenu.active {
      display: block;
    }
    .submenu a {
      font-size: 0.9rem;
    }
    .main-content {
      flex: 1;
      padding: 2rem;
      margin-left: 250px;
      transition: margin-left 0.3s ease-in-out;
    }
    .search-bar {
      margin-bottom: 1rem;
    } 
    .menu-toggle {
      display: none;
      position: fixed;
      top: 1rem;
      left: 1rem;
      z-index: 1100;
      background: var(--pico-primary-background);
      color: var(--pico-primary-inverse);
      border: none;
      padding: 0.5rem;
      border-radius: var(--pico-border-radius);
      cursor: pointer;
    }
    .has-submenu {
      position: relative;
    }
    .submenu-indicator {
     ...

JavaScript

function toggleSubmenu(id) {
      const submenu = document.getElementById(id);
      submenu.classList.toggle('active');
    }
    function toggleSidebar() {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('active');
    }