chore: minor fixes and improvements

components/app/Sidenav.vue

@@ -14,7 +14,7 @@
         <div v-if="navigation.svg" class="h-4 w-4">
           <SmartIcon :name="navigation.svg" class="svg-icons" />
         </div>
-        <span>{{ navigation.title }}</span>
+        <span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
       </NuxtLink>
     </nav>
     <!-- <nav
@@ -57,32 +57,34 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
+import { useSetting } from "~/newstore/settings"
 // import { defineActionHandler } from "~/helpers/actions"
 
 export default defineComponent({
-  // setup() {
-  // const showSearch = ref(false)
-  // const showSupport = ref(false)
-  // const showShare = ref(false)
+  setup() {
+    // const showSearch = ref(false)
+    // const showSupport = ref(false)
+    // const showShare = ref(false)
 
-  // defineActionHandler("modals.search.toggle", () => {
-  //   showSearch.value = !showSearch.value
-  // })
+    // defineActionHandler("modals.search.toggle", () => {
+    //   showSearch.value = !showSearch.value
+    // })
 
-  // defineActionHandler("modals.support.toggle", () => {
-  //   showSupport.value = !showSupport.value
-  // })
+    // defineActionHandler("modals.support.toggle", () => {
+    //   showSupport.value = !showSupport.value
+    // })
 
-  // defineActionHandler("modals.share.toggle", () => {
-  //   showShare.value = !showShare.value
-  // })
+    // defineActionHandler("modals.share.toggle", () => {
+    //   showShare.value = !showShare.value
+    // })
 
-  //   return {
-  //     showSearch,
-  //     showSupport,
-  //     showShare,
-  //   }
-  // },
+    return {
+      //     showSearch,
+      //     showSupport,
+      //     showShare,
+      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
+    }
+  },
   data() {
     return {
       primaryNavigation: [

components/app/SlideOver.vue

@@ -15,7 +15,6 @@
         flex flex-col
         h-full
         max-w-full
-        shadow-xl
         transform
         transition
         top-0
@@ -27,7 +26,7 @@
         fixed
         overflow-auto
       "
-      :class="show ? 'translate-x-0' : 'translate-x-full'"
+      :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
     >
       <slot name="content"></slot>
     </aside>

components/collections/ImportExport.vue

@@ -64,7 +64,7 @@
               icon="assignment_turned_in"
               :label="$t('export.create_secret_gist')"
               @click.native="
-                createCollectionGist
+                createCollectionGist()
                 $refs.options.tippy().hide()
               "
             />

components/collections/graphql/ImportExport.vue

@@ -44,7 +44,7 @@
               icon="assignment_turned_in"
               :label="$t('export.create_secret_gist')"
               @click.native="
-                createCollectionGist
+                createCollectionGist()
                 $refs.options.tippy().hide()
               "
             />

components/landing/Hero.vue

@@ -3,6 +3,7 @@
     <div class="flex flex-col mt-16 items-center justify-center">
       <h2
         class="
+          font-bold
           text-accent text-center
           leading-none
           tracking-tighter
@@ -15,6 +16,7 @@
       </h2>
       <h3
         class="
+          font-extrabold
           my-4
           text-center text-secondaryDark
           leading-none
@@ -35,7 +37,6 @@
         <ButtonPrimary
           label="Get Started"
           icon="arrow_forward"
-          rounded
           reverse
           large
           @click.native="showLogin = true"
@@ -43,17 +44,17 @@
         <ButtonSecondary
           to="https://github.com/hoppscotch/hoppscotch"
           blank
+          filled
           outline
           label="GitHub"
           svg="github"
           large
-          rounded
           :shortcut="['30k Stars']"
         />
       </div>
-      <!-- <LandingStats /> -->
+      <LandingStats />
+      <LandingScreenshot />
     </div>
-    <div class="flex flex-col items-center justify-center"></div>
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>

components/landing/Screenshot.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="
+      bg-gradient-to-r
+      from-gradientFrom
+      via-gradientVia
+      to-gradientTo
+      flex flex-col
+      items-center
+      justify-center
+    "
+  >
+    <img
+      src="images/screenshots/light_rest.png"
+      alt="Screenshot"
+      class="rounded-lg ring-dividerLight mt-8 max-w-5/6 ring-4"
+    />
+  </div>
+</template>

components/smart/LoadingIndicator.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="text-sm text-secondaryLight animate-pulse">
+    <AppLogo class="h-8 w-8" />
+  </div>
+</template>