ui: more than 4 footer groups

Author: davidstackio

playground/nuxt.config.ts

@@ -43,16 +43,34 @@ export default defineNuxtConfig({
           title: 'Company',
           links: [
             { text: 'About', to: '/about' },
+            { text: 'Team', to: '/team' },
             { text: 'Careers', to: '/careers' },
+          ],
+        },
+        {
+          title: 'Support',
+          links: [
             { text: 'Contact', to: '/contact' },
+            { text: 'Documentation', to: '/docs' },
+            { text: 'Help', to: '/help' },
           ],
         },
         {
           title: 'Resources',
           links: [
             { text: 'Blog', to: '/blog' },
-            { text: 'Documentation', to: '/docs' },
-            { text: 'Help', to: '/help' },
+            { text: 'Podcast', to: '/podcast' },
+            { text: 'Free Guide', to: '/guide' },
+          ],
+        },
+        {
+          title: 'Ecosystem',
+          links: [
+            { text: 'Partners', to: '/partners' },
+            { text: 'Affiliates', to: '/affiliates' },
+            { text: 'Themes', to: '/themes' },
+            { text: 'Plugins', to: '/plugins' },
+            { text: 'Integrations', to: '/integrations' },
           ],
         },
       ],

src/runtime/components/app/AppFooter.vue

@@ -21,7 +21,7 @@ const footerSecondaryLinks = nuxtifyConfig.navigation?.altSecondary
         <!-- Brand -->
         <v-col
           cols="12"
-          :lg="footerPrimaryLinks?.length === 4 ? 3 : 4"
+          :lg="footerPrimaryLinks && footerPrimaryLinks?.length >= 4 ? 3 : 4"
         >
           <!-- Logo -->
           <AppLogo dark />
@@ -35,40 +35,44 @@ const footerSecondaryLinks = nuxtifyConfig.navigation?.altSecondary
         <v-spacer />
 
         <!-- Primary Links -->
-        <v-col
-          v-for="group in footerPrimaryLinks"
-          :key="group.title"
-          cols="6"
-          md="3"
-          lg="2"
-        >
-          <p class="text-body-1 font-weight-bold mb-3">
-            {{ group.title }}
-          </p>
-          <div
-            v-for="link in group.links"
-            :key="link.text"
-          >
-            <v-btn
-              :to="link.to"
-              :href="link.href"
-              variant="text"
-              :active="false"
-              :ripple="false"
-              :target="link.openInNew ? '_blank' : undefined"
-              :rel="link.openInNew ? 'noopener nofollow' : undefined"
-              class="px-0"
+        <v-col :lg="footerPrimaryLinks && footerPrimaryLinks?.length >= 4 ? 9 : 8">
+          <v-row>
+            <v-col
+              v-for="group in footerPrimaryLinks"
+              :key="group.title"
+              cols="6"
+              md="3"
+              lg="3"
             >
-              {{ link.text }}
-              <v-icon
-                v-if="link.openInNew"
-                :icon="mdiArrowTopRight"
-                size="small"
-                color="grey"
-                class="ml-1"
-              />
-            </v-btn>
-          </div>
+              <p class="text-body-1 font-weight-bold mb-3">
+                {{ group.title }}
+              </p>
+              <div
+                v-for="link in group.links"
+                :key="link.text"
+              >
+                <v-btn
+                  :to="link.to"
+                  :href="link.href"
+                  variant="text"
+                  :active="false"
+                  :ripple="false"
+                  :target="link.openInNew ? '_blank' : undefined"
+                  :rel="link.openInNew ? 'noopener nofollow' : undefined"
+                  class="px-0"
+                >
+                  {{ link.text }}
+                  <v-icon
+                    v-if="link.openInNew"
+                    :icon="mdiArrowTopRight"
+                    size="small"
+                    color="grey"
+                    class="ml-1"
+                  />
+                </v-btn>
+              </div>
+            </v-col>
+          </v-row>
         </v-col>
       </v-row>