Feature: sidebar
This commit is contained in:
parent
9b7bc1a9ea
commit
981a90b7d9
6 changed files with 117 additions and 0 deletions
BIN
template/assets/crown.png
Normal file
BIN
template/assets/crown.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 830 B |
BIN
template/assets/menu-thin.png
Normal file
BIN
template/assets/menu-thin.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 125 B |
BIN
template/assets/sparkling.png
Normal file
BIN
template/assets/sparkling.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 903 B |
|
@ -68,6 +68,51 @@ body {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-toggler {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sidebar-toggler:checked ~ .sidebar {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-label {
|
||||||
|
margin-right: 9px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
background-color: #131516;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 16px;
|
||||||
|
left: 0;
|
||||||
|
width: 200px;
|
||||||
|
transform: translateX(-200px);
|
||||||
|
transition: transform 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
.sidebar .sidebar-list {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.sidebar .sidebar-list .sidebar-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
color: #d8d4cf;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.sidebar .sidebar-list .sidebar-item:hover {
|
||||||
|
background-color: #262a2b;
|
||||||
|
}
|
||||||
|
.sidebar .sidebar-list .sidebar-item img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.artwork-thumbnail {
|
.artwork-thumbnail {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -85,6 +85,57 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-toggler {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&:checked ~ .sidebar {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-label {
|
||||||
|
margin-right: 9px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
background-color: $bg;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 16px;
|
||||||
|
left: 0;
|
||||||
|
width: 200px;
|
||||||
|
transform: translateX(-200px);
|
||||||
|
transition: transform 250ms ease-in-out;
|
||||||
|
|
||||||
|
.sidebar-list {
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.sidebar-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
color: $fg;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $bg-alt;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.artwork-thumbnail {
|
.artwork-thumbnail {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -67,6 +67,27 @@
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<ul class="navbar-list">
|
<ul class="navbar-list">
|
||||||
<li class="navbar-item">
|
<li class="navbar-item">
|
||||||
|
<input type="checkbox" class="sidebar-toggler" id="sidebar-toggler" />
|
||||||
|
<label for="sidebar-toggler" class="sidebar-label">
|
||||||
|
<img
|
||||||
|
src="/assets/menu-thin.png"
|
||||||
|
alt="Menu"
|
||||||
|
width="30"
|
||||||
|
height="30"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="sidebar">
|
||||||
|
<ul class="sidebar-list">
|
||||||
|
<a class="sidebar-item" href="/ranking">
|
||||||
|
<img src="/assets/crown.png" alt="icon" />Ranking</a
|
||||||
|
>
|
||||||
|
<a class="sidebar-item" href="/newest">
|
||||||
|
<img src="/assets/sparkling.png" alt="icon" />Newest</a
|
||||||
|
>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a href="/" class="navbar-brand">
|
<a href="/" class="navbar-brand">
|
||||||
<img src="/favicon.ico" alt="PixivFE's logo" />
|
<img src="/favicon.ico" alt="PixivFE's logo" />
|
||||||
<b>PixivFE</b>
|
<b>PixivFE</b>
|
||||||
|
|
Loading…
Reference in a new issue