joplin-notes/joplin notion extension/Web Development/CSS/Snippets/Sidepanel.md

Sidepanel

 <div class="sidePanel">
      <div class="userList">
        <div class="userItem" onclick="toggleQuizzes('user1')">
          User 1
        </div>
        <div class="userQuizzes" id="user1">
          <ul>
            <li>Quiz 1</li>
            <li>Quiz 2</li>
            <li>Quiz 3</li>
          </ul>
        </div>
        <div class="userItem" onclick="toggleQuizzes('user2')">
          User 2
        </div>
        <div class="userQuizzes" id="user2">
          <ul>
            <li>Quiz A</li>
            <li>Quiz B</li>
          </ul>
        </div>

        <div class="userItem" onclick="toggleQuizzes('user2')">
          User 2
        </div>
        <div class="userQuizzes" id="user2">
          <ul>
            <li>Quiz A</li>
            <li>Quiz B</li>
          </ul>
        </div>
      </div>
    </div>

 

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.sidePanel {
  width: 200px;
  height: 100vh;
  background-color: #f4f4f4;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  // transform: translateX(-100%);
}

.userList {
  padding: 20px;
}

.userItem {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.userItem:hover {
  background-color: #e0e0e0;
}

.userQuizzes {
  display: none;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

.userQuizzes ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.userQuizzes li {
  padding: 5px 0;
}