Feature: sidebar

template/css/style.css

@@ -68,6 +68,51 @@ body {
   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 {
   position: relative;
   display: inline-block;

template/css/style.scss

@@ -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 {
   position: relative;
   display: inline-block;

template/header.html

@@ -67,6 +67,27 @@
     <nav class="navbar">
       <ul class="navbar-list">
         <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">
             <img src="/favicon.ico" alt="PixivFE's logo" />
             <b>PixivFE</b>