Replace mobile menu design and fix header overflow

dwhdelft.nl/components/layout/Header.vue

@@ -36,23 +36,18 @@ nl:
 <script setup>
 import DWHLogo from '#shared/assets/images/dwh_logo.svg'
 
-defineProps({
-  small: { type: Boolean, default: false },
-  bg: { type: String },
-})
-
 const { t } = useT()
 const menu = t('menu')
 </script>
 
 <template>
-  <LayoutBaseHeader :menu="menu" :small="small" :bg="bg">
+  <LayoutBaseHeader :menu="menu">
     <template #logo>
       <DWHLogo class="h-14 fill-current text-white" />
     </template>
     <template #background>
-      <div class="absolute top-0 bottom-0 w-full h-full overflow-hidden blur-sm">
-        <img src="../../assets/images/photos/cover.jpg" class="w-full h-full object-cover opacity-50" />
+      <div class="absolute top-0 bottom-0 w-full h-full overflow-hidden">
+        <img src="../../assets/images/photos/cover.jpg" class="w-full h-full object-cover opacity-50 blur-sm" />
       </div>
     </template>
     <slot />

dwhdelft.nl/components/layout/SmallHeader.vue

@@ -1,11 +1,5 @@
-<script setup>
-defineProps({
-  bg: { type: String },
-})
-</script>
-
 <template>
-  <LayoutHeader :small="true" :bg="bg">
+  <LayoutHeader small>
     <h1 class="text-4xl text-white font-normal">
       <slot />
     </h1>

dwhdelft.nl/pages/book.vue

@@ -32,7 +32,7 @@ const route = useRoute()
 </script>
 
 <template>
-  <LayoutSmallHeader bg="bg-brand-450">{{ t('title') }}</LayoutSmallHeader>
+  <LayoutSmallHeader triangleClass="border-brand-450">{{ t('title') }}</LayoutSmallHeader>
 
   <section class="bg-brand-450 relative">
     <ElementsContainer class="lg:flex py-8">

dwhdelft.nl/pages/jongenout.vue

@@ -67,7 +67,7 @@ const instagramChannels = [
 </script>
 
 <template>
-  <LayoutSmallHeader bg="bg-[#5e4fff]">
+  <LayoutSmallHeader triangleClass="border-[#5e4fff]">
     {{ t('title') }}
   </LayoutSmallHeader>
 

outsite.nl/components/layout/Header.vue

@@ -13,6 +13,7 @@ en:
       url: 'https://dwhdelft.nl/book'
     - title: Contact
       url: '#contact'
+  goto: Go to
 nl:
   menu:
     - title: Home
@@ -27,29 +28,30 @@ nl:
       url: 'https://dwhdelft.nl/book'
     - title: Contact
       url: '#contact'
+  goto: Ga naar
 </i18n>
 
 <script setup>
+import { IconArrowRight } from '@iconify-prerendered/vue-zondicons'
 import OutsiteLogo from '#shared/assets/images/outsite_logo.svg'
 import DWHLogo from '#shared/assets/images/dwh_logo.svg'
 
-defineProps({
-  small: { type: Boolean, default: false },
-  bg: { type: String },
-})
-
 const { t } = useT()
 const menu = t('menu')
 </script>
 
 <template>
-  <LayoutBaseHeader :menu="menu" :small="small" :bg="bg">
+  <LayoutBaseHeader :menu="menu">
     <template #logo>
       <OutsiteLogo class="h-16 fill-current text-white" />
     </template>
     <template #mobile-menu-extension>
-      <a href="https://dwhdelft.nl" class="block py-2 px-1">
-        <DWHLogo class="h-8 fill-current" />
+      <a href="https://dwhdelft.nl" class="flex justify-between items-center space-x-2 py-3 hover:text-gray-500">
+        <div class="flex items-center space-x-2">
+          <span>{{ t('goto') }}</span>
+          <DWHLogo class="h-8 fill-current" />
+        </div>
+        <IconArrowRight class="w-4 h-4" />
       </a>
     </template>
     <template #menu-extension>
@@ -58,8 +60,8 @@ const menu = t('menu')
       </a>
     </template>
     <template #background>
-      <div class="absolute top-0 bottom-0 w-full h-full overflow-hidden blur-sm">
-        <video id="headervid" preload="metadata" autoplay muted loop class="opacity-50">
+      <div class="absolute top-0 bottom-0 w-full h-full overflow-hidden">
+        <video id="headervid" preload="metadata" autoplay muted loop class="opacity-50 blur-sm">
           <source src="../../assets/images/layout/outsite_web_bg.mp4" type="video/mp4" />
         </video>
       </div>

outsite.nl/components/layout/SmallHeader.vue

@@ -1,11 +1,5 @@
-<script setup>
-defineProps({
-  bg: { type: String },
-})
-</script>
-
 <template>
-  <LayoutHeader :small="true" :bg="bg">
+  <LayoutHeader small>
     <h1 class="text-4xl text-white font-normal">
       <slot />
     </h1>

outsite.nl/pages/highlights.vue

@@ -10,7 +10,7 @@ const { t } = useT()
 </script>
 
 <template>
-  <LayoutSmallHeader bg="bg-gray-200">{{ t('title') }}</LayoutSmallHeader>
+  <LayoutSmallHeader triangleClass="border-gray-200">{{ t('title') }}</LayoutSmallHeader>
 
   <LayoutStraightSection contentBackgroundClass="bg-gray-200" contentClass="pt-8 pb-16">
     <PagesHighlights :excerpts="false" />

outsite.nl/pages/testimonials.vue

@@ -16,7 +16,7 @@ const imageOrDefault = (name) => image(name.toLowerCase()) || image('default')
 </script>
 
 <template>
-  <LayoutSmallHeader bg="bg-brand-100">{{ t('title') }}</LayoutSmallHeader>
+  <LayoutSmallHeader triangleClass="border-brand-100">{{ t('title') }}</LayoutSmallHeader>
 
   <LayoutStraightSection contentBackgroundClass="!bg-brand-100" contentClass="pt-8 pb-16 space-y-8">
     <ElementsActionCard

shared/components/layout/BaseHeader.vue

@@ -6,7 +6,7 @@ import GBFlag from '#shared/assets/images/layout/flags/gb.svg'
 const props = defineProps({
   menu: { type: Object, required: true },
   small: { type: Boolean, default: false },
-  bg: { type: String },
+  triangleClass: { type: String },
 })
 
 const { locale } = useT()
@@ -36,22 +36,22 @@ const showMenu = ref(false)
 </script>
 
 <template>
-  <header id="header" :class="[small ? 'header-small' : '', 'relative overflow-hidden bg-gray-700']">
+  <header id="header" :class="[small ? 'header-small' : '', 'relative bg-gray-700']">
     <nav class="absolute z-50 w-full mt-8">
       <ElementsContainer class="flex justify-between items-center relative">
         <nuxt-link :to="localePath('index')">
           <slot name="logo" />
         </nuxt-link>
         <div
-          v-show="showMenu"
-          class="lg:hidden absolute z-60 top-16 text-white backdrop-blur-xl bg-white bg-opacity-10 w-full -ml-4 p-2 space-y-1 text-lg font-semibold rounded-md transition-all"
+          v-if="showMenu"
+          class="lg:hidden absolute z-50 top-16 text-gray-800 backdrop-blur-xl bg-white bg-opacity-95 shadow-xl w-[calc(100vw-2rem)] px-4 py-1 text-xl rounded-md"
         >
           <nuxt-link
             v-for="item in menuItems"
             :key="item.url"
             :to="item.url"
-            class="block py-1 px-3 no-underline hover:bg-white hover:bg-opacity-90 hover:text-gray-800 transition-all rounded-full border border-opacity-25"
-            :class="isActive(item.url) && 'bg-white/10 rounded-full'"
+            class="block no-underline transition-all [&:not(:last-child)]:border-b border-[#e8e8e8] py-3"
+            :class="isActive(item.url) ? 'text-brand-800 font-bold' : 'hover:text-gray-500'"
           >
             {{ item.title }}
           </nuxt-link>
@@ -97,7 +97,7 @@ const showMenu = ref(false)
       </ElementsContainer>
     </nav>
     <slot name="background" />
-    <div :class="bg ? bg : 'bg-white'" class="hero" />
+    <div class="triangle-top absolute bottom-0" :class="triangleClass ? triangleClass : 'border-white'" />
     <div class="relative flex items-center h-full">
       <ElementsContainer class="mt-40 mb-48">
         <slot />
@@ -127,12 +127,8 @@ const showMenu = ref(false)
   }
 }
 
-.hero {
-  @apply absolute w-full;
-  transform: skewY(-7deg);
-  transform-origin: 0;
-  height: 100rem;
-  bottom: -100rem;
-  z-index: 0;
+.triangle-top {
+  border-bottom-width: 10.555vw; /* 38deg / 360deg * 100vw = 10.555 */
+  border-left: 100vw solid transparent;
 }
 </style>