📱 Sidebar Modal

<div class="sidebar-overlay">
  <div class="sidebar-right">
    <div class="sidebar-header">
      <h3 class="sidebar-title">Menu</h3>
      <button class="sidebar-close">×</button>
    </div>
    <div class="sidebar-content">
      <a href="#" class="sidebar-link">🏠 Home</a>
      <a href="#" class="sidebar-link">📦 Products</a>
      <a href="#" class="sidebar-link">💼 Services</a>
      <a href="#" class="sidebar-link">📞 Contact</a>
      <a href="#" class="sidebar-link">⚙️ Settings</a>
    </div>
  </div>
</div>

.sidebar-overlay {
  position: relative;
  width: 100%;
  min-height: 450px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
}
.sidebar-right {
  width: 280px;
  height: 100%;
  background: white;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
  animation: slideInRight 0.3s ease;
  display: flex;
  flex-direction: column;
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}
.sidebar-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a2e;
}
.sidebar-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}
.sidebar-close:hover {
  background: #f5f5f5;
  color: #1a1a2e;
}
.sidebar-content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sidebar-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #1a1a2e;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
  font-weight: 500;
}
.sidebar-link:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

<div class="sidebar-overlay-left">
  <div class="sidebar-left">
    <div class="sidebar-header">
      <button class="sidebar-close">×</button>
      <h3 class="sidebar-title">Filters</h3>
    </div>
    <div class="sidebar-content">
      <div class="filter-group">
        <h4 class="filter-title">Category</h4>
        <label class="filter-option">
          <input type="checkbox" checked>
          <span>All Products</span>
        </label>
        <label class="filter-option">
          <input type="checkbox">
          <span>Electronics</span>
        </label>
        <label class="filter-option">
          <input type="checkbox">
          <span>Clothing</span>
        </label>
      </div>
      <div class="filter-group">
        <h4 class="filter-title">Price Range</h4>
        <label class="filter-option">
          <input type="radio" name="price" checked>
          <span>$0 - $50</span>
        </label>
        <label class="filter-option">
          <input type="radio" name="price">
          <span>$50 - $100</span>
        </label>
        <label class="filter-option">
          <input type="radio" name="price">
          <span>$100+</span>
        </label>
      </div>
    </div>
  </div>
</div>

.sidebar-overlay-left {
  position: relative;
  width: 100%;
  min-height: 450px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-start;
  border-radius: 8px;
  overflow: hidden;
}
.sidebar-left {
  width: 280px;
  height: 100%;
  background: white;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
  animation: slideInLeft 0.3s ease;
  display: flex;
  flex-direction: column;
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}
.sidebar-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a2e;
}
.sidebar-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}
.sidebar-close:hover {
  background: #f5f5f5;
  color: #1a1a2e;
}
.sidebar-content {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
}
.filter-group {
  margin-bottom: 1.5rem;
}
.filter-title {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a2e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  cursor: pointer;
  color: #666;
  font-size: 0.9rem;
}
.filter-option input {
  cursor: pointer;
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

<div class="sidebar-overlay">
  <div class="sidebar-gradient">
    <div class="sidebar-gradient-header">
      <div class="sidebar-gradient-avatar">
        <img src="https://i.pravatar.cc/80?img=12" alt="Avatar">
      </div>
      <h3 class="sidebar-gradient-name">John Doe</h3>
      <p class="sidebar-gradient-email">john@example.com</p>
    </div>
    <div class="sidebar-gradient-content">
      <a href="#" class="sidebar-gradient-link">👤 Profile</a>
      <a href="#" class="sidebar-gradient-link">📦 My Orders</a>
      <a href="#" class="sidebar-gradient-link">💳 Payment Methods</a>
      <a href="#" class="sidebar-gradient-link">⚙️ Settings</a>
      <a href="#" class="sidebar-gradient-link logout">🚪 Logout</a>
    </div>
  </div>
</div>

.sidebar-overlay {
  position: relative;
  width: 100%;
  min-height: 450px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  border-radius: 8px;
  overflow: hidden;
}
.sidebar-gradient {
  width: 300px;
  height: 100%;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  box-shadow: -10px 0 30px rgba(102, 126, 234, 0.3);
  animation: slideInRight 0.3s ease;
  display: flex;
  flex-direction: column;
  color: white;
}
.sidebar-gradient-header {
  padding: 2rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.sidebar-gradient-avatar {
  margin-bottom: 1rem;
}
.sidebar-gradient-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
}
.sidebar-gradient-name {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.sidebar-gradient-email {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.8;
}
.sidebar-gradient-content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sidebar-gradient-link {
  display: block;
  padding: 0.85rem 1rem;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
  font-weight: 500;
}
.sidebar-gradient-link:hover {
  background: rgba(255, 255, 255, 0.15);
}
.sidebar-gradient-link.logout {
  margin-top: auto;
  color: #fee140;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}