From 47ffcda0ee1c8b267ec02f647682b9f047b05faa Mon Sep 17 00:00:00 2001 From: Robbe Date: Tue, 25 Jun 2024 17:21:21 +0200 Subject: [PATCH 1/2] feat: made a simple footer --- app/components/footer/FooterAddress.vue | 35 ++++++++++++++++++ app/components/footer/FooterCopyright.vue | 28 ++++++++++++++ app/components/footer/FooterLink.vue | 22 +++++++++++ app/components/footer/FooterLinks.vue | 22 +++++++++++ app/components/footer/FooterLogo.vue | 14 +++++++ app/components/footer/FooterSocials.vue | 17 +++++++++ app/components/footer/TheFooter.vue | 21 +++++++++++ app/layouts/default.vue | 3 +- app/locales/nl.json | 8 +++- layers/base/assets/styles/main.scss | 4 ++ .../company-info/companyInfo.constant.ts | 9 ++++- .../company-info/socialInfo.constant.ts | 30 +++++++++++++++ layers/base/icons/FacebookIcon.vue | 26 +++++++++++++ layers/base/icons/InstagramIcon.vue | 26 +++++++++++++ layers/base/icons/LinkedInIcon.vue | 32 ++++++++++++++++ layers/base/icons/TwitterIcon.vue | 14 +++++++ layers/base/icons/icons.ts | 37 ++++--------------- nuxt.config.ts | 4 ++ 18 files changed, 319 insertions(+), 33 deletions(-) create mode 100644 app/components/footer/FooterAddress.vue create mode 100644 app/components/footer/FooterCopyright.vue create mode 100644 app/components/footer/FooterLink.vue create mode 100644 app/components/footer/FooterLinks.vue create mode 100644 app/components/footer/FooterLogo.vue create mode 100644 app/components/footer/FooterSocials.vue create mode 100644 app/components/footer/TheFooter.vue create mode 100644 layers/base/constants/company-info/socialInfo.constant.ts create mode 100644 layers/base/icons/FacebookIcon.vue create mode 100644 layers/base/icons/InstagramIcon.vue create mode 100644 layers/base/icons/LinkedInIcon.vue create mode 100644 layers/base/icons/TwitterIcon.vue diff --git a/app/components/footer/FooterAddress.vue b/app/components/footer/FooterAddress.vue new file mode 100644 index 0000000..f704f47 --- /dev/null +++ b/app/components/footer/FooterAddress.vue @@ -0,0 +1,35 @@ + + + diff --git a/app/components/footer/FooterCopyright.vue b/app/components/footer/FooterCopyright.vue new file mode 100644 index 0000000..2f8070a --- /dev/null +++ b/app/components/footer/FooterCopyright.vue @@ -0,0 +1,28 @@ + + + diff --git a/app/components/footer/FooterLink.vue b/app/components/footer/FooterLink.vue new file mode 100644 index 0000000..56761d3 --- /dev/null +++ b/app/components/footer/FooterLink.vue @@ -0,0 +1,22 @@ + + + diff --git a/app/components/footer/FooterLinks.vue b/app/components/footer/FooterLinks.vue new file mode 100644 index 0000000..215e7e8 --- /dev/null +++ b/app/components/footer/FooterLinks.vue @@ -0,0 +1,22 @@ + + + diff --git a/app/components/footer/FooterLogo.vue b/app/components/footer/FooterLogo.vue new file mode 100644 index 0000000..9b8f944 --- /dev/null +++ b/app/components/footer/FooterLogo.vue @@ -0,0 +1,14 @@ + + + diff --git a/app/components/footer/FooterSocials.vue b/app/components/footer/FooterSocials.vue new file mode 100644 index 0000000..fa9735a --- /dev/null +++ b/app/components/footer/FooterSocials.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/components/footer/TheFooter.vue b/app/components/footer/TheFooter.vue new file mode 100644 index 0000000..14750c9 --- /dev/null +++ b/app/components/footer/TheFooter.vue @@ -0,0 +1,21 @@ + + + diff --git a/app/layouts/default.vue b/app/layouts/default.vue index cae7488..620d59c 100644 --- a/app/layouts/default.vue +++ b/app/layouts/default.vue @@ -2,9 +2,10 @@
-
+
+
diff --git a/app/locales/nl.json b/app/locales/nl.json index e3024fa..dba3315 100644 --- a/app/locales/nl.json +++ b/app/locales/nl.json @@ -1,4 +1,10 @@ { "test.login.forgot_password": "Wachtwoord vergeten?", - "shared.hello": "Hallo, {name}!" + "shared.hello": "Hallo, {name}!", + "footer.address": "Adres", + "footer.cookie_policy": "Cookie Policy", + "footer.copyright": "© {year} Alle rechten voorbehouden", + "footer.privacy_policy": "Privacy Policy", + "footer.service": "Service", + "footer.links": "Links" } diff --git a/layers/base/assets/styles/main.scss b/layers/base/assets/styles/main.scss index 8b364bf..cfc5acd 100644 --- a/layers/base/assets/styles/main.scss +++ b/layers/base/assets/styles/main.scss @@ -220,4 +220,8 @@ .focus-ring:focus-within { @apply ring-2 ring-offset-2 ring-ring outline-none duration-200; } +} + +body { + @apply bg-background overflow-x-hidden; } \ No newline at end of file diff --git a/layers/base/constants/company-info/companyInfo.constant.ts b/layers/base/constants/company-info/companyInfo.constant.ts index c42fe72..cad5d11 100644 --- a/layers/base/constants/company-info/companyInfo.constant.ts +++ b/layers/base/constants/company-info/companyInfo.constant.ts @@ -1,6 +1,13 @@ +export interface CompanyInfo { + city: string + phonenumber: string + postalCode: string + street: string +} + export const COMPANY_INFO = { city: 'TODO city', phonenumber: 'TODO phonenumber', postalCode: 'TODO postalcode', street: 'TODO street', -} as const +} satisfies CompanyInfo diff --git a/layers/base/constants/company-info/socialInfo.constant.ts b/layers/base/constants/company-info/socialInfo.constant.ts new file mode 100644 index 0000000..dec8829 --- /dev/null +++ b/layers/base/constants/company-info/socialInfo.constant.ts @@ -0,0 +1,30 @@ +import type { Icon } from '@base/icons/icons' + +export interface SocialInfo { + icon: Icon + label: string + url: string +} + +export const SOCIAL_INFO = [ + { + icon: 'linkedIn', + label: 'linkedin', + url: 'https://www.linkedin.com/', + }, + { + icon: 'facebook', + label: 'facebook', + url: 'https://www.facebook.com/', + }, + { + icon: 'instagram', + label: 'instagram', + url: 'https://www.instagram.com/', + }, + { + icon: 'twitter', + label: 'twitter', + url: 'https://www.twitter.com/', + }, +] satisfies SocialInfo[] diff --git a/layers/base/icons/FacebookIcon.vue b/layers/base/icons/FacebookIcon.vue new file mode 100644 index 0000000..b4cb109 --- /dev/null +++ b/layers/base/icons/FacebookIcon.vue @@ -0,0 +1,26 @@ + diff --git a/layers/base/icons/InstagramIcon.vue b/layers/base/icons/InstagramIcon.vue new file mode 100644 index 0000000..d56b4e7 --- /dev/null +++ b/layers/base/icons/InstagramIcon.vue @@ -0,0 +1,26 @@ + diff --git a/layers/base/icons/LinkedInIcon.vue b/layers/base/icons/LinkedInIcon.vue new file mode 100644 index 0000000..b503970 --- /dev/null +++ b/layers/base/icons/LinkedInIcon.vue @@ -0,0 +1,32 @@ + diff --git a/layers/base/icons/TwitterIcon.vue b/layers/base/icons/TwitterIcon.vue new file mode 100644 index 0000000..b1c2db7 --- /dev/null +++ b/layers/base/icons/TwitterIcon.vue @@ -0,0 +1,14 @@ + diff --git a/layers/base/icons/icons.ts b/layers/base/icons/icons.ts index 9626358..a59741c 100644 --- a/layers/base/icons/icons.ts +++ b/layers/base/icons/icons.ts @@ -1,34 +1,6 @@ -import type { Component } from 'vue' - -export interface BaseIcons { - alertCircle: Promise - arrowDown: Promise - arrowLeft: Promise - arrowRight: Promise - arrowUp: Promise - arrowUpDown: Promise - calendar: Promise - checkmark: Promise - checkmarkCircle: Promise - chevronDown: Promise - chevronLeft: Promise - chevronRight: Promise - chevronUp: Promise - close: Promise - eye: Promise - eyeSlash: Promise - filterLines: Promise - minus: Promise - profile: Promise - search: Promise - warning: Promise -} - export interface Icons {} -export type AllIcons = BaseIcons & Icons - -export const icons: AllIcons = { +export const icons = { alertCircle: import('@base/icons/AlertCircleIcon.vue'), arrowDown: import('@base/icons/ArrowDownIcon.vue'), arrowLeft: import('@base/icons/ArrowLeftIcon.vue'), @@ -45,13 +17,18 @@ export const icons: AllIcons = { close: import('@base/icons/CloseIcon.vue'), eye: import('@base/icons/EyeIcon.vue'), eyeSlash: import('@base/icons/EyeSlashIcon.vue'), + facebook: import('@base/icons/FacebookIcon.vue'), filterLines: import('@base/icons/FilterLinesIcon.vue'), + instagram: import('@base/icons/InstagramIcon.vue'), + linkedIn: import('@base/icons/LinkedInIcon.vue'), minus: import('@base/icons/MinusIcon.vue'), profile: import('@base/icons/ProfileIcon.vue'), search: import('@base/icons/SearchIcon.vue'), + twitter: import('@base/icons/TwitterIcon.vue'), warning: import('@base/icons/WarningIcon.vue'), -} +} as const +export type AllIcons = typeof icons export function extendIcons(customIcons: Icons): void { Object.assign(icons, customIcons) } diff --git a/nuxt.config.ts b/nuxt.config.ts index f42e17a..44e8320 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -25,6 +25,10 @@ export default defineNuxtConfig({ pathPrefix: false, path: '@/components', }, + { + pathPrefix: false, + path: '@/views', + }, ], devtools: { enabled: true }, future: { From 017cc57c8e9062f16025be92cf2f305f2f73c79a Mon Sep 17 00:00:00 2001 From: Robbe Date: Wed, 26 Jun 2024 13:26:23 +0200 Subject: [PATCH 2/2] chore: pr comments --- app/components/footer/FooterAddress.vue | 4 ++-- app/components/footer/FooterLink.vue | 2 +- app/components/footer/FooterLinks.vue | 4 ++-- .../header/HeaderNavigationMenu.vue | 4 ++-- .../header/HeaderNavigationMenuLink.vue | 2 +- app/constants/footer/footerLinks.constant.ts | 16 ++++++++++++++ app/constants/header/headerLinks.constant.ts | 16 ++++++++++++++ .../header/navigationLinks.constant.ts | 22 ------------------- app/types/navigation/navigationLink.type.ts | 7 ++++++ .../components/core/icon/AppAsyncIcon.vue | 1 - .../company-info/companyInfo.constant.ts | 4 ++-- 11 files changed, 49 insertions(+), 33 deletions(-) create mode 100644 app/constants/footer/footerLinks.constant.ts create mode 100644 app/constants/header/headerLinks.constant.ts delete mode 100644 app/constants/header/navigationLinks.constant.ts create mode 100644 app/types/navigation/navigationLink.type.ts diff --git a/app/components/footer/FooterAddress.vue b/app/components/footer/FooterAddress.vue index f704f47..51c6d70 100644 --- a/app/components/footer/FooterAddress.vue +++ b/app/components/footer/FooterAddress.vue @@ -25,10 +25,10 @@ const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${COMPANY - {{ COMPANY_INFO.phonenumber }} + {{ COMPANY_INFO.phoneNumber }}
diff --git a/app/components/footer/FooterLink.vue b/app/components/footer/FooterLink.vue index 56761d3..b791499 100644 --- a/app/components/footer/FooterLink.vue +++ b/app/components/footer/FooterLink.vue @@ -1,7 +1,7 @@ diff --git a/app/components/footer/FooterLinks.vue b/app/components/footer/FooterLinks.vue index 215e7e8..7b3eb89 100644 --- a/app/components/footer/FooterLinks.vue +++ b/app/components/footer/FooterLinks.vue @@ -1,5 +1,5 @@ @@ -11,7 +11,7 @@ const { t } = useI18n()

diff --git a/app/components/header/HeaderNavigationMenu.vue b/app/components/header/HeaderNavigationMenu.vue index 5b05a4b..cda01c4 100644 --- a/app/components/header/HeaderNavigationMenu.vue +++ b/app/components/header/HeaderNavigationMenu.vue @@ -4,7 +4,7 @@ import { NavigationMenuRoot, } from 'radix-vue' -import { NAVIGATION_LINKS } from '~/constants/header/navigationLinks.constant' +import { HEADER_LINKS } from '~/constants/header/headerLinks.constant'