Merge pull request #50 from nuxt-themes/feat/improve-readability

clemcode · Aug 3, 2022 · c9db88e · c9db88e
2 parents d26aa77 + 1e4b5e7
commit c9db88e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 11 deletions.
diff --git a/components/AppLayout.vue b/components/AppLayout.vue
@@ -8,9 +8,9 @@ defineProps({
 </script>
 
 <template>
-  <div class="px-4 sm:px-0 max-w-sm mx-auto md:max-w-2xl lg:max-w-4xl">
+  <div class="max-w-sm px-4 mx-auto sm:px-0 md:max-w-2xl lg:max-w-4xl">
     <AppLoadingBar />
-    <Header />
+    <Header v-if="$theme.value.header" />
     <slot />
     <Footer v-if="$theme.value.footer" />
   </div>

diff --git a/components/Footer.vue b/components/Footer.vue
@@ -16,7 +16,8 @@ const placeItems = computed(() => {
 })
 
 const rowsNumber = computed(() => {
-  return [theme.value.footer.navigation, theme.value.footer.title, theme.value.footer.socials, theme.value.footer.socials?.message.length].reduce((acc, val) => {
+  const footer = theme.value.footer
+  return [footer.navigation, footer.title, footer.socials, footer.socials?.message.length].reduce((acc, val) => {
     return acc + (val ? 1 : 0)
   }, 0)
 })

diff --git a/components/Header.vue b/components/Header.vue
@@ -2,10 +2,6 @@
 const { navigation } = useContent()
 const theme = useTheme()
 
-const hasHeader = computed(() => {
-  return theme.value.header
-})
-
 const placeItems = computed(() => {
   switch (theme.value.header.position) {
     case 'left':
@@ -21,10 +17,7 @@ const placeItems = computed(() => {
 </script>
 
 <template>
-  <header
-    v-if="hasHeader"
-    class="relative"
-  >
+  <header class="relative">
     <ColorModeSwitch class="absolute top-6 md:top-8" :class="{'right-0' : theme.header.position === 'left'}" />
     <div
       class="grid h-32 grid-cols-1 grid-rows-2 py-6 mb-6 md:h-36 md:py-8 md:mb-8"