From d09b4deb52b4cd0c73039db91450302ce0515136 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 28 Dec 2022 02:12:56 +0100
Subject: [PATCH] fix: improve SSR for settings back button

---
 components/main/MainContent.vue      | 10 ++++++++--
 pages/settings/about/index.vue       |  6 +-----
 pages/settings/interface/index.vue   |  6 +-----
 pages/settings/language/index.vue    |  6 +-----
 pages/settings/preferences/index.vue |  6 +-----
 pages/settings/profile/index.vue     |  6 +-----
 pages/settings/users/index.vue       |  2 +-
 7 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 26975e9c..12748824 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 defineProps<{
-  back?: boolean
+  /**
+   * Show the back button on small screens
+   */
+  backOnSmallScreen?: boolean
 }>()
 </script>
 
@@ -12,7 +15,10 @@ defineProps<{
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>
-          <NuxtLink v-show="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
+          <NuxtLink
+            v-if="backOnSmallScreen" lg:hidden flex="~ gap1" items-center btn-text p-0
+            @click="$router.go(-1)"
+          >
             <div i-ri:arrow-left-line />
           </NuxtLink>
           <div truncate>
diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
index 0ea85068..4ae4b41d 100644
--- a/pages/settings/about/index.vue
+++ b/pages/settings/about/index.vue
@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.about.label') }}</span>
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
index 74549236..8a9c319e 100644
--- a/pages/settings/interface/index.vue
+++ b/pages/settings/interface/index.vue
@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.interface.label') }}</span>
diff --git a/pages/settings/language/index.vue b/pages/settings/language/index.vue
index 34cdc50e..3bf4a7ad 100644
--- a/pages/settings/language/index.vue
+++ b/pages/settings/language/index.vue
@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.language.label') }}</span>
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 77200c36..988706e4 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.preferences.label') }}</span>
diff --git a/pages/settings/profile/index.vue b/pages/settings/profile/index.vue
index c44f20fb..0e83ac24 100644
--- a/pages/settings/profile/index.vue
+++ b/pages/settings/profile/index.vue
@@ -1,9 +1,5 @@
-<script lang="ts" setup>
-const { lg } = breakpoints
-</script>
-
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.profile.label') }}</span>
diff --git a/pages/settings/users/index.vue b/pages/settings/users/index.vue
index 46370be4..2a81c2f9 100644
--- a/pages/settings/users/index.vue
+++ b/pages/settings/users/index.vue
@@ -63,7 +63,7 @@ async function importTokens() {
 </script>
 
 <template>
-  <MainContent :back="!lg">
+  <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.users.label') }}</span>