94 lines
No EOL
1.6 KiB
Markdown
94 lines
No EOL
1.6 KiB
Markdown
Sidepanel
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
```css
|
|
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;
|
|
}
|
|
|
|
``` |