diff --git a/examples/nuxt-app/test/features/site/shared-elements.feature b/examples/nuxt-app/test/features/site/shared-elements.feature index 3d8493ab7a..7e82d6594d 100644 --- a/examples/nuxt-app/test/features/site/shared-elements.feature +++ b/examples/nuxt-app/test/features/site/shared-elements.feature @@ -73,6 +73,10 @@ Feature: Shared site elements Then the footer nav section with title "Level 1 - Item 2" should have the following links | text | url | | Level 1 - Item 2 | /level-1-item-2 | + Then the footer nav section with title "Connect with us" should have the following links + | text | url | + | Facebook | https://www.facebook.com/ | + | LinkedIn | https://www.linkedin.com/ | Then the footer should have the following links | text | url | | Footer link 1 | /footer-link-1 | diff --git a/examples/nuxt-app/test/fixtures/site/shared-elements.json b/examples/nuxt-app/test/fixtures/site/shared-elements.json index df511c1e48..97d61a9a19 100644 --- a/examples/nuxt-app/test/fixtures/site/shared-elements.json +++ b/examples/nuxt-app/test/fixtures/site/shared-elements.json @@ -41,6 +41,22 @@ } } }, + "socialLinks": [ + { + "id": "social_link-0", + "text": "Facebook", + "url": "https://www.facebook.com/", + "icon": "icon-facebook", + "iconColour": "currentColor" + }, + { + "id": "social_link-1", + "text": "LinkedIn", + "url": "https://www.linkedin.com/", + "icon": "icon-linkedin", + "iconColour": "currentColor" + } + ], "menus": { "menuMain": [ { diff --git a/packages/nuxt-ripple/components/TideBaseLayout.vue b/packages/nuxt-ripple/components/TideBaseLayout.vue index 38d9966cef..87439df571 100644 --- a/packages/nuxt-ripple/components/TideBaseLayout.vue +++ b/packages/nuxt-ripple/components/TideBaseLayout.vue @@ -147,15 +147,20 @@ const showBreadcrumbs = computed(() => route.path !== '/') const showDraftAlert = computed(() => props.page?.status === 'draft') const footerNav = computed(() => { - const footerNav = props.site?.menus.menuFooter || [] - return [ - ...footerNav, - { - text: 'Connect with us', - id: '__footer_connect_with_us', - items: props.site?.socialLinks - } - ] + const menuMain = props.site?.menus.menuMain || [] + + if (props.site?.socialLinks?.length) { + return [ + ...menuMain, + { + text: 'Connect with us', + id: '__footer_connect_with_us', + items: props.site?.socialLinks + } + ] + } + + return menuMain }) const nuxtApp = useNuxtApp() diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts index 7b69a17816..602ad6d4e1 100644 --- a/packages/ripple-tide-api/types.d.ts +++ b/packages/ripple-tide-api/types.d.ts @@ -46,6 +46,7 @@ export interface TideSiteData { twitter: any og: any } + socialLinks: TideMenuItem[] menus: { menuMain: TideMenuItem[] menuFooter: TideMenuItem[]