MATH201/themes/zettels/layouts/partials/menu.html

116 lines
4.6 KiB
HTML
Raw Permalink Normal View History

2023-09-27 10:58:42 -06:00
<style>
menu { display: block; }
#menu {
height: 100%;
width: 250px;
position: fixed;
background: var(--dark-background-color);
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
opacity: 1;
color: white;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
padding: 8px;
padding-top: 40px;
}
#menu li {
margin: 12px;
}
#menu a {
color: white;
max-width: 200px;
}
#menu li {
text-indent: 0;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: end;
padding: 6px;
margin: 0px;
}
#menu li:hover, .selected {
background: var(--note-table-cell-ribbon-color);
border-radius: 8px;
}
#menu li:before {
content: "";
visibility: hidden;
display: none;
}
#menu ul {
margin: 0px;
}
#menu ul ul {
display: none;
}
#menu ul span {
display: flex;
margin-left: 32px;
}
menu {
--menu-text-color: var(--separator-color);
}
#menu svg {
fill: var(--menu-text-color);
margin-right: 12px;
width: 16px;
}
#menu .chevron {
margin-right: 4px;
}
</style>
<script>
var showsMenu = false;
function display(li) {
const inside_list = document.getElementById('menu-sublist');
if (showsMenu) {
inside_list.style.display = "none";
showsMenu = false;
} else {
inside_list.style.display = "block";
showsMenu = true;
}
}
</script>
<menu id="menu">
<ul>
<li onclick="display(this)"><svg class="chevron chevron-right" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="var(--menu-text-color)" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
<svg class="chevron-down" style="display:none" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="var(--menu-text-color)" stroke-width="1.03" points="16 7 10 13 4 7"></polyline></svg>
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><rect fill="none" stroke="var(--menu-text-color)" width="13" height="17" x="3.5" y="1.5"></rect><line fill="none" stroke="var(--menu-text-color)" x1="6" x2="12" y1="12.5" y2="12.5"></line><line fill="none" stroke="var(--menu-text-color)" x1="6" x2="14" y1="8.5" y2="8.5"></line><line fill="none" stroke="var(--menu-text-color)" x1="6" x2="14" y1="6.5" y2="6.5"></line><line fill="none" stroke="var(--menu-text-color)" x1="6" x2="14" y1="10.5" y2="10.5"></line></svg> Notes
</li>
<ul id="menu-sublist">
<li><span><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="var(--menu-text-color)" stroke-width="1.1" d="M17.5,3.71 L17.5,7.72 C17.5,7.96 17.4,8.2 17.21,8.39 L8.39,17.2 C7.99,17.6 7.33,17.6 6.93,17.2 L2.8,13.07 C2.4,12.67 2.4,12.01 2.8,11.61 L11.61,2.8 C11.81,2.6 12.08,2.5 12.34,2.5 L16.19,2.5 C16.52,2.5 16.86,2.63 17.11,2.88 C17.35,3.11 17.48,3.4 17.5,3.71 L17.5,3.71 Z"></path><circle cx="14" cy="6" r="1"></circle></svg>Non tagué</span></li>
<li><span><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><ellipse fill="none" stroke="var(--menu-text-color)" cx="6.11" cy="3.55" rx="2.11" ry="2.15"></ellipse><ellipse fill="none" stroke="var(--menu-text-color)" cx="6.11" cy="15.55" rx="2.11" ry="2.15"></ellipse><circle fill="none" stroke="var(--menu-text-color)" cx="13.15" cy="9.55" r="2.15"></circle><rect x="1" y="3" width="3" height="1"></rect><rect x="10" y="3" width="8" height="1"></rect><rect x="1" y="9" width="8" height="1"></rect><rect x="15" y="9" width="3" height="1"></rect><rect x="1" y="15" width="3" height="1"></rect><rect x="10" y="15" width="8" height="1"></rect></svg>Todo</span></li>
<li><span><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><rect fill="none" stroke="var(--menu-text-color)" height="10" width="13" y="8.5" x="3.5"></rect><path fill="none" stroke="var(--menu-text-color)" d="M6.5,8 L6.5,4.88 C6.5,3.01 8.07,1.5 10,1.5 C11.93,1.5 13.5,3.01 13.5,4.88 L13.5,8"></path></svg>Verouillés</span></li>
</ul>
</ul>
<ul id="tags">
<li>
<svg class="chevron" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="var(--menu-text-color)" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
<svg class="hashtag-icon" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.431,8 L15.661,7 L12.911,7 L13.831,3 L12.901,3 L11.98,7 L9.29,7 L10.21,3 L9.281,3 L8.361,7 L5.23,7 L5,8 L8.13,8 L7.21,12 L4.23,12 L4,13 L6.98,13 L6.061,17 L6.991,17 L7.911,13 L10.601,13 L9.681,17 L10.611,17 L11.531,13 L14.431,13 L14.661,12 L11.76,12 L12.681,8 L15.431,8 Z M10.831,12 L8.141,12 L9.061,8 L11.75,8 L10.831,12 Z"></path></svg> 1</li>
</ul>
</menu>