fix: icons positioning (#722)

* fix: move icons from header to footer; some cleanup

* cleanup

* update positioning after feedback

* add TODO comment back

* Update pnpm-lock.yaml

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

components/app/AppFooter.vue

@@ -15,33 +15,30 @@ const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value
         <p>{{ docus.footer.credits.text }}</p>
       </a>
 
-      <!-- Right -->
-      <div class="right">
-        <a
-          v-for="icon in icons.slice(0, 6 - nbSocialIcons)"
-          :key="icon.label"
-          rel="noopener"
-          :aria-label="icon.label"
-          :href="icon.href"
-          target="_blank"
-        >
+      <!-- Center -->
+      <div class="center">
+        <a v-for="icon in icons.slice(0, 6 - nbSocialIcons)" :key="icon.label" rel="noopener" :aria-label="icon.label"
+          :href="icon.href" target="_blank">
           <Icon :name="icon.icon || icon.component" />
         </a>
         <AppSocialIcons ref="socialIcons" />
       </div>
+
     </Container>
   </footer>
 </template>
 
 <style lang="ts" scoped>
 css({
   footer: {
-    height: '{docus.footer.height}',
-    display: 'flex',
-    alignItems: 'center',
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
     borderTopColor: '{color.gray.100}',
+    padding: '{docus.footer.padding}',
+
+    '@dark': {
+      borderTopColor: '{color.gray.900}'
+    },
 
     ':deep(.icon)': {
       width: '{space.4}',
@@ -61,40 +58,52 @@ css({
       },
     },
 
-    '@dark': {
-      borderTopColor: '{color.gray.900}'
-    },
-
     '.left': {
       display: 'flex',
       alignItems: 'center',
-
       p: {
         fontSize: '{fontSize.xs}',
         fontWeight: '{fontWeight.bold}'
       },
-
       '&-icon': {
         width: '{space.4}',
         fill: 'currentcolor',
         marginRight: '{space.2}',
       }
     },
 
-    '.right': {
+    '.center': {
       display: 'flex',
       alignItems: 'center',
       gap: '{space.4}'
     },
 
     '.footer-container': {
-      display: 'flex',
-      flexDirection: 'col',
-      alignItems: 'center',
-      height: '100%',
-      gap: '{space.4}',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+      justifyItems: 'center',
+      gap: '{space.2}',
+      '@sm': {
+        justifyItems: 'legacy',
+
+      },
+      '.left': {
+        gridColumn: 'span 12 / span 12',
+        '@sm': {
+          gridColumn: 'span 4 / span 4'
+        }
+      },
+      '.center': {
+        display: 'flex',
+        justifyContent: 'center',
+        gridColumn: 'span 12 / span 12',
+        '@sm': {
+          gridColumn: 'span 4 / span 4'
+        },
+        a: {
+          display: 'flex'
+        }
+      },
     }
   }
 })

components/app/AppHeader.vue

@@ -7,21 +7,23 @@ const hasDialog = computed(() => navigation.value?.length > 1)
 <template>
   <header :class="{ 'has-dialog': hasDialog, 'has-doc-search': hasDocSearch }">
     <Container>
-      <section class="left">
+      <div class="section left">
         <AppHeaderDialog v-if="hasDialog" />
         <AppHeaderLogo />
-      </section>
+      </div>
 
-      <section class="center">
+      <div class="section center">
         <AppHeaderLogo v-if="hasDialog" />
         <AppHeaderNavigation />
-      </section>
+      </div>
 
-      <section class="right">
-        <AppSearch v-if="hasDocSearch" />
+      <div class="section right">
+        <AppSearch v-if="hasDocSearch"/>
         <ThemeSelect />
-        <AppSocialIcons />
-      </section>
+        <div class="social-icons">
+          <AppSocialIcons />
+        </div>
+      </div>
     </Container>
   </header>
 </template>
@@ -71,7 +73,7 @@ css({
       gap: '2rem'
     },
 
-    section: {
+    '.section': {
       display: 'flex',
       alignItems: 'center',
       flex: 'none',
@@ -90,6 +92,14 @@ css({
         alignItems: 'center',
         flex: 'none',
         gap: '{space.4}',
+        '.social-icons': {
+          display: 'none',
+          '@md': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '{space.4}'
+          }
+        }
       }
     }
   }

components/app/AppHeaderDialog.vue

@@ -33,8 +33,8 @@ watch(visible, v => (v ? open() : close()))
           </button>
 
           <div class="icons">
-            <AppSocialIcons />
             <ThemeSelect />
+            <AppSocialIcons />
           </div>
         </div>
 

components/app/AppHeaderNavigation.vue

@@ -19,7 +19,7 @@ const isActive = (link: any) => (link.exact ? route.fullPath === link._path : ro
 </script>
 
 <template>
-  <nav>
+  <nav v-if="hasNavigation">
     <ul>
       <li
         v-for="link in tree"

components/app/AppSearch.vue

@@ -32,7 +32,6 @@ css({
       borderRadius: '{radii.md}',
       display: 'flex',
       alignItems: 'center',
-      fontSize: '{fontSize.sm}',
       color: '{color.gray.500}',
       borderStyle: 'solid',
       borderWidth: '1px',
@@ -55,20 +54,16 @@ css({
     },
     span: {
       '&:first-child': {
-        // hidden text-xs font-medium lg:block
-        display: 'none',
+        display: 'block',
         fontSize: '{fontSize.xs}',
         fontWeight: '{fontWeight.medium}',
-        '@lg': {
-          display: 'block'
-        }
       },
       '&:nth-child(2)': {
         flex: 'none',
         display: 'none',
         fontSize: '{fontSize.xs}',
         fontWeight: '{fontWeight.semibold}',
-        '@lg': {
+        '@sm': {
           display: 'block'
         }
       }

components/app/AppSocialIcons.vue

@@ -39,6 +39,7 @@ const icons = computed<any>(() => {
 <style lang="ts" scoped>
 css({
   a: {
+    display: 'flex',
     color: '{color.gray.500}',
 
     '@dark': {

components/app/ThemeSelect.vue

@@ -22,7 +22,7 @@ const onClick = () => {
 <style lang="ts" scoped>
 css({
   button: {
-    display: 'inline-block',
+    display: 'flex',
 
     color: '{color.gray.500}',
     '@dark': {

components/docs/DocsPageContent.vue

@@ -110,8 +110,7 @@ css({
   '.docs-page-content': {
     position: 'relative',
     display: 'flex',
-    flexDirection: 'column-reverse',
-    minHeight: '{docus.page.height}',
+    flexDirection: 'column',
     '@lg': {
       display: 'grid',
       gap: '{space.8}',
@@ -210,7 +209,6 @@ css({
       mx: 'calc(0px - {space.6})',
     },
     '@lg': {
-      maxHeight: '{docus.page.height}',
       gridColumn: 'span 2 / span 2',
       mx: 0,
       alignSelf: 'flex-start',

layouts/page.vue

@@ -17,7 +17,6 @@ css({
   '.page-layout': {
     display: 'flex',
     flexDirection: 'column',
-    minHeight: '{docus.page.height}',
     position: 'relative'
   }
 })