fix(footer): responsive (#609)

* refactor(tailwind.config): remove footer spacing and add footer minHeight * refactor(footer): update spacing and rules for max nb of icons
nuxt-themes · Aug 1, 2022 · c97e04e · c97e04e
1 parent 8a3a133
commit c97e04e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 20 deletions.
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -192,14 +192,14 @@ export default {
       },
       spacing: {
         header: 'var(--header-height)',
-        footer: 'var(--footer-height)',
         page: 'var(--page-height)',
       },
       maxWidth: {
         '8xl': 'var(--page-max-width)',
       },
       minHeight: {
         page: 'var(--page-height)',
+        footer: 'var(--footer-height)',
       },
     },
   },

diff --git a/components/app/Footer.vue b/components/app/Footer.vue
@@ -3,31 +3,44 @@ import { computed, useDocus } from '#imports'
 
 const { theme } = useDocus()
 
+const socialIcons = ref(null)
+
 const icons = computed(() => theme.value?.footer?.icons || [])
+
+const nbSocialIcons = computed(() => (socialIcons.value ? Object.keys(theme.value?.socials).length : 0))
+
+const nbIcons = computed(() => nbSocialIcons.value + icons.value.length)
 </script>
 
 <template>
-  <footer class="py-6 border-t h-footer u-border-gray-100 sm:py-0">
-    <Container padded class="flex flex-col items-center justify-between h-full gap-4 sm:flex-row">
-      <a v-if="theme?.footer?.credits" :href="theme.footer.credits.href" rel="noopener" target="_blank" class="flex items-center u-text-gray-500 hover:u-text-gray-700">
-        <Component :is="theme.footer.credits.icon || 'Logo'" class="w-5 h-5 mr-2 fill-current" />
-        <p class="text-sm font-semibold">{{ theme.footer.credits.text }}</p>
-      </a>
-
-      <div class="flex items-center gap-4">
-        <a
-          v-for="icon in icons"
-          :key="icon.label"
-          rel="noopener"
-          :aria-label="icon.label"
-          :href="icon.href"
-          target="_blank"
-          class="flex items-center text-sm font-medium u-text-gray-500 hover:u-text-gray-700"
-        >
-          <Icon :name="icon.icon || icon.component" />
+  <footer class="border-t u-bg-white u-border-gray-100 h-footer">
+    <Container padded>
+      <div class="flex flex-col items-center h-full gap-4 py-5 sm:flex-row sm:justify-between sm:gap-x-16">
+        <a v-if="theme?.footer?.credits" :href="theme.footer.credits.href" rel="noopener" target="_blank" class="flex items-center u-text-gray-500 hover:u-text-gray-700">
+          <Component :is="theme.footer.credits.icon || 'Logo'" class="w-5 h-5 mr-2 fill-current" />
+          <p class="text-sm font-semibold">{{ theme.footer.credits.text }}</p>
         </a>
-        <SocialIcons />
+
+        <div class="flex items-center gap-4">
+          <a
+            v-for="icon in icons.slice(0, 6 - nbSocialIcons)"
+            :key="icon.label"
+            rel="noopener"
+            :aria-label="icon.label"
+            :href="icon.href"
+            target="_blank"
+            class="flex items-center text-sm font-medium u-text-gray-500 hover:u-text-gray-700"
+          >
+            <Icon :name="icon.icon || icon.component" class="w-5 h-5" />
+          </a>
+          <SocialIcons ref="socialIcons" />
+        </div>
       </div>
+      <Alert v-if="nbIcons > 6" type="info">
+        <div>
+          <p>Please consider to override Footer.vue if you want to add more icons</p>
+        </div>
+      </Alert>
     </Container>
   </footer>
 </template>