Merge pull request #9 from wisemen-digital/feature/simple_footer

[FEATURE]: Simple footer
wisemen-digital · Jun 26, 2024 · 5f29166 · 5f29166
2 parents 61cbfe8 + 9415b52
commit 5f29166
Show file tree

Hide file tree

Showing 25 changed files with 362 additions and 60 deletions.
diff --git a/app/components/footer/FooterAddress.vue b/app/components/footer/FooterAddress.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { COMPANY_INFO } from '@base/constants/company-info/companyInfo.constant'
+
+const { t } = useI18n()
+
+const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${COMPANY_INFO.street}_${COMPANY_INFO.postalCode}_${COMPANY_INFO.city}`
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <p class="font-medium text-neutral-400">
+      {{ t('footer.address') }}
+    </p>
+    <div class="flex flex-col">
+      <a
+        :href="googleMapsUrl"
+        class="group rounded focus-ring"
+      >
+        <p class="text-foreground group-hover:underline">
+          {{ COMPANY_INFO.street }}
+        </p>
+        <p class=" text-foreground  group-hover:underline">
+          {{ `${COMPANY_INFO.postalCode} ${COMPANY_INFO.city}` }}
+        </p>
+      </a>
+
+      <a
+        :href="`tel:${COMPANY_INFO.phoneNumber}`"
+        class="rounded text-foreground focus-ring hover:underline"
+      >
+        {{ COMPANY_INFO.phoneNumber }}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/app/components/footer/FooterCopyright.vue b/app/components/footer/FooterCopyright.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const CURRENT_YEAR = new Date().getFullYear()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="bg-primary">
+    <div class="container mx-auto flex flex-col gap-1 bg-primary px-4 py-2 text-caption text-white lg:flex-row lg:gap-6">
+      <p>
+        {{ t('footer.copyright', { year: CURRENT_YEAR }) }}
+      </p>
+      <a
+        href="/"
+        target="_blank"
+        class="rounded focus-ring hover:underline focus:underline"
+      >
+        {{ t('footer.privacy_policy') }}
+      </a>
+      <a
+        href="/"
+        target="_blank"
+        class="rounded focus-ring hover:underline focus:underline"
+      >
+        {{ t('footer.cookie_policy') }}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/app/components/footer/FooterLink.vue b/app/components/footer/FooterLink.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { NavigationMenuLink } from 'radix-vue'
+
+import type { NavigationLink } from '~/types/navigation/navigationLink.type'
+
+defineProps<NavigationLink>()
+</script>
+
+<template>
+  <NavigationMenuLink as-child>
+    <NuxtLinkLocale
+      :to="to"
+      active-class="link-active"
+      class="group rounded text-subtext font-medium text-foreground focus-ring"
+    >
+      <div>
+        <slot />
+      </div>
+      <div class="h-px w-full bg-transparent duration-200" />
+    </NuxtLinkLocale>
+  </NavigationMenuLink>
+</template>
diff --git a/app/components/footer/FooterLinks.vue b/app/components/footer/FooterLinks.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { FOOTER_LINKS } from '~/constants/footer/footerLinks.constant'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <p class="font-medium text-neutral-400">
+      {{ t('footer.links') }}
+    </p>
+    <div class="flex flex-col">
+      <FooterLink
+        v-for="menuItem in FOOTER_LINKS"
+        v-bind="menuItem"
+        :key="menuItem.title"
+      >
+        {{ menuItem.title }}
+      </FooterLink>
+    </div>
+  </div>
+</template>
diff --git a/app/components/footer/FooterLogo.vue b/app/components/footer/FooterLogo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <NuxtLinkLocale
+    :to="{
+      name: 'index',
+    }"
+    class="w-full max-w-48 rounded py-2 focus-ring"
+  >
+    {{ t('todo.logo') }}
+  </NuxtLinkLocale>
+</template>
diff --git a/app/components/footer/FooterSocials.vue b/app/components/footer/FooterSocials.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { SOCIAL_INFO } from '@base/constants/company-info/socialInfo.constant'
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <NuxtLink
+      v-for="social in SOCIAL_INFO"
+      :key="social.label"
+      :to="social.url"
+      target="_blank"
+      class="flex size-8 items-center justify-center rounded-full bg-background focus-ring"
+    >
+      <AppIcon :icon="social.icon" />
+    </NuxtLink>
+  </div>
+</template>
diff --git a/app/components/footer/TheFooter.vue b/app/components/footer/TheFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <footer class="w-screen border-t border-solid border-primary/10 bg-neutral-100">
+    <div>
+      <div class="container mx-auto grid w-full gap-8 px-4 py-12 lg:grid-cols-2 lg:items-center lg:justify-center lg:gap-0">
+        <div class="flex w-full flex-col gap-2 lg:flex-row lg:gap-12">
+          <FooterLogo />
+          <FooterSocials />
+        </div>
+        <div class="flex w-full flex-col justify-end gap-32 text-subtext lg:flex-row">
+          <FooterLinks />
+          <FooterAddress />
+        </div>
+      </div>
+    </div>
+    <FooterCopyright />
+  </footer>
+</template>
diff --git 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'
 </script>
 
 <template>
@@ -13,7 +13,7 @@ import { NAVIGATION_LINKS } from '~/constants/header/navigationLinks.constant'
       class="flex items-center gap-3"
     >
       <template
-        v-for="menuItem in NAVIGATION_LINKS"
+        v-for="menuItem in HEADER_LINKS"
         :key="menuItem.title"
       >
         <HeaderNavigationMenuLink v-bind="menuItem">

diff --git a/app/components/header/HeaderNavigationMenuLink.vue b/app/components/header/HeaderNavigationMenuLink.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { NavigationMenuLink } from 'radix-vue'
 
-import type { NavigationLink } from '~/constants/header/navigationLinks.constant'
+import type { NavigationLink } from '~/types/navigation/navigationLink.type'
 
 defineProps<NavigationLink>()
 </script>

diff --git a/app/constants/footer/footerLinks.constant.ts b/app/constants/footer/footerLinks.constant.ts
@@ -0,0 +1,16 @@
+import type { NavigationLink } from '~/types/navigation/navigationLink.type'
+
+export const FOOTER_LINKS = [
+  {
+    title: 'Home',
+    to: {
+      name: 'index',
+    },
+  },
+  {
+    title: 'Login',
+    to: {
+      name: 'auth-login',
+    },
+  },
+] satisfies NavigationLink[]
diff --git a/app/constants/header/headerLinks.constant.ts b/app/constants/header/headerLinks.constant.ts
@@ -0,0 +1,16 @@
+import type { NavigationLink } from '~/types/navigation/navigationLink.type'
+
+export const HEADER_LINKS = [
+  {
+    title: 'Home',
+    to: {
+      name: 'index',
+    },
+  },
+  {
+    title: 'Login',
+    to: {
+      name: 'auth-login',
+    },
+  },
+] satisfies NavigationLink[]
diff --git a/app/constants/header/navigationLinks.constant.ts b/app/constants/header/navigationLinks.constant.ts
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -2,9 +2,10 @@
   <div>
     <div class="flex min-h-screen flex-col">
       <TheHeader />
-      <div class="container relative z-0 mx-auto flex w-full flex-1 flex-col items-center justify-center overflow-x-hidden px-4">
+      <div class="container relative z-0 mx-auto flex w-full flex-1 flex-col items-center justify-center px-4">
         <slot />
       </div>
     </div>
+    <TheFooter />
   </div>
 </template>
diff --git 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/app/types/navigation/navigationLink.type.ts b/app/types/navigation/navigationLink.type.ts
@@ -0,0 +1,7 @@
+import type { TypedRouteLocationRaw } from '@typed-router'
+
+export interface NavigationLink {
+  title: string
+  isTargetBlank?: boolean
+  to: TypedRouteLocationRaw
+}
diff --git 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;
 }
diff --git a/layers/base/components/core/icon/AppAsyncIcon.vue b/layers/base/components/core/icon/AppAsyncIcon.vue
@@ -23,7 +23,6 @@ const svgComponent = shallowRef<Component | null>(null)
 async function setIcon(): Promise<void> {
   const resolvedComponent = await icons[props.icon]
 
-  // @ts-expect-error TODO fix this
   svgComponent.value = resolvedComponent.default
 }
 

diff --git 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',
+  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
@@ -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
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.37533 2.33335C3.24791 2.33335 2.33366 3.2476 2.33366 4.37502V9.62735C2.33366 10.7536 3.24674 11.6667 4.37299 11.6667H9.62766C10.754 11.6667 11.667 10.7535 11.667 9.62794V4.37269C11.667 3.24644 10.7539 2.33335 9.62766 2.33335H4.37533ZM1.16699 4.37502C1.16699 2.60327 2.60358 1.16669 4.37533 1.16669H9.62766C11.3982 1.16669 12.8337 2.6021 12.8337 4.37269V9.62794C12.8337 11.398 11.3982 12.8334 9.62766 12.8334H4.37299C2.60241 12.8334 1.16699 11.3979 1.16699 9.62735V4.37502Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.8916 7.52498C5.8916 7.20282 6.15277 6.94165 6.47493 6.94165H9.62493C9.9471 6.94165 10.2083 7.20282 10.2083 7.52498C10.2083 7.84715 9.9471 8.10832 9.62493 8.10832H6.47493C6.15277 8.10832 5.8916 7.84715 5.8916 7.52498Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.94141 6.44873C6.94141 5.2714 7.89616 4.31665 9.07349 4.31665H9.62474C9.94691 4.31665 10.2081 4.57782 10.2081 4.89998C10.2081 5.22215 9.94691 5.48332 9.62474 5.48332H9.07349C8.54049 5.48332 8.10807 5.91573 8.10807 6.44873V12.25C8.10807 12.5722 7.84691 12.8333 7.52474 12.8333C7.20257 12.8333 6.94141 12.5722 6.94141 12.25V6.44873Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>