From c307022b599d25f64a8c2cd4f44c5ea4bfd7b279 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 16 Nov 2021 21:11:01 +0300
Subject: [PATCH] add @1000px media queries for the sidebar

---
 src/App.vue                                |  87 +++++++++++++--
 src/assets/css/global.css                  |  35 ++++--
 src/assets/icons/album.svg                 |   5 +
 src/assets/icons/artist.svg                |   3 +
 src/assets/icons/folder.svg                |   3 +
 src/assets/icons/heart.svg                 |   3 +
 src/assets/icons/logo-small.svg            |   3 +
 src/assets/icons/mix.svg                   |   6 +
 src/assets/icons/pin.svg                   |   3 +
 src/assets/icons/playlist.svg              |   3 +
 src/assets/icons/settings.svg              |   3 +
 src/components/LeftSidebar/Navigation.vue  | 115 ++++++++++++++++---
 src/components/LeftSidebar/PinnedStuff.vue | 123 +++++++++++++++++++++
 src/views/Home.vue                         |   7 ++
 14 files changed, 360 insertions(+), 39 deletions(-)
 create mode 100644 src/assets/icons/album.svg
 create mode 100644 src/assets/icons/artist.svg
 create mode 100644 src/assets/icons/folder.svg
 create mode 100644 src/assets/icons/heart.svg
 create mode 100644 src/assets/icons/logo-small.svg
 create mode 100644 src/assets/icons/mix.svg
 create mode 100644 src/assets/icons/pin.svg
 create mode 100644 src/assets/icons/playlist.svg
 create mode 100644 src/assets/icons/settings.svg
 create mode 100644 src/components/LeftSidebar/PinnedStuff.vue

diff --git a/src/App.vue b/src/App.vue
index bda504d..144cb00 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="l-container">
     <div class="l-sidebar">
-      <router-link :to="{ name: 'Home' }"><div id="logo"></div></router-link>
-      <hr id="logo-seperator" />
+      <div id="logo-container">
+        <router-link :to="{ name: 'Home' }"><div id="logo"></div></router-link>
+      </div>
+      <hr class="seperator" />
       <Navigation />
+      <hr class="seperator" />
+      <PinnedStuff />
+      <div id="settings-button">
+        <div class="nav-icon" id="settings-icon"></div>
+        <span id="text">Settings</span>
+      </div>
     </div>
     <div class="nav">
       <div id="nav"></div>
@@ -17,12 +25,18 @@
 
 <script>
 import Navigation from "./components/LeftSidebar/Navigation.vue";
+import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
 
 export default {
   components: {
     Navigation,
+    PinnedStuff,
+  },
+  setup() {
+    let quick_access = null;
+
+    return { quick_access };
   },
-  setup() {},
 };
 </script>
 
@@ -36,16 +50,65 @@ export default {
   background-position: center;
 }
 
-.l-container #logo-seperator {
-  margin-left: -1em;
-  border: 1px solid;
-  color: rgba(255, 255, 255, 0.514);
-  margin-bottom: 1em;
+#logo-container {
+  padding-left: 15px;
 }
 
-.l-container #l-home-icon {
-  height: 40px;
-  width: 40px;
-  background: red;
+.l-sidebar {
+  position: relative;
+}
+
+.l-container .seperator {
+  margin-left: -2em;
+}
+
+.l-container #settings-button {
+  position: absolute;
+  bottom: 0;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 50px;
+  width: 100%;
+}
+
+.l-container #settings-button:hover {
+  background: #17c93d7c;
+  cursor: pointer;
+}
+
+.l-container #settings-button #settings-icon {
+  margin-left: 10px;
+  margin-right: 5px;
+  width: 24px;
+  height: 24px;
+  background-image: url(./assets/icons/settings.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+@media (max-width: 1000px) {
+  #logo {
+    height: 40px;
+    width: 40px;
+    background: url(./assets/icons/logo-small.svg);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .l-container #settings-button {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .l-container #settings-button #settings-icon {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .l-container #settings-button #text {
+    display: none;
+  }
 }
 </style>
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index f39a1b9..7e710f5 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -1,3 +1,12 @@
+:root {
+  --grey: #ffffff48;
+}
+
+body {
+  margin: 0;
+  background: #0e141a;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -10,10 +19,16 @@ a {
   color: #fff;
 }
 
+hr,
+.seperator {
+  border: 1px solid;
+  color: #ffffff48;
+}
+
 .l-container {
   display: grid;
-  grid-template-columns: 300px 4fr 2fr;
-  grid-template-rows: 0.1fr 1fr 1fr;
+  grid-template-columns: 250px 4fr 2fr;
+  grid-template-rows: 78px 1fr 1fr;
   gap: 4px;
   grid-auto-flow: row;
   grid-template-areas:
@@ -26,29 +41,25 @@ a {
 
 .l-sidebar {
   grid-area: l-sidebar;
-  padding-left: 20px;
   padding-top: 0.5em;
   background-color: #131313b2;
-  /* border: 1px solid rgb(109, 109, 109); */
-  border-radius: 5px;
+}
+
+@media (max-width: 1000px) {
+  .l-sidebar {
+    width: 70px;
+  }
 }
 
 .nav {
   grid-area: nav;
-  max-height: 70px;
-  border: 1px solid rgb(109, 109, 109);
   border-radius: 5px;
 }
 
 .content {
   grid-area: content;
-  border: 1px solid rgb(109, 109, 109);
   border-radius: 5px;
 }
-body {
-  margin: 0;
-  background: #0e141a;
-}
 
 .r-sidebar {
   grid-area: r-sidebar;
diff --git a/src/assets/icons/album.svg b/src/assets/icons/album.svg
new file mode 100644
index 0000000..95a9ab8
--- /dev/null
+++ b/src/assets/icons/album.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9875 17.5C16.3751 17.5 17.5 16.3751 17.5 14.9875C17.5 13.5999 16.3751 12.475 14.9875 12.475C13.5999 12.475 12.475 13.5999 12.475 14.9875C12.475 16.3751 13.5999 17.5 14.9875 17.5Z" fill="white"/>
+<path d="M15 2.5C12.5277 2.5 10.111 3.23311 8.05538 4.60663C5.99976 5.98015 4.39761 7.93238 3.45151 10.2165C2.50542 12.5005 2.25787 15.0139 2.74019 17.4386C3.2225 19.8634 4.41301 22.0907 6.16117 23.8388C7.90933 25.587 10.1366 26.7775 12.5614 27.2598C14.9861 27.7421 17.4995 27.4946 19.7836 26.5485C22.0676 25.6024 24.0199 24.0002 25.3934 21.9446C26.7669 19.889 27.5 17.4723 27.5 15C27.5 13.3585 27.1767 11.733 26.5485 10.2165C25.9203 8.69989 24.9996 7.3219 23.8388 6.16117C22.6781 5.00043 21.3001 4.07969 19.7836 3.45151C18.267 2.82332 16.6415 2.5 15 2.5ZM15 25C13.0222 25 11.0888 24.4135 9.4443 23.3147C7.79981 22.2159 6.51809 20.6541 5.76121 18.8268C5.00433 16.9996 4.8063 14.9889 5.19215 13.0491C5.57801 11.1093 6.53041 9.32746 7.92894 7.92893C9.32746 6.53041 11.1093 5.578 13.0491 5.19215C14.9889 4.8063 16.9996 5.00433 18.8268 5.7612C20.6541 6.51808 22.2159 7.79981 23.3147 9.4443C24.4135 11.0888 25 13.0222 25 15C25 17.6522 23.9464 20.1957 22.0711 22.0711C20.1957 23.9464 17.6522 25 15 25Z" fill="white"/>
+<path d="M15 7.5C13.0109 7.5 11.1032 8.29018 9.6967 9.6967C8.29018 11.1032 7.5 13.0109 7.5 15H10C10 13.6739 10.5268 12.4021 11.4645 11.4645C12.4021 10.5268 13.6739 10 15 10V7.5Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/artist.svg b/src/assets/icons/artist.svg
new file mode 100644
index 0000000..e1080a6
--- /dev/null
+++ b/src/assets/icons/artist.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8C8.79565 8 9.55871 7.68393 10.1213 7.12132C10.6839 6.55871 11 5.79565 11 5C11 4.20435 10.6839 3.44129 10.1213 2.87868C9.55871 2.31607 8.79565 2 8 2C7.20435 2 6.44129 2.31607 5.87868 2.87868C5.31607 3.44129 5 4.20435 5 5C5 5.79565 5.31607 6.55871 5.87868 7.12132C6.44129 7.68393 7.20435 8 8 8V8ZM10 5C10 5.53043 9.78929 6.03914 9.41421 6.41421C9.03914 6.78929 8.53043 7 8 7C7.46957 7 6.96086 6.78929 6.58579 6.41421C6.21071 6.03914 6 5.53043 6 5C6 4.46957 6.21071 3.96086 6.58579 3.58579C6.96086 3.21071 7.46957 3 8 3C8.53043 3 9.03914 3.21071 9.41421 3.58579C9.78929 3.96086 10 4.46957 10 5V5ZM14 13C14 14 13 14 13 14H3C3 14 2 14 2 13C2 12 3 9 8 9C13 9 14 12 14 13ZM13 12.996C12.999 12.75 12.846 12.01 12.168 11.332C11.516 10.68 10.289 10 8 10C5.71 10 4.484 10.68 3.832 11.332C3.154 12.01 3.002 12.75 3 12.996H13Z" fill="#FFFBFB"/>
+</svg>
diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg
new file mode 100644
index 0000000..2beb975
--- /dev/null
+++ b/src/assets/icons/folder.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4719 5.625L13.6781 8.82188L14.2219 9.375H26.25V24.375H3.75V5.625H10.4719ZM10.4719 3.75H3.75C3.25272 3.75 2.77581 3.94754 2.42417 4.29918C2.07254 4.65081 1.875 5.12772 1.875 5.625V24.375C1.875 24.8723 2.07254 25.3492 2.42417 25.7008C2.77581 26.0525 3.25272 26.25 3.75 26.25H26.25C26.7473 26.25 27.2242 26.0525 27.5758 25.7008C27.9275 25.3492 28.125 24.8723 28.125 24.375V9.375C28.125 8.87772 27.9275 8.40081 27.5758 8.04918C27.2242 7.69754 26.7473 7.5 26.25 7.5H15L11.8031 4.30313C11.6287 4.12766 11.4213 3.98844 11.1928 3.89351C10.9643 3.79858 10.7193 3.7498 10.4719 3.75V3.75Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/heart.svg b/src/assets/icons/heart.svg
new file mode 100644
index 0000000..7e7bb25
--- /dev/null
+++ b/src/assets/icons/heart.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.7056 8.36093C25.3565 7.45862 24.8532 6.64096 24.2237 5.95372C23.5938 5.26443 22.851 4.71666 22.0359 4.34019C21.1907 3.94828 20.2842 3.74767 19.369 3.75002C18.085 3.75002 16.8322 4.1425 15.7436 4.88385C15.4831 5.06119 15.2357 5.25598 15.0013 5.46821C14.7669 5.25598 14.5195 5.06119 14.259 4.88385C13.1704 4.1425 11.9176 3.75002 10.6336 3.75002C9.70902 3.75002 8.81308 3.94771 7.96663 4.34019C7.14883 4.71814 6.41176 5.26179 5.77888 5.95372C5.14859 6.64019 4.6451 7.45804 4.29694 8.36093C3.93492 9.29997 3.75 10.2972 3.75 11.3234C3.75 12.2915 3.9271 13.3004 4.27871 14.3266C4.57301 15.1843 4.99493 16.0739 5.53406 16.9722C6.38832 18.3939 7.56294 19.8766 9.02144 21.3796C11.4384 23.8711 13.8319 25.5922 13.9335 25.662L14.5507 26.1039C14.8242 26.2987 15.1758 26.2987 15.4493 26.1039L16.0665 25.662C16.1681 25.5893 18.559 23.8711 20.9785 21.3796C22.437 19.8766 23.6117 18.3939 24.4659 16.9722C25.005 16.0739 25.4296 15.1843 25.7213 14.3266C26.0729 13.3004 26.25 12.2915 26.25 11.3234C26.2526 10.2972 26.0677 9.29997 25.7056 8.36093ZM15.0013 23.8043C15.0013 23.8043 5.72939 17.1728 5.72939 11.3234C5.72939 8.36093 7.92496 5.95953 10.6336 5.95953C12.5375 5.95953 14.1887 7.14569 15.0013 8.87842C15.8139 7.14569 17.4651 5.95953 19.369 5.95953C22.0776 5.95953 24.2732 8.36093 24.2732 11.3234C24.2732 17.1728 15.0013 23.8043 15.0013 23.8043Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/logo-small.svg b/src/assets/icons/logo-small.svg
new file mode 100644
index 0000000..977fc37
--- /dev/null
+++ b/src/assets/icons/logo-small.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="32" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.94531 11.4453C0.664062 9.58594 0.0234375 6.9375 0.0234375 3.5V0.101562H9.25781L26.6953 19.2031C27.6797 20.2969 28.3359 21.2188 28.6641 21.9688C28.9922 22.7188 29.2344 23.4062 29.3906 24.0312C29.7344 25.2812 29.9062 26.8203 29.9062 28.6484V32H20.9297L2.01562 11.4453H1.94531ZM19.7578 10.1094C19.7578 5.8125 20.4219 3.01562 21.75 1.71875C22.4531 1.03125 23.3672 0.59375 24.4922 0.40625C25.6328 0.203125 27.0156 0.101562 28.6406 0.101562H29.9062V3.80469C29.9062 7.13281 29.0312 9.35938 27.2812 10.4844C26.0312 11.2969 23.9297 11.7031 20.9766 11.7031H19.7578V10.1094ZM0.0234375 28.3438C0.0234375 25.0156 0.898438 22.7812 2.64844 21.6406C3.89844 20.8438 6 20.4453 8.95312 20.4453H10.1719V22.0391C10.1719 26.3828 9.50781 29.1719 8.17969 30.4062C7.27344 31.25 5.95312 31.75 4.21875 31.9062C3.34375 31.9688 2.36719 32 1.28906 32H0.0234375V28.3438Z" fill="#4AD168"/>
+</svg>
diff --git a/src/assets/icons/mix.svg b/src/assets/icons/mix.svg
new file mode 100644
index 0000000..e37728e
--- /dev/null
+++ b/src/assets/icons/mix.svg
@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 6H4C3.46957 6 2.96086 6.21071 2.58579 6.58579C2.21071 6.96086 2 7.46957 2 8V28C2 28.5304 2.21071 29.0391 2.58579 29.4142C2.96086 29.7893 3.46957 30 4 30H32C32.5304 30 33.0391 29.7893 33.4142 29.4142C33.7893 29.0391 34 28.5304 34 28V8C34 7.46957 33.7893 6.96086 33.4142 6.58579C33.0391 6.21071 32.5304 6 32 6V6ZM4 28V8H32V28H4Z" fill="white"/>
+<path d="M13.3301 13.35C12.4365 13.352 11.5636 13.6187 10.8216 14.1166C10.0796 14.6145 9.50185 15.3211 9.16127 16.1472C8.8207 16.9733 8.73261 17.8818 8.90814 18.7579C9.08368 19.6341 9.51495 20.4385 10.1475 21.0696C10.78 21.7008 11.5854 22.1303 12.4619 22.3039C13.3385 22.4775 14.2468 22.3874 15.0721 22.045C15.8974 21.7026 16.6028 21.1232 17.099 20.3801C17.5952 19.637 17.8601 18.7635 17.8601 17.87C17.8574 16.6703 17.379 15.5206 16.5297 14.6733C15.6805 13.8259 14.5298 13.35 13.3301 13.35V13.35ZM13.3301 20.79C12.753 20.788 12.1894 20.6151 11.7105 20.293C11.2317 19.971 10.859 19.5143 10.6395 18.9805C10.42 18.4468 10.3636 17.86 10.4774 17.2942C10.5912 16.7285 10.8701 16.2091 11.2789 15.8017C11.6876 15.3944 12.2079 15.1173 12.7741 15.0054C13.3402 14.8935 13.9268 14.9519 14.4598 15.1732C14.9928 15.3945 15.4482 15.7688 15.7686 16.2488C16.0891 16.7288 16.2601 17.2929 16.2601 17.87C16.2601 18.2543 16.1842 18.6348 16.0368 18.9897C15.8895 19.3447 15.6735 19.667 15.4013 19.9383C15.1291 20.2096 14.806 20.4244 14.4506 20.5706C14.0952 20.7168 13.7144 20.7913 13.3301 20.79V20.79Z" fill="white"/>
+<path d="M23.62 13.35C22.726 13.35 21.8521 13.6151 21.1088 14.1118C20.3655 14.6084 19.7862 15.3143 19.444 16.1403C19.1019 16.9662 19.0124 17.875 19.1868 18.7518C19.3612 19.6286 19.7917 20.434 20.4239 21.0661C21.056 21.6983 21.8614 22.1287 22.7382 22.3032C23.615 22.4776 24.5238 22.388 25.3497 22.0459C26.1756 21.7038 26.8816 21.1245 27.3782 20.3812C27.8749 19.6379 28.14 18.764 28.14 17.87C28.1373 16.672 27.6603 15.5239 26.8132 14.6768C25.9661 13.8297 24.8179 13.3526 23.62 13.35V13.35ZM23.62 20.79C23.0425 20.79 22.4779 20.6187 21.9977 20.2979C21.5175 19.977 21.1433 19.521 20.9222 18.9874C20.7012 18.4539 20.6434 17.8668 20.7561 17.3003C20.8688 16.7339 21.1469 16.2136 21.5552 15.8052C21.9636 15.3969 22.4839 15.1188 23.0503 15.0061C23.6167 14.8934 24.2039 14.9513 24.7374 15.1723C25.271 15.3933 25.727 15.7675 26.0479 16.2477C26.3687 16.7279 26.54 17.2925 26.54 17.87C26.54 18.6444 26.2323 19.3871 25.6847 19.9348C25.1371 20.4824 24.3944 20.79 23.62 20.79V20.79Z" fill="white"/>
+<path d="M6 11V23.55H8V12H29.34V10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/pin.svg b/src/assets/icons/pin.svg
new file mode 100644
index 0000000..818e36e
--- /dev/null
+++ b/src/assets/icons/pin.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.803 4.385C14.766 2.354 17.45 1.889 19.039 3.478L24.522 8.961C26.111 10.551 25.646 13.234 23.615 14.196L18.225 16.75C17.8189 16.9424 17.5024 17.2836 17.341 17.703L15.752 21.833C15.6474 22.105 15.4764 22.3466 15.2547 22.5359C15.033 22.7251 14.7676 22.8559 14.4825 22.9165C14.1974 22.9771 13.9016 22.9656 13.6221 22.8829C13.3426 22.8002 13.0882 22.649 12.882 22.443L9.75 19.31L4.06 25H3V23.94L8.69 18.25L5.558 15.118C5.352 14.9118 5.20076 14.6575 5.118 14.378C5.03523 14.0986 5.02357 13.8029 5.08406 13.5178C5.14456 13.2327 5.2753 12.9673 5.46441 12.7455C5.65353 12.5238 5.89503 12.3527 6.167 12.248L10.297 10.659C10.717 10.498 11.058 10.181 11.25 9.775L13.803 4.385V4.385ZM17.978 4.539C17.7797 4.34069 17.5367 4.19293 17.2694 4.10817C17.002 4.02341 16.7183 4.00414 16.442 4.05198C16.1656 4.09981 15.9048 4.21335 15.6816 4.38304C15.4583 4.55272 15.2791 4.77357 15.159 5.027L12.606 10.417C12.2487 11.1713 11.615 11.7592 10.836 12.059L6.706 13.648C6.66707 13.6629 6.63247 13.6872 6.60535 13.7188C6.57822 13.7505 6.55944 13.7884 6.55069 13.8291C6.54195 13.8698 6.54353 13.9121 6.55528 13.9521C6.56704 13.9921 6.5886 14.0285 6.618 14.058L13.942 21.382C13.9715 21.4114 14.0078 21.433 14.0477 21.4449C14.0876 21.4567 14.1299 21.4583 14.1706 21.4497C14.2113 21.4411 14.2492 21.4224 14.2809 21.3954C14.3126 21.3684 14.337 21.3339 14.352 21.295L15.941 17.165C16.2405 16.3857 16.8285 15.7515 17.583 15.394L22.973 12.841C23.2266 12.721 23.4476 12.5417 23.6174 12.3184C23.7873 12.095 23.9009 11.8341 23.9487 11.5576C23.9966 11.2812 23.9772 10.9972 23.8923 10.7298C23.8075 10.4624 23.6595 10.2193 23.461 10.021L17.978 4.54V4.539Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/playlist.svg b/src/assets/icons/playlist.svg
new file mode 100644
index 0000000..f2af27b
--- /dev/null
+++ b/src/assets/icons/playlist.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 15C3.75 14.7514 3.84877 14.5129 4.02459 14.3371C4.2004 14.1613 4.43886 14.0625 4.6875 14.0625H18.75C18.9986 14.0625 19.2371 14.1613 19.4129 14.3371C19.5887 14.5129 19.6875 14.7514 19.6875 15C19.6875 15.2486 19.5887 15.4871 19.4129 15.6629C19.2371 15.8387 18.9986 15.9375 18.75 15.9375H4.6875C4.43886 15.9375 4.2004 15.8387 4.02459 15.6629C3.84877 15.4871 3.75 15.2486 3.75 15ZM4.6875 8.4375H25.3125C25.5611 8.4375 25.7996 8.33873 25.9754 8.16291C26.1512 7.9871 26.25 7.74864 26.25 7.5C26.25 7.25136 26.1512 7.0129 25.9754 6.83709C25.7996 6.66127 25.5611 6.5625 25.3125 6.5625H4.6875C4.43886 6.5625 4.2004 6.66127 4.02459 6.83709C3.84877 7.0129 3.75 7.25136 3.75 7.5C3.75 7.74864 3.84877 7.9871 4.02459 8.16291C4.2004 8.33873 4.43886 8.4375 4.6875 8.4375ZM28.3944 13.6332L23.7069 12.227C23.5669 12.185 23.4191 12.1763 23.2751 12.2016C23.1312 12.2269 22.9951 12.2856 22.8779 12.3728C22.7606 12.4601 22.6654 12.5735 22.5998 12.7041C22.5342 12.8347 22.5 12.9788 22.5 13.125V19.2545C21.7852 18.842 20.9543 18.6769 20.1362 18.7848C19.318 18.8927 18.5583 19.2676 17.9749 19.8512C17.3915 20.4349 17.017 21.1948 16.9095 22.013C16.802 22.8312 16.9675 23.662 17.3803 24.3766C17.7932 25.0912 18.4302 25.6495 19.1928 25.9651C19.9553 26.2807 20.8006 26.3359 21.5977 26.122C22.3947 25.9082 23.099 25.4373 23.6011 24.7824C24.1033 24.1275 24.3753 23.3252 24.375 22.5V14.385L27.8556 15.4291C27.9736 15.465 28.0976 15.4772 28.2204 15.465C28.3432 15.4528 28.4623 15.4166 28.571 15.3583C28.6798 15.3 28.7759 15.2208 28.854 15.1252C28.932 15.0297 28.9905 14.9197 29.0259 14.8015C29.0614 14.6833 29.0731 14.5593 29.0606 14.4366C29.048 14.3139 29.0113 14.1948 28.9527 14.0863C28.894 13.9777 28.8145 13.8819 28.7187 13.8041C28.6229 13.7264 28.5127 13.6683 28.3944 13.6332ZM13.125 21.5625H4.6875C4.43886 21.5625 4.2004 21.6613 4.02459 21.8371C3.84877 22.0129 3.75 22.2514 3.75 22.5C3.75 22.7486 3.84877 22.9871 4.02459 23.1629C4.2004 23.3387 4.43886 23.4375 4.6875 23.4375H13.125C13.3736 23.4375 13.6121 23.3387 13.7879 23.1629C13.9637 22.9871 14.0625 22.7486 14.0625 22.5C14.0625 22.2514 13.9637 22.0129 13.7879 21.8371C13.6121 21.6613 13.3736 21.5625 13.125 21.5625Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg
new file mode 100644
index 0000000..309f959
--- /dev/null
+++ b/src/assets/icons/settings.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.275 27.5H12.725C12.4399 27.5 12.1634 27.4026 11.9412 27.2239C11.7191 27.0452 11.5647 26.796 11.5037 26.5175L10.995 24.1625C10.3163 23.8651 9.67277 23.4933 9.07623 23.0538L6.77998 23.785C6.50818 23.8717 6.21491 23.8628 5.94888 23.7598C5.68284 23.6568 5.46004 23.4659 5.31748 23.2188L3.03748 19.28C2.89641 19.0327 2.84346 18.7448 2.88728 18.4634C2.93111 18.1821 3.06911 17.924 3.27873 17.7313L5.05998 16.1063C4.97897 15.3701 4.97897 14.6274 5.05998 13.8912L3.27873 12.27C3.06882 12.0772 2.93062 11.8188 2.88679 11.5372C2.84296 11.2556 2.89609 10.9675 3.03748 10.72L5.31248 6.77875C5.45504 6.53164 5.67784 6.34074 5.94388 6.23773C6.20991 6.13473 6.50318 6.12583 6.77498 6.2125L9.07123 6.94375C9.37623 6.71875 9.69373 6.50875 10.0212 6.31875C10.3375 6.14125 10.6625 5.98 10.995 5.83625L11.505 3.48375C11.5657 3.20525 11.7198 2.95586 11.9417 2.77694C12.1636 2.59801 12.4399 2.5003 12.725 2.5H17.275C17.56 2.5003 17.8364 2.59801 18.0583 2.77694C18.2802 2.95586 18.4343 3.20525 18.495 3.48375L19.01 5.8375C19.6883 6.13487 20.3314 6.50674 20.9275 6.94625L23.225 6.215C23.4966 6.12865 23.7896 6.13771 24.0554 6.2407C24.3211 6.34369 24.5437 6.53441 24.6862 6.78125L26.9612 10.7225C27.2512 11.2312 27.1512 11.875 26.72 12.2713L24.9387 13.8962C25.0197 14.6324 25.0197 15.3751 24.9387 16.1112L26.72 17.7362C27.1512 18.1337 27.2512 18.7763 26.9612 19.285L24.6862 23.2262C24.5437 23.4734 24.3209 23.6643 24.0548 23.7673C23.7888 23.8703 23.4955 23.8792 23.2237 23.7925L20.9275 23.0612C20.3314 23.5004 19.6883 23.8719 19.01 24.1687L18.495 26.5175C18.434 26.7958 18.2798 27.0449 18.058 27.2236C17.8361 27.4022 17.5598 27.4998 17.275 27.5ZM9.52498 20.2863L10.55 21.0363C10.7812 21.2063 11.0212 21.3625 11.2712 21.505C11.5062 21.6413 11.7462 21.7638 11.995 21.875L13.1612 22.3862L13.7325 25H16.27L16.8412 22.385L18.0075 21.8738C18.5162 21.6488 19 21.37 19.4487 21.0413L20.4737 20.2913L23.0262 21.1037L24.295 18.9062L22.3162 17.1025L22.4562 15.8375C22.5187 15.2838 22.5187 14.725 22.4562 14.1725L22.3162 12.9075L24.2962 11.1L23.0262 8.90125L20.475 9.71375L19.4487 8.96375C18.9997 8.63336 18.5165 8.35217 18.0075 8.125L16.8412 7.61375L16.27 5H13.7325L13.1575 7.615L11.995 8.125C11.4852 8.34826 11.0018 8.62747 10.5537 8.9575L9.52748 9.7075L6.97748 8.895L5.70623 11.1L7.68498 12.9012L7.54498 14.1675C7.48248 14.7212 7.48248 15.28 7.54498 15.8325L7.68498 17.0975L5.70623 18.9013L6.97498 21.0987L9.52498 20.2863ZM14.995 20C13.6689 20 12.3971 19.4732 11.4594 18.5355C10.5218 17.5979 9.99498 16.3261 9.99498 15C9.99498 13.6739 10.5218 12.4021 11.4594 11.4645C12.3971 10.5268 13.6689 10 14.995 10C16.3211 10 17.5928 10.5268 18.5305 11.4645C19.4682 12.4021 19.995 13.6739 19.995 15C19.995 16.3261 19.4682 17.5979 18.5305 18.5355C17.5928 19.4732 16.3211 20 14.995 20ZM14.995 12.5C14.5054 12.5005 14.0268 12.6447 13.6185 12.9148C13.2101 13.1848 12.8901 13.5688 12.698 14.0191C12.5059 14.4694 12.4503 14.9662 12.5379 15.4478C12.6256 15.9295 12.8528 16.3747 13.1913 16.7284C13.5297 17.0821 13.9646 17.3287 14.4419 17.4375C14.9192 17.5463 15.418 17.5125 15.8763 17.3405C16.3346 17.1684 16.7323 16.8655 17.0201 16.4694C17.3078 16.0734 17.4729 15.6016 17.495 15.1125V15.6125V15C17.495 14.337 17.2316 13.7011 16.7627 13.2322C16.2939 12.7634 15.658 12.5 14.995 12.5Z" fill="white"/>
+</svg>
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index 17da4cf..5605888 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -1,39 +1,124 @@
 <template>
-  <div id="nav-container">
+  <div class="nav-container">
     <router-link :to="{ name: 'Home' }">
-      <div id="home-button">
-        <div id="home-icon"></div>
+      <div class="nav-button" id="home-button">
+        <div class="nav-icon" id="home-icon"></div>
         <span id="text">Home</span>
       </div>
     </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="album-button">
+        <div class="nav-icon" id="album-icon"></div>
+        <span id="text">Albums</span>
+      </div>
+    </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="artists-button">
+        <div class="nav-icon" id="artists-icon"></div>
+        <span id="text">Artists</span>
+      </div>
+    </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="playlists-button">
+        <div class="nav-icon" id="playlists-icon"></div>
+        <span id="text">Playlist</span>
+      </div>
+    </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="mixes-button">
+        <div class="nav-icon" id="mixes-icon"></div>
+        <span id="text">Mixes</span>
+      </div>
+    </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="folders-button">
+        <div class="nav-icon" id="folders-icon"></div>
+        <span id="text">Folders</span>
+      </div>
+    </router-link>
   </div>
 </template>
 
-<script>
-export default {};
-</script>
-
 <style>
-#nav-container {
+.nav-container {
   color: #fff;
 }
 
-#nav-container #home-button {
+.nav-container .nav-button {
   display: flex;
   align-items: center;
-  justify-content: start;
+  justify-content: flex-start;
+  background-color: transparent;
+  height: 100%;
+  padding: 10px;
 }
-#nav-container #home-button #home-icon {
-  height: 30px;
-  width: 30px;
-  background-image: url(../../assets/icons/home.svg);
+
+@media (max-width: 1000px) {
+  .nav-container .nav-button {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-container .nav-button .nav-icon {
+    margin-left: calc(100% - 20px*2);
+  }
+
+  .nav-container span {
+    font-size: small;
+  }
+}
+
+.nav-container .nav-button:hover {
+  background-color: rgba(220, 20, 60, 0.5);
+}
+
+.nav-container .nav-button .nav-icon {
+  height: 24px;
+  width: 24px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   margin-right: 0.5em;
 }
+.nav-container #home-button #home-icon {
+  background-image: url(../../assets/icons/home.svg);
+}
 
-#nav-container #home-button #text {
+.nav-container #album-button #album-icon {
+  background-image: url(../../assets/icons/album.svg);
+}
+
+.nav-container #home-button #text {
   margin-top: 5px;
 }
+
+.nav-container #artists-button #artists-icon {
+  background-image: url(../../assets/icons/artist.svg);
+}
+
+.nav-container #playlists-button #playlists-icon {
+  background-image: url(../../assets/icons/playlist.svg);
+}
+
+.nav-container #mixes-button #mixes-icon {
+  background-image: url(../../assets/icons/mix.svg);
+}
+
+.nav-container #folders-button #folders-icon {
+  background-image: url(../../assets/icons/folder.svg);
+}
+
+.nav-container #folders-button #text {
+  margin-top: 5px;
+}
+
+.nav-container hr {
+  /* color: transparent; */
+  display: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/LeftSidebar/PinnedStuff.vue b/src/components/LeftSidebar/PinnedStuff.vue
new file mode 100644
index 0000000..1214f2b
--- /dev/null
+++ b/src/components/LeftSidebar/PinnedStuff.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="nav-container hidden" id="pinned-container">
+    <div>
+      <div class="nav-button" id="pinned-button">
+        <!-- <div class="nav-icon" id="pinned-icon"></div> -->
+        <span id="text">Quick access</span>
+      </div>
+    </div>
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="album-button">
+        <div class="nav-icon" id="album-icon"></div>
+        <span id="text">Legends Never Die</span>
+      </div>
+    </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="album-button">
+        <div class="nav-icon" id="album-icon"></div>
+        <span id="text">The Party Never Ends</span>
+      </div>
+    </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="artists-button">
+        <div class="nav-icon" id="artists-icon"></div>
+        <span id="text">Juice WRLD</span>
+      </div>
+    </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="playlists-button">
+        <div class="nav-icon" id="playlists-icon"></div>
+        <span id="text">Juice WRLD Discography</span>
+      </div>
+    </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="mixes-button">
+        <div class="nav-icon" id="mixes-icon"></div>
+        <span id="text">Lil Peep Radio</span>
+      </div>
+    </router-link>
+    <hr />
+    <router-link :to="{ name: 'Home' }">
+      <div class="nav-button" id="folders-button">
+        <div class="nav-icon" id="folders-icon"></div>
+        <span id="text">Ngogoyo ya Kamarú</span>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<style>
+.hidden {
+  display: none;
+}
+
+#pinned-container .nav-button {
+  color: rgba(255, 255, 255, 0.671);
+}
+
+#pinned-container .nav-button:hover {
+  background-color: rgba(5, 80, 150, 0.322);
+}
+
+#pinned-container .nav-button .nav-icon {
+  height: 20px;
+  width: 20px;
+}
+
+#pinned-container #album-button #album-icon {
+  background-image: url(../../assets/icons/album.svg);
+}
+
+#pinned-container #home-button #text {
+  margin-top: 5px;
+}
+
+#pinned-container #artists-button #artists-icon {
+  background-image: url(../../assets/icons/artist.svg);
+}
+
+#pinned-container #playlists-button #playlists-icon {
+  background-image: url(../../assets/icons/playlist.svg);
+}
+
+#pinned-container #mixes-button #mixes-icon {
+  background-image: url(../../assets/icons/mix.svg);
+}
+
+#pinned-container #folders-button #folders-icon {
+  background-image: url(../../assets/icons/folder.svg);
+}
+
+#pinned-container #pinned-button #pinned-icon {
+  background-image: url(../../assets/icons/pin.svg);
+  width: 20px;
+  height: 20px;
+}
+
+#pinned-container #pinned-button #text {
+  text-transform: uppercase;
+  font-weight: 1000;
+  font-size: small;
+  font-style: italic;
+}
+
+#pinned-container #pinned-button:hover {
+  background-color: transparent;
+}
+
+#pinned-container #folders-button #text {
+  margin-top: 5px;
+}
+
+#pinned-container hr {
+  color: transparent;
+}
+
+#pinned-container .seperator {
+  color: var(--grey);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8f69495..a636b6d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -14,3 +14,10 @@ export default {
   },
 };
 </script>
+
+<style>
+  .home {
+    padding-left: 20px;
+    text-align: center;
+  }
+</style>
\ No newline at end of file