refactor: improve the mobile layout. (#2153)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-app/components/app/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="bg-primary">
     <div class="flex justify-between">
       <div class="flex">
         <ButtonSecondary
@@ -166,7 +166,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
           svg="columns"
-          class="transform"
+          class="transform hidden sm:inline"
           :class="{ 'rotate-90': !COLUMN_LAYOUT }"
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -71,6 +71,7 @@ const primaryNavigation = [
   @apply flex flex-col flex-1;
   @apply items-center;
   @apply justify-center;
+  @apply bg-primary;
   @apply hover:(bg-primaryDark text-secondaryDark);
   @apply focus-visible:text-secondaryDark;