feat: split settings button from a profile component

src/lib/components/sidebar/Profile.svelte

@@ -1,14 +1,8 @@
 <script lang="ts">
-  import { stateStore } from "$lib/stores/StateStore"
-  import Icon from "@iconify/svelte"
+  import SettingsButton from "$lib/components/sidebar/SettingsButton.svelte"
 
   export let name = "Guest"
   export let profilePic = "/guest.png"
-
-  function openSettings() {
-    $stateStore.showSettings = true
-  }
-
 </script>
 
 
@@ -19,11 +13,7 @@
         </span>
     <span class="side-profile-name">{name}</span>
   </a>
-  <button class="side-profile-opt" on:click={openSettings}>
-    <i class="vertical-center">
-      <Icon icon="iwwa:option-horizontal" />
-    </i>
-  </button>
+  <SettingsButton />
 </div>
 
 <style>
@@ -69,17 +59,4 @@
     font-size: 16px;
     color: white;
   }
-
-  .side-profile-opt {
-    position: absolute;
-    z-index: 999;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    top: 50%;
-    right: 5%;
-    transform: translate(0, -50%);
-    color: white;
-    font-size: 24px;
-  }
 </style>

src/lib/components/sidebar/SettingsButton.svelte

@@ -0,0 +1,27 @@
+<script>
+  import Icon from "@iconify/svelte"
+  import { stateStore } from "$lib/stores/StateStore"
+
+  function openSettings() {
+    $stateStore.showSettings = true
+  }
+</script>
+
+<div class={$$props.class}>
+  <button class="side-profile-opt" on:click={openSettings}>
+    <i class="vertical-center">
+      <Icon icon="iwwa:option-horizontal" />
+    </i>
+  </button>
+</div>
+
+<style>
+  .side-profile-opt {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: white;
+    font-size: 1.6rem;
+    margin: 4px;
+  }
+</style>