feat: vertical tabs for right sidebars

packages/hoppscotch-app/pages/index.vue

@@ -61,25 +61,32 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <aside>
-        <SmartTabs styles="sticky bg-primary z-10 top-0">
-          <SmartTab
-            :id="'history'"
-            :label="`${$t('tab.history')}`"
-            :selected="true"
-          >
-            <History ref="historyComponent" :page="'rest'" />
-          </SmartTab>
+      <SmartTabs styles="sticky bg-primary z-10 top-0" vertical>
+        <SmartTab
+          :id="'history'"
+          icon="clock"
+          :label="`${$t('tab.history')}`"
+          :selected="true"
+        >
+          <History ref="historyComponent" :page="'rest'" />
+        </SmartTab>
 
-          <SmartTab :id="'collections'" :label="`${$t('tab.collections')}`">
-            <Collections />
-          </SmartTab>
+        <SmartTab
+          :id="'collections'"
+          icon="folder"
+          :label="`${$t('tab.collections')}`"
+        >
+          <Collections />
+        </SmartTab>
 
-          <SmartTab :id="'env'" :label="`${$t('environment.title')}`">
-            <Environments />
-          </SmartTab>
-        </SmartTabs>
-      </aside>
+        <SmartTab
+          :id="'env'"
+          icon="layers"
+          :label="`${$t('environment.title')}`"
+        >
+          <Environments />
+        </SmartTab>
+      </SmartTabs>
     </Pane>
     <SmartConfirmModal
       :show="confirmSync"

packages/hoppscotch-app/pages/settings.vue

@@ -397,7 +397,7 @@ export default defineComponent({
 
       showLogin: false,
 
-      active: getLocalConfig("THEME_COLOR") || "blue",
+      active: getLocalConfig("THEME_COLOR") || "indigo",
       confirmRemove: false,
     }
   },