Merge pull request #8 from wisemen-digital/feature/simple_header

[FEATURE]: Simple header

app/components/header/HeaderActions.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="flex w-full items-center justify-end gap-2">
+    <HeaderProfile />
+    <TheLocaleSelector />
+  </div>
+</template>

app/components/header/HeaderLogo.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <NuxtLinkLocale
+      :to="{
+        name: 'index',
+      }"
+      class="grid w-40 place-items-center rounded-card p-2 focus-ring lg:w-52"
+    >
+      {{ t('todo.logo') }}
+    </NuxtLinkLocale>
+  </div>
+</template>

app/components/header/HeaderNavigationMenu.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  NavigationMenuList,
+  NavigationMenuRoot,
+} from 'radix-vue'
+
+import { NAVIGATION_LINKS } from '~/constants/header/navigationLinks.constant'
+</script>
+
+<template>
+  <NavigationMenuRoot>
+    <NavigationMenuList
+      class="flex items-center gap-3"
+    >
+      <template
+        v-for="menuItem in NAVIGATION_LINKS"
+        :key="menuItem.title"
+      >
+        <HeaderNavigationMenuLink v-bind="menuItem">
+          {{ menuItem.title }}
+        </HeaderNavigationMenuLink>
+        <HeaderNavigationMenuSpacer class="last:hidden" />
+      </template>
+    </NavigationMenuList>
+  </NavigationMenuRoot>
+</template>

app/components/header/HeaderNavigationMenuLink.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { NavigationMenuLink } from 'radix-vue'
+
+import type { NavigationLink } from '~/constants/header/navigationLinks.constant'
+
+defineProps<NavigationLink>()
+</script>
+
+<template>
+  <NavigationMenuLink as-child>
+    <NuxtLinkLocale
+      :to="to"
+      active-class="link-active"
+      class="group rounded px-1 text-subtext font-medium text-foreground focus-ring"
+    >
+      <div>
+        <slot />
+      </div>
+      <div class="h-px w-full bg-transparent duration-200 group-[.link-active]:bg-primary" />
+    </NuxtLinkLocale>
+  </NavigationMenuLink>
+</template>

app/components/header/HeaderNavigationMenuSpacer.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div
+    class="size-1 rounded-full bg-primary"
+  />
+</template>

app/components/header/HeaderProfile.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { CurrentUser } from '@auth/models/current-user/currentUser.model'
+import { useAuthStore } from '@auth/stores/auth.store'
+import { AppText } from '@wisemen/vue-core'
+import { PopoverClose } from 'radix-vue'
+
+const authStore = useAuthStore()
+const { t } = useI18n()
+const currentUser = computed<CurrentUser | null>(() => authStore.currentUser)
+
+function onLogout() {
+  void authStore.logout()
+}
+</script>
+
+<template>
+  <AppPopover
+    v-if="currentUser"
+    align="center"
+    hide-close-button
+    hide-arrow
+  >
+    <AppIconButton
+      :label="t('shared.settings')"
+      icon="profile"
+      class="flex-none rounded-full"
+    />
+    <template #content>
+      <AppCard class="min-w-80">
+        <div class="flex flex-col gap-4">
+          <AppText
+            class="font-medium"
+            variant="subtitle"
+          >
+            {{ t('shared.hello', { name: currentUser.firstName }) }}
+          </AppText>
+
+          <PopoverClose :as-child="true">
+            <AppButton
+              class="w-full"
+              @click="onLogout"
+            >
+              {{ t('shared.logout') }}
+            </AppButton>
+          </PopoverClose>
+        </div>
+      </AppCard>
+    </template>
+  </AppPopover>
+</template>

app/components/header/TheHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <header class="sticky top-0 border-b border-solid border-primary/10 bg-neutral-100 py-4">
+    <div class="container mx-auto hidden px-4 lg:block">
+      <div class="flex items-center justify-between lg:grid lg:grid-cols-3 lg:items-center lg:justify-center">
+        <HeaderNavigationMenu />
+        <HeaderLogo />
+        <HeaderActions />
+      </div>
+    </div>
+  </header>
+</template>

app/components/locale/TheLocaleSelector.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { translateLocale } from '@base/translations/locale.translate'
+import type { DropdownMenuItem } from '@base/types/core/dropdownMenuItem.type'
+import type { LocaleObject } from '@nuxtjs/i18n'
+import { AppIcon } from '@wisemen/vue-core'
+
+const { locale, locales } = useI18n()
+const switchLocalePath = useSwitchLocalePath()
+
+const availableLocales = computed<LocaleObject[]>(() => {
+  return locales.value.filter((i) => i.code !== locale.value)
+})
+
+const dropdownItems = computed<DropdownMenuItem[]>(() => {
+  return availableLocales.value.map((i) => ({
+    label: translateLocale(i.code),
+    type: 'option',
+    onSelect: () => {
+      void navigateTo(switchLocalePath(i.code))
+    },
+  }))
+})
+</script>
+
+<template>
+  <AppDropdownMenu
+    :items="dropdownItems"
+  >
+    <button class="flex items-center gap-1 px-2 py-1 font-medium uppercase text-foreground">
+      <span>
+        {{ locale }}
+      </span>
+      <AppIcon
+        icon="chevronDown"
+      />
+    </button>
+  </AppDropdownMenu>
+</template>

app/constants/header/navigationLinks.constant.ts

@@ -0,0 +1,22 @@
+import type { TypedRouteLocationRaw } from '@typed-router'
+
+export interface NavigationLink {
+  title: string
+  isTargetBlank?: boolean
+  to: TypedRouteLocationRaw
+}
+
+export const NAVIGATION_LINKS = [
+  {
+    title: 'Home',
+    to: {
+      name: 'index',
+    },
+  },
+  {
+    title: 'Login',
+    to: {
+      name: 'auth-login',
+    },
+  },
+] satisfies NavigationLink[]

app/layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
   <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">
         <slot />
       </div>

app/locales/nl.json

@@ -1,4 +1,4 @@
 {
-  "test.login.forgot_password": "Wachtwoord vergeten?"
-
+  "test.login.forgot_password": "Wachtwoord vergeten?",
+  "shared.hello": "Hallo, {name}!"
 }

app/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
-  middleware: 'auth-middleware',
+  // middleware: 'auth-middleware',
 })
 </script>
 

layers/base/components/core/popover/popover.style.ts

@@ -5,7 +5,7 @@ export const usePopoverStyle = tv({
   slots: {
     arrow: 'absolute left-1/2 size-4 -translate-x-1/2 -translate-y-3 rotate-45 rounded-sm bg-popover shadow-popover-shadow',
     arrowContainer: 'relative z-50 -mb-4 h-4 w-10 overflow-hidden',
-    closeButtonContainer: '!absolute right-0 top-0',
+    closeButtonContainer: '!absolute right-2 top-2',
     content: 'custom-popover-content z-popover rounded-popover bg-popover shadow-popover-shadow',
   },
 })

layers/base/icons/ProfileIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    viewBox="0 0 13 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.50065 1.25016C3.60116 1.25016 1.25065 3.60067 1.25065 6.50016C1.25065 7.79583 1.72001 8.98187 2.49797 9.89754C3.03256 9.24821 3.8428 8.8335 4.75065 8.8335H8.25065C9.15851 8.8335 9.96874 9.24821 10.5033 9.89754C11.2813 8.98188 11.7507 7.79583 11.7507 6.50016C11.7507 3.60067 9.40015 1.25016 6.50065 1.25016ZM10.7999 11.2636C12.1002 10.0893 12.9173 8.39016 12.9173 6.50016C12.9173 2.95634 10.0445 0.0834961 6.50065 0.0834961C2.95682 0.0834961 0.0839844 2.95634 0.0839844 6.50016C0.0839844 8.39016 0.901113 10.0893 2.20136 11.2636C2.20813 11.27 2.21506 11.2762 2.22216 11.2823C3.35748 12.2987 4.85688 12.9168 6.50065 12.9168C8.14442 12.9168 9.64382 12.2987 10.7791 11.2823C10.7862 11.2762 10.7932 11.27 10.7999 11.2636ZM9.65101 10.7003C9.33137 10.2747 8.82265 10.0002 8.25065 10.0002H4.75065C4.17865 10.0002 3.66993 10.2747 3.35029 10.7003C4.2278 11.3595 5.3186 11.7502 6.50065 11.7502C7.6827 11.7502 8.7735 11.3595 9.65101 10.7003ZM6.50065 3.29183C5.53415 3.29183 4.75065 4.07533 4.75065 5.04183C4.75065 6.00833 5.53415 6.79183 6.50065 6.79183C7.46715 6.79183 8.25065 6.00833 8.25065 5.04183C8.25065 4.07533 7.46715 3.29183 6.50065 3.29183ZM3.58398 5.04183C3.58398 3.431 4.88982 2.12516 6.50065 2.12516C8.11148 2.12516 9.41732 3.431 9.41732 5.04183C9.41732 6.65266 8.11148 7.9585 6.50065 7.9585C4.88982 7.9585 3.58398 6.65266 3.58398 5.04183Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

layers/base/icons/icons.ts

@@ -19,6 +19,7 @@ export interface BaseIcons {
   eyeSlash: Promise<Component>
   filterLines: Promise<Component>
   minus: Promise<Component>
+  profile: Promise<Component>
   search: Promise<Component>
   warning: Promise<Component>
 }
@@ -46,6 +47,7 @@ export const icons: AllIcons = {
   eyeSlash: import('@base/icons/EyeSlashIcon.vue'),
   filterLines: import('@base/icons/FilterLinesIcon.vue'),
   minus: import('@base/icons/MinusIcon.vue'),
+  profile: import('@base/icons/ProfileIcon.vue'),
   search: import('@base/icons/SearchIcon.vue'),
   warning: import('@base/icons/WarningIcon.vue'),
 }

layers/base/locales/nl.json

@@ -91,5 +91,10 @@
   "shared.phone": "Telefoonnummer",
   "shared.send": "Versturen",
   "validation.invalid_phone": "Ongeldig telefoonnummer",
-  "layouts.title": "Nuxt Template - {title}"
+  "layouts.title": "Nuxt Template - {title}",
+  "shared.logout": "Uitloggen",
+  "shared.settings": "Instellingen",
+  "locale.fr": "Frans",
+  "locale.nl": "Nederlands",
+  "locale.en": "Engels"
 }

nuxt.config.ts

@@ -20,6 +20,12 @@ export default defineNuxtConfig({
       ],
     },
   },
+  components: [
+    {
+      pathPrefix: false,
+      path: '@/components',
+    },
+  ],
   devtools: { enabled: true },
   future: {
     compatibilityVersion: 4,

package.json

@@ -20,7 +20,7 @@
     "@nuxtjs/i18n": "8.3.1",
     "@pinia/nuxt": "^0.5.1",
     "@tanstack/vue-query": "^5.45.0",
-    "@wisemen/vue-core": "^0.0.77",
+    "@wisemen/vue-core": "^0.0.78",
     "embla-carousel": "^8.1.5",
     "embla-carousel-vue": "^8.1.5",
     "formango": "^2.0.35",