From 14976bad8812273ac64e2920c946e05915b9171a Mon Sep 17 00:00:00 2001
From: Filipe Medeiros <filipesilvamedeiros@gmail.com>
Date: Sun, 10 Oct 2021 04:35:10 +0100
Subject: [PATCH] feat: sidebar

not perfect, but good enough for me, maybe you can
tweak it to make it better!

only on desktop for now
---
 public/img/icons/logo.svg  |   1 -
 public/img/logo.svg        |  20 +++++
 public/img/piped.svg       |   7 ++
 public/img/pipedPlay.svg   |  15 ++++
 src/App.vue                |  55 +++++++-----
 src/components/Sidebar.vue | 176 +++++++++++++++++++++++++++++++++++++
 src/main.js                |  12 ++-
 7 files changed, 259 insertions(+), 27 deletions(-)
 delete mode 100644 public/img/icons/logo.svg
 create mode 100644 public/img/logo.svg
 create mode 100644 public/img/piped.svg
 create mode 100644 public/img/pipedPlay.svg
 create mode 100644 src/components/Sidebar.vue

diff --git a/public/img/icons/logo.svg b/public/img/icons/logo.svg
deleted file mode 100644
index f0356a6e..00000000
--- a/public/img/icons/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1080" viewBox="0 0 1080 1080"><defs><linearGradient id="grd1" x1="138.28" x2="522.49" y1="555.665" y2="480.982" gradientUnits="userSpaceOnUse"><stop offset=".16" stop-color="#8b1010"/><stop offset="1" stop-color="#f84330"/></linearGradient><linearGradient id="grd2" x1="353.405" x2="321.475" y1="835.89" y2="986.11" gradientUnits="userSpaceOnUse"><stop offset=".174" stop-color="#493b32"/><stop offset=".61" stop-color="#dbccc4"/></linearGradient><linearGradient id="grd3" x1="300.212" x2="861.409" y1="432.365" y2="323.279" gradientUnits="userSpaceOnUse"><stop offset=".16" stop-color="#8b1010"/><stop offset="1" stop-color="#f84330"/></linearGradient><linearGradient id="grd4" x1="553.252" x2="504.217" y1="62.95" y2="372.542" gradientUnits="userSpaceOnUse"><stop offset=".174" stop-color="#493b32"/><stop offset=".61" stop-color="#dbccc4"/></linearGradient><linearGradient id="grd5" x1="557.276" x2="503.26" y1="360.48" y2="701.52" gradientUnits="userSpaceOnUse"><stop offset=".174" stop-color="#493b32"/><stop offset=".61" stop-color="#dbccc4"/></linearGradient></defs><style>.shp0{fill:url(#grd1)}.shp1{fill:url(#grd2)}.shp2{fill:url(#grd3)}.shp3{fill:url(#grd4)}.shp4{fill:url(#grd5)}</style><g id="Logo original"><path id="Vertical Pipe" d="M308.43 156.83C308.43 156.83 315.74 151.35 328.73 144.1C336.03 140.96 345.13 137.73 355.51 134.83C366.43 132.55 378.57 130.84 391.1 129.92C403.91 129.85 416.88 130.66 429.07 132.27C441.2 134.74 452.38 137.86 461.8 141.18C479.95 149.7 491.39 156.83 491.39 156.83C491.39 156.83 491.39 168.54 491.39 189.05C491.39 199.3 491.39 211.75 491.39 226.03C491.39 240.31 491.39 256.42 491.39 274C491.39 291.57 491.39 310.61 491.39 330.75C491.39 340.82 491.39 351.17 491.39 361.74C491.39 372.31 491.39 383.11 491.39 394.1C491.39 405.08 491.39 416.25 491.39 427.56C491.39 438.86 491.39 450.31 491.39 461.84C491.39 473.37 491.39 485 491.39 496.67C491.39 508.34 491.39 520.06 491.39 531.78C491.39 543.49 491.39 555.21 491.39 566.88C491.39 578.55 491.39 590.18 491.39 601.71C491.39 613.25 491.39 624.69 491.39 636C491.39 647.3 491.39 658.47 491.39 669.45C491.39 680.44 491.39 691.24 491.39 701.81C491.39 712.39 491.39 722.73 491.39 732.8C491.39 752.94 491.39 771.98 491.39 789.55C491.39 807.13 491.39 823.24 491.39 837.52C491.39 851.8 491.39 864.25 491.39 874.5C491.39 895.01 491.39 906.73 491.39 906.73C491.39 906.73 479.95 906.73 462.8 906.73C454.22 906.73 444.22 906.73 433.5 906.73C422.78 906.73 411.34 906.73 399.91 906.73C388.47 906.73 377.04 906.73 366.32 906.73C355.6 906.73 345.59 906.73 337.02 906.73C319.86 906.73 308.43 906.73 308.43 906.73C308.43 906.73 308.43 895.01 308.43 874.5C308.43 864.25 308.43 851.8 308.43 837.52C308.43 823.24 308.43 807.13 308.43 789.55C308.43 771.98 308.43 752.94 308.43 732.8C308.43 722.73 308.43 712.39 308.43 701.81C308.43 691.24 308.43 680.44 308.43 669.45C308.43 658.47 308.43 647.3 308.43 636C308.43 624.69 308.43 613.25 308.43 601.71C308.43 590.18 308.43 578.55 308.43 566.88C308.43 555.21 308.43 543.49 308.43 531.78C308.43 520.06 308.43 508.34 308.43 496.67C308.43 485 308.43 473.37 308.43 461.84C308.43 450.31 308.43 438.86 308.43 427.56C308.43 416.25 308.43 405.08 308.43 394.1C308.43 383.11 308.43 372.31 308.43 361.74C308.43 351.17 308.43 340.82 308.43 330.75C308.43 310.61 308.43 291.57 308.43 274C308.43 256.42 308.43 240.31 308.43 226.03C308.43 211.75 308.43 199.3 308.43 189.05C308.43 168.54 308.43 156.83 308.43 156.83Z" class="shp0"/><path id="Vertical Pipe Hole" d="M400 948C349.12 948 308 931.46 308 911C308 890.54 349.12 874 400 874C450.88 874 492 890.54 492 911C492 931.46 450.88 948 400 948Z" class="shp1"/><path id="Curved Pipe" d="M550.11 292.48C550.11 292.48 550.11 282.84 549.95 270.23C549.81 264.56 549.62 258.33 549.4 251.96C549.18 245.73 548.97 239.04 548.8 232.11C548.71 224.71 548.72 216.64 548.84 208.28C549.1 198.98 549.49 189.29 549.96 180.1C551.34 158.91 552.64 142.43 552.64 142.43C552.64 142.43 567.23 141.22 591.88 140.99C597.82 141.37 604.31 141.97 611.26 142.84C618.21 143.71 625.62 144.85 633.41 146.3C640.92 148.24 648.73 150.6 656.78 153.39C664.82 156.18 673.1 159.41 681.53 163.08C689.5 167.4 697.54 172.24 705.59 177.59C713.63 182.94 721.67 188.8 729.65 195.17C737.15 202.04 744.52 209.42 751.7 217.3C758.52 225.48 765.12 234.13 771.43 243.22C777.35 252.59 782.95 262.36 788.19 272.5C792.99 282.86 797.41 293.54 801.4 304.49C804.92 315.6 808 326.93 810.6 338.41C812.71 349.98 814.33 361.66 815.45 373.37C816.05 385.09 816.14 396.79 815.72 408.41C814.77 419.96 813.31 431.38 811.34 442.59C808.85 453.67 805.86 464.5 802.4 475.02C798.42 485.33 793.98 495.3 789.12 504.88C783.76 514.19 778.01 523.09 771.91 531.52C765.34 539.65 758.45 547.31 751.31 554.46C743.52 561.14 735.54 567.31 727.43 572.97C719.33 578.63 711.11 583.78 702.85 588.42C693.9 592.43 685.01 595.99 676.29 599.11C667.55 602.23 658.98 604.91 650.65 607.17C641.86 608.94 633.43 610.39 625.48 611.55C617.52 612.72 610.03 613.6 603.12 614.23C588.57 614.64 576.92 614.69 568.91 614.64C560.9 614.59 556.53 614.44 556.53 614.44C556.53 614.44 556.85 604.81 557.26 591.31C557.43 584.87 557.61 577.5 557.76 569.7C557.87 561.87 557.93 553.37 557.93 544.58C557.85 535.37 557.69 525.59 557.45 515.8C557.11 505.28 556.69 494.7 556.25 484.98C555.08 463.51 554.08 447.5 554.08 447.5C554.08 447.5 561.02 447.9 572.67 447.99C578.25 447.77 584.82 447.25 592.05 446.35C598.96 445.13 606.38 443.4 614 441.09C621.13 438.38 628.29 435.01 635.23 431C638.46 428.84 641.6 426.51 644.63 424.03C647.47 421.45 650.2 418.71 652.77 415.84C655.14 412.88 657.35 409.79 659.37 406.58C661.19 403.3 662.81 399.91 664.23 396.43C665.43 392.91 666.41 389.3 667.17 385.65C667.71 381.96 668.02 378.24 668.1 374.5C667.96 370.75 667.58 367 666.98 363.27C666.15 359.56 665.1 355.88 663.84 352.27C662.35 348.69 660.66 345.18 658.77 341.76C656.67 338.4 654.39 335.14 651.94 332.01C649.28 328.94 646.48 326.01 643.55 323.21C640.43 320.5 637.2 317.94 633.88 315.53C626.74 310.99 619.36 307.07 612.03 303.81C604.17 300.9 596.53 298.57 589.39 296.8C581.92 295.31 575.14 294.26 569.37 293.56C557.31 292.67 550.11 292.48 550.11 292.48Z" class="shp2"/><path id="Curved Pipe Upper Hole" d="M556.37 294C533.9 294 515.73 259.91 515.73 217.75C515.73 175.58 533.9 141.49 556.37 141.49C578.84 141.49 597.01 175.58 597.01 217.75C597.01 259.91 578.84 294 556.37 294Z" class="shp3"/><path id="Curved Pipe Bottom Hole" d="M557.9 615C535.43 615 517.26 577.45 517.26 531C517.26 484.55 535.43 447 557.9 447C580.38 447 598.54 484.55 598.54 531C598.54 577.45 580.38 615 557.9 615Z" class="shp4"/></g></svg>
\ No newline at end of file
diff --git a/public/img/logo.svg b/public/img/logo.svg
new file mode 100644
index 00000000..3659243c
--- /dev/null
+++ b/public/img/logo.svg
@@ -0,0 +1,20 @@
+<svg width="131" height="40" viewBox="0 0 131 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2227 38.5427C19.2227 38.5427 11.7457 42.1824 6.08112 37.9576C-0.195465 33.2763 0.000678697 25.8643 0.000678697 25.8643V20.0127V12.8932C0.000678697 12.8932 0.444769 4.41428 5.58586 1.77813C10.9798 -0.987659 17.0651 -0.0777986 19.7131 1.48263C22.3103 2.86523 28.6229 6.40089 33.0949 9.48273C37.567 12.5646 39.0152 17.5267 38.9351 19.6226C38.7576 24.0142 37.0178 27.5739 33.0949 30.0608C30.447 31.9139 19.2227 38.5427 19.2227 38.5427Z" fill="white"/>
+<path d="M19.2227 38.5427C19.2227 38.5427 11.7457 42.1824 6.08112 37.9576C-0.195465 33.2763 0.000678697 25.8643 0.000678697 25.8643V20.0127V12.8932C0.000678697 12.8932 0.444769 4.41428 5.58586 1.77813C10.9798 -0.987659 17.0651 -0.0777986 19.7131 1.48263C22.3103 2.86523 28.6229 6.40089 33.0949 9.48273C37.567 12.5646 39.0152 17.5267 38.9351 19.6226C38.7576 24.0142 37.0178 27.5739 33.0949 30.0608C30.447 31.9139 19.2227 38.5427 19.2227 38.5427Z" fill="url(#paint0_linear)" fill-opacity="0.2"/>
+<path d="M9.61169 25.1816L9.70977 12.9908C9.70977 12.9908 9.70977 10.8452 11.5731 9.96746C13.4365 9.08972 14.5153 9.77241 16.7709 11.0403C19.0266 12.3081 26.48 16.5993 26.48 16.5993C26.48 16.5993 28.7356 17.6721 28.7356 20.0127C28.7356 22.3533 25.8916 23.5237 25.8916 23.5237L15.344 29.6678C15.344 29.6678 12.647 30.9368 11.1808 29.6678C10.03 28.6718 9.61169 28.0099 9.61169 25.1816Z" fill="url(#paint1_linear)"/>
+<path d="M60.6887 10.4744C63.2496 10.4744 65.2644 11.0829 66.7331 12.3001C68.2018 13.5172 68.9362 15.1931 68.9362 17.3278C68.9362 19.4624 68.2018 21.1383 66.7331 22.3554C65.2644 23.5726 63.2496 24.1811 60.6887 24.1811H55.8024V30.1357H52.978V10.4744H60.6887ZM60.604 21.7375C62.3928 21.7375 63.758 21.363 64.6995 20.614C65.641 19.8463 66.1117 18.7509 66.1117 17.3278C66.1117 15.9046 65.641 14.8186 64.6995 14.0696C63.758 13.3019 62.3928 12.918 60.604 12.918H55.8024V21.7375H60.604Z" fill="white"/>
+<path d="M72.442 15.2493H75.1535V30.1357H72.442V15.2493ZM73.7978 12.3843C73.2705 12.3843 72.828 12.2158 72.4703 11.8787C72.1313 11.5417 71.9619 11.1297 71.9619 10.6429C71.9619 10.156 72.1313 9.74408 72.4703 9.40703C72.828 9.05126 73.2705 8.87337 73.7978 8.87337C74.325 8.87337 74.7581 9.04189 75.097 9.37895C75.4548 9.69727 75.6337 10.0999 75.6337 10.5867C75.6337 11.0923 75.4548 11.523 75.097 11.8787C74.7581 12.2158 74.325 12.3843 73.7978 12.3843Z" fill="white"/>
+<path d="M88.2674 15.1088C89.7173 15.1088 91.0166 15.4272 92.1652 16.0638C93.3138 16.7005 94.2082 17.5899 94.8484 18.7321C95.5075 19.8744 95.837 21.1945 95.837 22.6925C95.837 24.1905 95.5075 25.52 94.8484 26.6809C94.2082 27.8232 93.3138 28.7126 92.1652 29.3493C91.0166 29.9859 89.7173 30.3043 88.2674 30.3043C87.1941 30.3043 86.2056 30.0983 85.3017 29.6863C84.4167 29.2744 83.6635 28.6752 83.0422 27.8887V35.5847H80.3307V15.2493H82.9292V17.6086C83.5317 16.7847 84.2943 16.1668 85.217 15.7548C86.1397 15.3242 87.1565 15.1088 88.2674 15.1088ZM88.0415 27.9449C89.0018 27.9449 89.8585 27.7295 90.6117 27.2989C91.3837 26.8495 91.9863 26.2315 92.4194 25.4451C92.8713 24.6399 93.0972 23.7224 93.0972 22.6925C93.0972 21.6626 92.8713 20.7544 92.4194 19.968C91.9863 19.1628 91.3837 18.5449 90.6117 18.1142C89.8585 17.6835 89.0018 17.4682 88.0415 17.4682C87.1 17.4682 86.2432 17.6929 85.4712 18.1423C84.718 18.573 84.1155 19.1815 83.6635 19.968C83.2305 20.7544 83.0139 21.6626 83.0139 22.6925C83.0139 23.7224 83.2305 24.6399 83.6635 25.4451C84.0966 26.2315 84.6992 26.8495 85.4712 27.2989C86.2432 27.7295 87.1 27.9449 88.0415 27.9449Z" fill="white"/>
+<path d="M113.113 22.7768C113.113 22.9827 113.094 23.2542 113.056 23.5913H100.911C101.08 24.9021 101.655 25.96 102.634 26.7652C103.632 27.5517 104.865 27.9449 106.334 27.9449C108.123 27.9449 109.563 27.3457 110.655 26.1473L112.152 27.8887C111.474 28.6752 110.627 29.2744 109.61 29.6863C108.612 30.0983 107.492 30.3043 106.249 30.3043C104.667 30.3043 103.265 29.9859 102.041 29.3493C100.817 28.6939 99.8658 27.7857 99.1879 26.6248C98.5289 25.4638 98.1994 24.1531 98.1994 22.6925C98.1994 21.2507 98.5195 19.9493 99.1597 18.7883C99.8187 17.6274 100.713 16.7285 101.843 16.0919C102.992 15.4365 104.281 15.1088 105.712 15.1088C107.143 15.1088 108.415 15.4365 109.525 16.0919C110.655 16.7285 111.531 17.6274 112.152 18.7883C112.792 19.9493 113.113 21.2788 113.113 22.7768ZM105.712 17.3839C104.413 17.3839 103.321 17.7772 102.436 18.5636C101.57 19.3501 101.061 20.3799 100.911 21.6533H110.514C110.363 20.3987 109.846 19.3782 108.961 18.5917C108.094 17.7865 107.012 17.3839 105.712 17.3839Z" fill="white"/>
+<path d="M131 9.29468V30.1357H128.401V27.7764C127.799 28.6003 127.036 29.2276 126.114 29.6582C125.191 30.0889 124.174 30.3043 123.063 30.3043C121.613 30.3043 120.314 29.9859 119.165 29.3493C118.017 28.7126 117.113 27.8232 116.454 26.6809C115.814 25.52 115.494 24.1905 115.494 22.6925C115.494 21.1945 115.814 19.8744 116.454 18.7321C117.113 17.5899 118.017 16.7005 119.165 16.0638C120.314 15.4272 121.613 15.1088 123.063 15.1088C124.137 15.1088 125.125 15.3148 126.029 15.7268C126.933 16.12 127.686 16.7098 128.288 17.4963V9.29468H131ZM123.289 27.9449C124.231 27.9449 125.087 27.7295 125.859 27.2989C126.631 26.8495 127.234 26.2315 127.667 25.4451C128.1 24.6399 128.317 23.7224 128.317 22.6925C128.317 21.6626 128.1 20.7544 127.667 19.968C127.234 19.1628 126.631 18.5449 125.859 18.1142C125.087 17.6835 124.231 17.4682 123.289 17.4682C122.329 17.4682 121.463 17.6835 120.691 18.1142C119.938 18.5449 119.335 19.1628 118.883 19.968C118.45 20.7544 118.233 21.6626 118.233 22.6925C118.233 23.7224 118.45 24.6399 118.883 25.4451C119.335 26.2315 119.938 26.8495 120.691 27.2989C121.463 27.7295 122.329 27.9449 123.289 27.9449Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear" x1="4.02522" y1="-0.0999262" x2="38.6812" y2="55.6382" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="28.7356" y1="14.7369" x2="10.0884" y2="14.7516" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DE77FF"/>
+<stop offset="1" stop-color="#6846FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/img/piped.svg b/public/img/piped.svg
new file mode 100644
index 00000000..3e78adcd
--- /dev/null
+++ b/public/img/piped.svg
@@ -0,0 +1,7 @@
+<svg width="79" height="28" viewBox="0 0 79 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.68875 2.47436C11.2496 2.47436 13.2644 3.08293 14.7331 4.30006C16.2018 5.51719 16.9362 7.19309 16.9362 9.32775C16.9362 11.4624 16.2018 13.1383 14.7331 14.3554C13.2644 15.5726 11.2496 16.1811 8.68875 16.1811H3.80243V22.1357H0.977966V2.47436H8.68875ZM8.60401 13.7375C10.3928 13.7375 11.758 13.363 12.6995 12.614C13.641 11.8463 14.1117 10.7509 14.1117 9.32775C14.1117 7.90465 13.641 6.81859 12.6995 6.06958C11.758 5.30185 10.3928 4.91799 8.60401 4.91799H3.80243V13.7375H8.60401Z" fill="white"/>
+<path d="M20.442 7.24927H23.1535V22.1357H20.442V7.24927ZM21.7978 4.38432C21.2705 4.38432 20.828 4.2158 20.4703 3.87875C20.1313 3.54169 19.9619 3.12974 19.9619 2.64289C19.9619 2.15604 20.1313 1.74408 20.4703 1.40703C20.828 1.05126 21.2705 0.873367 21.7978 0.873367C22.325 0.873367 22.7581 1.04189 23.097 1.37895C23.4548 1.69727 23.6337 2.09986 23.6337 2.58671C23.6337 3.09229 23.4548 3.52297 23.097 3.87875C22.7581 4.2158 22.325 4.38432 21.7978 4.38432Z" fill="white"/>
+<path d="M36.2674 7.10883C37.7173 7.10883 39.0166 7.42715 40.1652 8.06381C41.3138 8.70046 42.2082 9.5899 42.8484 10.7321C43.5075 11.8744 43.837 13.1945 43.837 14.6925C43.837 16.1905 43.5075 17.52 42.8484 18.6809C42.2082 19.8232 41.3138 20.7126 40.1652 21.3493C39.0166 21.9859 37.7173 22.3043 36.2674 22.3043C35.1941 22.3043 34.2056 22.0983 33.3017 21.6863C32.4167 21.2744 31.6635 20.6752 31.0422 19.8887V27.5847H28.3307V7.24927H30.9292V9.60863C31.5317 8.78473 32.2943 8.1668 33.217 7.75484C34.1397 7.32417 35.1565 7.10883 36.2674 7.10883ZM36.0415 19.9449C37.0018 19.9449 37.8585 19.7296 38.6117 19.2989C39.3837 18.8495 39.9863 18.2315 40.4194 17.4451C40.8713 16.6399 41.0972 15.7224 41.0972 14.6925C41.0972 13.6626 40.8713 12.7544 40.4194 11.968C39.9863 11.1628 39.3837 10.5449 38.6117 10.1142C37.8585 9.68353 37.0018 9.46819 36.0415 9.46819C35.1 9.46819 34.2432 9.69289 33.4712 10.1423C32.718 10.573 32.1155 11.1815 31.6635 11.968C31.2305 12.7544 31.0139 13.6626 31.0139 14.6925C31.0139 15.7224 31.2305 16.6399 31.6635 17.4451C32.0966 18.2315 32.6992 18.8495 33.4712 19.2989C34.2432 19.7296 35.1 19.9449 36.0415 19.9449Z" fill="white"/>
+<path d="M61.1125 14.7768C61.1125 14.9827 61.0937 15.2542 61.056 15.5913H48.9109C49.0803 16.9021 49.6546 17.96 50.6338 18.7652C51.6317 19.5517 52.8651 19.9449 54.3338 19.9449C56.1226 19.9449 57.5631 19.3457 58.6552 18.1473L60.1522 19.8887C59.4743 20.6752 58.627 21.2744 57.6102 21.6863C56.6122 22.0983 55.4919 22.3043 54.2491 22.3043C52.6674 22.3043 51.2646 21.9859 50.0406 21.3493C48.8167 20.6939 47.8658 19.7857 47.1879 18.6248C46.5289 17.4638 46.1994 16.1531 46.1994 14.6925C46.1994 13.2507 46.5195 11.9493 47.1597 10.7883C47.8187 9.62735 48.7131 8.72855 49.8429 8.0919C50.9915 7.43652 52.2814 7.10883 53.7124 7.10883C55.1435 7.10883 56.4145 7.43652 57.5255 8.0919C58.6552 8.72855 59.5308 9.62735 60.1522 10.7883C60.7924 11.9493 61.1125 13.2788 61.1125 14.7768ZM53.7124 9.38393C52.4132 9.38393 51.3211 9.77716 50.4361 10.5636C49.5699 11.3501 49.0615 12.3799 48.9109 13.6533H58.514C58.3634 12.3987 57.8456 11.3782 56.9606 10.5917C56.0944 9.78652 55.0117 9.38393 53.7124 9.38393Z" fill="white"/>
+<path d="M79 1.29468V22.1357H76.4015V19.7764C75.7989 20.6003 75.0363 21.2276 74.1137 21.6582C73.191 22.0889 72.1742 22.3043 71.0632 22.3043C69.6133 22.3043 68.3141 21.9859 67.1655 21.3493C66.0169 20.7126 65.113 19.8232 64.454 18.6809C63.8138 17.52 63.4937 16.1905 63.4937 14.6925C63.4937 13.1945 63.8138 11.8744 64.454 10.7321C65.113 9.5899 66.0169 8.70046 67.1655 8.06381C68.3141 7.42715 69.6133 7.10883 71.0632 7.10883C72.1365 7.10883 73.1251 7.3148 74.0289 7.72676C74.9328 8.11998 75.6859 8.70982 76.2885 9.49628V1.29468H79ZM71.2892 19.9449C72.2307 19.9449 73.0874 19.7296 73.8595 19.2989C74.6315 18.8495 75.234 18.2315 75.6671 17.4451C76.1002 16.6399 76.3167 15.7224 76.3167 14.6925C76.3167 13.6626 76.1002 12.7544 75.6671 11.968C75.234 11.1628 74.6315 10.5449 73.8595 10.1142C73.0874 9.68353 72.2307 9.46819 71.2892 9.46819C70.3289 9.46819 69.4627 9.68353 68.6907 10.1142C67.9375 10.5449 67.335 11.1628 66.883 11.968C66.45 12.7544 66.2334 13.6626 66.2334 14.6925C66.2334 15.7224 66.45 16.6399 66.883 17.4451C67.335 18.2315 67.9375 18.8495 68.6907 19.2989C69.4627 19.7296 70.3289 19.9449 71.2892 19.9449Z" fill="white"/>
+</svg>
diff --git a/public/img/pipedPlay.svg b/public/img/pipedPlay.svg
new file mode 100644
index 00000000..d5a67c8e
--- /dev/null
+++ b/public/img/pipedPlay.svg
@@ -0,0 +1,15 @@
+<svg width="41" height="44" viewBox="0 0 183 189" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M90.6256 181.862C90.6256 181.862 55.6327 198.991 29.1218 179.108C-0.25317 157.077 0.664797 122.194 0.664797 122.194V94.6548V61.149C0.664797 61.149 2.74318 21.2449 26.8039 8.8386C52.048 -4.17788 80.528 0.104137 92.9205 7.44788C105.076 13.9547 134.619 30.5944 155.549 45.0983C176.479 59.6022 183.256 82.9553 182.881 92.8189C182.051 113.487 173.908 130.24 155.549 141.944C143.156 150.665 90.6256 181.862 90.6256 181.862Z" fill="white"/>
+<path d="M90.6256 181.862C90.6256 181.862 55.6327 198.991 29.1218 179.108C-0.25317 157.077 0.664797 122.194 0.664797 122.194V94.6548V61.149C0.664797 61.149 2.74318 21.2449 26.8039 8.8386C52.048 -4.17788 80.528 0.104137 92.9205 7.44788C105.076 13.9547 134.619 30.5944 155.549 45.0983C176.479 59.6022 183.256 82.9553 182.881 92.8189C182.051 113.487 173.908 130.24 155.549 141.944C143.156 150.665 90.6256 181.862 90.6256 181.862Z" fill="url(#paint0_linear)" fill-opacity="0.2"/>
+<path d="M45.6453 118.981L46.1042 61.608C46.1042 61.608 46.1042 51.5103 54.8249 47.3795C63.5456 43.2486 68.5945 46.4615 79.1511 52.4283C89.7077 58.3951 124.59 78.5904 124.59 78.5904C124.59 78.5904 135.147 83.6392 135.147 94.6548C135.147 105.67 121.837 111.178 121.837 111.178L72.4729 140.094C72.4729 140.094 59.8508 146.066 52.989 140.094C47.603 135.407 45.6453 132.291 45.6453 118.981Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="19.5" y1="-9.21904e-07" x2="183" y2="261.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="135.147" y1="69.8255" x2="47.8765" y2="69.8942" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DE77FF"/>
+<stop offset="1" stop-color="#6846FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/App.vue b/src/App.vue
index 28803eaa..921cc238 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,34 +1,37 @@
 <template>
-    <div
-        class="uk-container uk-container-expand uk-height-viewport"
-        :style="[{ background: backgroundColor, colour: foregroundColor }]"
-        :class="{ 'uk-light': darkMode }"
-    >
-        <Navigation />
-        <router-view v-slot="{ Component }">
-            <keep-alive :max="5">
-                <component :is="Component" :key="$route.fullPath" />
-            </keep-alive>
-        </router-view>
+    <div class="uk-flex">
+        <Sidebar style="flexShrink: 0" />
+        <main
+            class="uk-container uk-container-expand"
+            style="height: 100vh; overflow: scroll;"
+            :style="[{ background: backgroundColor, colour: foregroundColor }]"
+            :class="{ 'uk-light': darkMode }"
+        >
+            <router-view v-slot="{ Component }">
+                <keep-alive :max="5">
+                    <component :is="Component" :key="$route.fullPath" />
+                </keep-alive>
+            </router-view>
 
-        <div style="text-align: center">
-            <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
-                <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
-            </a>
-            &nbsp;
-            <a href="https://github.com/TeamPiped/Piped#donations">
-                <font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
-                {{ $t("actions.donations") }}
-            </a>
-        </div>
+            <div style="text-align: center">
+                <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
+                    <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
+                </a>
+                &nbsp;
+                <a href="https://github.com/TeamPiped/Piped#donations">
+                    <font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
+                    {{ $t("actions.donations") }}
+                </a>
+            </div>
+        </main>
     </div>
 </template>
 
 <script>
-import Navigation from "@/components/Navigation";
+import Sidebar from "@/components/Sidebar";
 export default {
     components: {
-        Navigation,
+        Sidebar,
     },
     mounted() {
         if (window.location.pathname === "/" || window.location.pathname.length == 0)
@@ -75,7 +78,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 h1,
 p,
 a,
@@ -108,4 +111,8 @@ b {
 * {
     scrollbar-color: #15191a #444a4e;
 }
+
+main {
+    background-color: #1d2438;
+}
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 00000000..c3505fe5
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,176 @@
+<template>
+    <div
+        class="uk-height-viewport uk-flex uk-flex-column uk-flex-middle"
+        :class="{ collapsed, 'narrow-sidebar': narrowSidebar }"
+        style="transition: width 0.5s; padding: 48px 24px; height: 100vh;"
+        :style="{ width: collapsed ? '78px' : '291px', backgroundColor: secondaryBackgroundColor }"
+    >
+        <div
+            class="uk-width-1-1 uk-flex uk-flex-middle"
+            style="margin-bottom: 100px; height: 50px;"
+            :style="{ padding: narrowSidebar ? '0' : '0 14px' }"
+            :class="{ 'uk-flex uk-flex-center': collapsed }"
+        >
+            <div style="flex: 0.50 0 0%;">
+                <font-awesome-icon class="button highlight" @click="collapsed = !collapsed" icon="bars" />
+            </div>
+            <div class="uk-flex uk-flex-middle" style="gap: 16px; flex: 1;" v-if="!narrowSidebar">
+                <img src="/img/pipedPlay.svg" :class="{ 'piped-play': !narrowSidebar }" />
+
+                <img src="/img/piped.svg" />
+            </div>
+        </div>
+
+        <nav class="uk-nav uk-flex-1 uk-width-1-1">
+            <ul class="uk-flex uk-flex-column" :class="{ 'uk-flex-middle': narrowSidebar }" style="gap: 20px;">
+                <li>
+                    <router-link to="/" class="highlight sidebar-link uk-flex">
+                        <font-awesome-icon icon="fire" />
+                        <span v-if="!narrowSidebar">Trending</span>
+                    </router-link>
+                </li>
+                <li>
+                    <router-link to="/feed" class="highlight sidebar-link uk-flex">
+                        <font-awesome-icon icon="rss" />
+                        <span v-if="!narrowSidebar">My feed</span>
+                    </router-link>
+                </li>
+                <li>
+                    <router-link to="/subscriptions" class="highlight sidebar-link uk-flex">
+                        <font-awesome-icon icon="heart" />
+                        <span v-if="!narrowSidebar">Subscriptions</span>
+                    </router-link>
+                </li>
+            </ul>
+        </nav>
+
+        <router-link to="/preferences" class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle">
+            <font-awesome-icon icon="cog" />
+            <span v-if="!narrowSidebar">Settings</span>
+        </router-link>
+
+        <button
+            class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
+            :class="{ 'uk-flex-center': collapsed }"
+            :style="{ backgroundColor: backgroundColor }"
+            style="border-radius: 9999px; border: none; margin-top: 20px;"
+            @click="logout"
+        >
+            <span v-if="!narrowSidebar">Log out</span>
+            <font-awesome-icon icon="sign-out-alt" />
+        </button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            collapsed: false,
+            narrowSidebar: false,
+        };
+    },
+    methods: {
+        logout() {
+            alert("logging out");
+        },
+    },
+    watch: {
+        collapsed(collapsed) {
+            if (collapsed)
+                setTimeout(() => {
+                    this.narrowSidebar = collapsed;
+                }, 350);
+            else this.narrowSidebar = collapsed;
+        },
+    },
+};
+</script>
+
+<style>
+@keyframes bump {
+    /* heartbeat */
+    /* 0% {
+        transform: scale(1);
+    }
+    20% {
+        transform: scale(1.25);
+    }
+    40% {
+        transform: scale(1);
+    }
+    60% {
+        transform: scale(1.25);
+    }
+    70% {
+        transform: scale(1.25);
+    }
+    90% {
+        transform: scale(1);
+    } */
+
+    /* right bump */
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+    45% {
+        transform: translate3d(8px, 0, 0);
+    }
+    55% {
+        transform: translate3d(8px, 0, 0);
+    }
+    100% {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.piped-play {
+    animation: bump 300ms ease-in-out 600ms;
+}
+@media (prefers-reduced-motion) {
+    .piped-play {
+        animation: none;
+    }
+}
+
+.logout-button {
+    white-space: nowrap;
+}
+
+.button:hover {
+    cursor: pointer;
+}
+
+.highlight {
+    color: #abb2c6;
+}
+
+.sidebar-link {
+    gap: 14px !important;
+    padding: 10px 14px;
+    border-radius: 12px;
+    transition: padding 0.5s;
+}
+
+.collapsed .sidebar-link {
+    padding: 6px;
+}
+.narrow-sidebar .sidebar-link {
+    width: fit-content;
+}
+
+.sidebar-link span {
+    transition: font-size 500ms;
+}
+.collapsed .sidebar-link span {
+    font-size: 0;
+}
+
+.highlight:hover,
+.router-link-active {
+    color: #fff;
+}
+.router-link-active {
+    background: linear-gradient(#da22ff, #9733ee);
+}
+</style>
diff --git a/src/main.js b/src/main.js
index d6da6802..031806e1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,10 @@ import {
     faHeadphones,
     faRss,
     faChevronLeft,
+    faBars,
+    faFire,
+    faCog,
+    faSignOutAlt,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -26,6 +30,10 @@ library.add(
     faYoutube,
     faRss,
     faChevronLeft,
+    faBars,
+    faFire,
+    faCog,
+    faSignOutAlt,
 );
 
 import("uikit/dist/css/uikit-core.css");
@@ -185,10 +193,10 @@ const mixin = {
     },
     computed: {
         backgroundColor() {
-            return this.getEffectiveTheme() === "light" ? "#fff" : "#0b0e0f";
+            return this.getEffectiveTheme() === "light" ? "#fff" : "#1d2438";
         },
         secondaryBackgroundColor() {
-            return this.getEffectiveTheme() === "light" ? "#e5e5e5" : "#242727";
+            return this.getEffectiveTheme() === "light" ? "#e5e5e5" : "#30354b";
         },
         foregroundColor() {
             return this.getEffectiveTheme() === "light" ? "#15191a" : "#0b0e0f";