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">
<link rel="stylesheet" href="https://cdn.gisthostfor.me/ethanpil-lyqOHzKAgN-pico-theme-tweaks.css">
<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>
      <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...

CSS

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}
body > footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 0.7em;
  background-color: #eee;
}

.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: .5rem;
  transition: transform 0.3s ease-in-out;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  scrollbar-width: thin;
    overflow-x: hidden;
    overflow-y: scroll;
}
.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);
}
.sidebar nav ul li ul {
  padding-left: 1.5rem;
  display: none;
  padding-top: .5em;
  padding-left: 1em;
  padding-bottom: 0;
}
.sidebar nav ul li ul.active {
  display: block;
}
.sidebar nav ul li ul a {
  font-size: 0.9rem;
}
.main-content {
  flex: 1;
  padding: 2rem;
  padding-bottom: 0;
  margin-left: 250px;
  transition: margin-left 0.3s ease-in-out;
}
.main-content.sidebar-hidden {
    margin-left: 0;
}
.has-submenu {
  position: relative;
}
.submenu-indicator {
  margin-left: auto;
  transition: transform 0.3s ease;
}
.submenu.active + .has-submenu .submenu-indicator {
  transform: rotate(180deg);
}
.sidebar-toggle-button {
    position: absolute;
    right: -12.5px; /* Half of the button's width...

JavaScript

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

    function toggleSidebar() {
      const sidebar = document.getElementById('sidebar');
      const mainContent = document.getElementById('mainContent');
      const sidebarToggleIcon = document.getElementById('sidebarToggleIcon');

      sidebar.classList.toggle('hidden');
      mainContent.classList.toggle('sidebar-hidden');

      if (sidebar.classList.contains('hidden')) {
        sidebarToggleIcon.classList.remove('fa-chevron-left');
        sidebarToggleIcon.classList.add('fa-chevron-right');
      } else {
        sidebarToggleIcon.classList.remove('fa-chevron-right');
        sidebarToggleIcon.classList.add('fa-chevron-left');
      }
    }

    // Initial state based on screen width
    window.addEventListener('DOMContentLoaded', () => {
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.getElementById('mainContent');
        const sidebarToggleIcon = document.getElementById('sidebarToggleIcon');

        if (window.innerWidth <= 768) {
            sidebar.classList.add('hidden');
            mainContent.classList.add('sidebar-hidden');
            sidebarToggleIcon.classList.remove('fa-chevron-left');
            sidebarToggleIcon.classList.add('fa-chevron-right');
        }
    });

    window.addEventListener('resize', () => {
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.getElementById('mainContent');
        const sidebarToggleIcon = document.getElementById('sidebarToggleIcon');

        if (window.innerWidth <= 768) {
            sidebar.classList.add('hidden');
            mainContent.classList.add('sidebar-hidden');
            sidebarToggleIcon.classList.remove('fa-chevron-left');
            sidebarToggleIcon.classList.add('fa-chevron-right');
        } else {
           ...