From 981a90b7d92aa00b50cac74fed1ecb37c950e1a2 Mon Sep 17 00:00:00 2001 From: VnPower Date: Mon, 5 Jun 2023 16:20:09 +0700 Subject: [PATCH] Feature: sidebar --- template/assets/crown.png | Bin 0 -> 830 bytes template/assets/menu-thin.png | Bin 0 -> 125 bytes template/assets/sparkling.png | Bin 0 -> 903 bytes template/css/style.css | 45 ++++++++++++++++++++++++++++++ template/css/style.scss | 51 ++++++++++++++++++++++++++++++++++ template/header.html | 21 ++++++++++++++ 6 files changed, 117 insertions(+) create mode 100644 template/assets/crown.png create mode 100644 template/assets/menu-thin.png create mode 100644 template/assets/sparkling.png diff --git a/template/assets/crown.png b/template/assets/crown.png new file mode 100644 index 0000000000000000000000000000000000000000..e24400ae45f9f49b28c325dfef54737e3ea6a03e GIT binary patch literal 830 zcmV-E1Ht@>P)Vf9BkC&VA3A3>h+H$Y6{C8i5gDUe6t1TN;CyVKJ<1i%AQ}XTsv1C9Y>wvYbf^ z$R8!#w-0QUY}TX&z^q8OIkJ{C29gu$F`ypk&}WMwlNOMF`yUDvyOp(=v;e3B-iiD- z;JZG*23DK20O%9(=Rg&(5_lomIgosHlOvTDw*f zek3%BZ3bj#Yoe*ZdOPp~_ziRx8N^H=za%EH>cG~7#f4?`E=p${SP|0qNGN_uOk&`; z^xp!t%jm5K-b?pzNZ<3J_yKbgHafC4$)-YVw85Dhf#iT=(zPwRE`~xGfoCj_Pm7w7vXFC*nVki@fh)jIC!m{d+jEL8N=qG*?XV;3Qf58aBYOte z;moHw*){~F{j&`IMGLe7SDk=<0XKjX`fiJ{K0+W(&h_Oq@YD(5BXHKMA-!nCtt#vW z-uXM|lQ#o{3dBX^Ylm&sK3~&7ukCI=y+c|bEyj6|j0Toiw;k=e0(u3ki4jOGFsbu? z9$34C-hepumI4)!2vOkLPMor$YKy^tNhT~BUd=ZyT zQJuWho7kB+!|)tB#bGjzlgn~)GEsKLaX2LogK?Z3E%)D?z_2(RiQ~lkO;QPHjr&F_ z0wyjJb5!pA$pT3RWEt^+3W13W;7PfI03OE=7nGLt)^c1&l|wt@V2AOg@NJ2R^?lQj0^{^_hq=VFkE3aUbec| T+plCdP%DF{tDnm{r-UW|l-D6c literal 0 HcmV?d00001 diff --git a/template/assets/sparkling.png b/template/assets/sparkling.png new file mode 100644 index 0000000000000000000000000000000000000000..740757511da7de250c315fb444f6220f3a247aff GIT binary patch literal 903 zcmV;219<$2P)V)fSp)c zz#2Orm5)w4#n8BDfYEjosLj?%r@a;rthpuQwF0&Yq9QFALj z*OG|cs$zj2rF#J1?xEjA|nOy#)Og!XjoRpo2?0x7KnJ$5g0xmW3Pwe!Fw@lR_!qw!#H1Dr$MN?vsg+o<$8Wj>aSA&rMMei+<+W zy;^7ktQ8+u(imYms)FH-zc)}|PtEisZKYb{uI%HX@8^>A4$6#8y;z}gP0*iJE=&)B=5^=0kv zFI-1F^gRfEwJVjKlF)bHo@9=A^EWhqCkpg^hwgVy^QS|cQ#$&tm|5}eBbH**!0wC& zeOER!8rIlStENIHZxCaocIfwWf>U!)?KSGmJ`uz0XO- zt3{PB6^(CD)obo^5}2$7*L@~zEAAZNqKQk<{J*eF9BbE!t%`0mn#4-v#Ig3Od%e^z dPPa-TqkqOjIeZ)+x-tL&002ovPDHLkV1h2Bvo-(# literal 0 HcmV?d00001 diff --git a/template/css/style.css b/template/css/style.css index f27f35a..b116287 100644 --- a/template/css/style.css +++ b/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; diff --git a/template/css/style.scss b/template/css/style.scss index 774d2ab..ab122c3 100644 --- a/template/css/style.scss +++ b/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; diff --git a/template/header.html b/template/header.html index be9691f..0e781c7 100644 --- a/template/header.html +++ b/template/header.html @@ -67,6 +67,27 @@