fedallbest/joplin-notes
Watch
1
0
Fork
You've already forked joplin-notes
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial

Browse source
This commit is contained in:
nm1 2026-11-04 00:33:23 +05:30
commit 74ae93a96e
1 changed files with 94691 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

94
joplin notion extension/Web Development/CSS/Snippets/Sidepanel.md Normal file
View file

@ -0,0 +1,94 @@
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>
```
&nbsp;
```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;
}
```