refactor logo, bottom bar and perks.js

- add new logo
- add tsconfig.json
- move logo to new component
- update bottombar
- remove props from hotkeys and progress bar
- convert perks.js -> perks.ts

src/components/LeftSidebar/Navigation.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 const menus = [
   {
     name: "home",
@@ -53,9 +53,7 @@ const menus = [
 
 .side-nav-container {
   color: #fff;
-  margin-bottom: 1rem;
-  padding: 10px $small $small;
-  margin-top: 1rem;
+  margin: 1rem 0;
   text-transform: capitalize;
 
   .nav-button {
@@ -63,11 +61,10 @@ const menus = [
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
-    height: 100%;
-    padding: 0.6rem 0 0.6rem 0;
+    padding: 0.6rem 0;
 
     &:hover {
-      background-color: $gray;
+      background-color: $gray3;
     }
 
     .nav-icon {