we played with the colors and add wallet.vue

src/views/main/SideBar.vue

@@ -1,10 +1,10 @@
 <template>
-  <aside class="relative">
+  <aside class="relative h-full">
 
-    <nav class="flex items-center justify-between pt-3">
-
-      <div>
-        <h2 class="text-center">Subscriptions</h2>
+    <nav class="h-full grid grid-rows-[60px_1fr_auto]">
+      <div></div>
+      <div class="pt-4 px-4 ">
+        <h2>Subscriptions</h2>
 
         <ul class="space-y">
           <li>
@@ -50,13 +50,14 @@
               </div>
             </RouterLink>
 
-            <div class="h-10"></div>
           </li>
         </ul>
-        <SiteMenu></SiteMenu>
       </div>
 
 
+      <div class="border-t w-full  py-10 ">
+        <SiteMenu></SiteMenu>
+      </div>
     </nav>
 
   </aside>
@@ -64,12 +65,11 @@
 
 <style scoped>
 .nav-button {
-  @apply rounded p-1 m-1;
-
+  @apply rounded p-1 m-1 text-gray-800 font-sans;
 }
 
 .nav-button:hover {
-  @apply bg-purple-400;
+  @apply bg-[#903175] text-gray-200 ;
 }
 
 h2 {