From edc66b960ee5ea416b0e38b596b1cb734b592a13 Mon Sep 17 00:00:00 2001
From: Casper Boone <mail@casperboone.nl>
Date: Sat, 19 Oct 2024 16:13:20 +0200
Subject: [PATCH 1/2] Allow overfow on header element

Use `EmulatedSkewedSection` style of the triangle in the right corner.
---
 dwhdelft.nl/components/layout/Header.vue      | 13 +++++--------
 dwhdelft.nl/components/layout/SmallHeader.vue |  8 +-------
 dwhdelft.nl/pages/book.vue                    |  2 +-
 dwhdelft.nl/pages/jongenout.vue               |  2 +-
 outsite.nl/components/layout/Header.vue       | 11 +++--------
 outsite.nl/components/layout/SmallHeader.vue  |  8 +-------
 outsite.nl/pages/highlights.vue               |  2 +-
 outsite.nl/pages/testimonials.vue             |  2 +-
 shared/components/layout/BaseHeader.vue       | 16 ++++++----------
 9 files changed, 20 insertions(+), 44 deletions(-)

diff --git a/dwhdelft.nl/components/layout/Header.vue b/dwhdelft.nl/components/layout/Header.vue
index e043c967..774e57d8 100644
--- a/dwhdelft.nl/components/layout/Header.vue
+++ b/dwhdelft.nl/components/layout/Header.vue
@@ -29,6 +29,8 @@ nl:
       url: book
     - title: Andersblad
       url: andersblad
+    - title: Contact again
+      url: '/contact'
     - title: Contact
       url: '/contact'
 </i18n>
@@ -36,23 +38,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 />
diff --git a/dwhdelft.nl/components/layout/SmallHeader.vue b/dwhdelft.nl/components/layout/SmallHeader.vue
index 2fab0939..6cf95224 100644
--- a/dwhdelft.nl/components/layout/SmallHeader.vue
+++ b/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>
diff --git a/dwhdelft.nl/pages/book.vue b/dwhdelft.nl/pages/book.vue
index 0f003225..3d7e3112 100644
--- a/dwhdelft.nl/pages/book.vue
+++ b/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">
diff --git a/dwhdelft.nl/pages/jongenout.vue b/dwhdelft.nl/pages/jongenout.vue
index 96171b67..cb4f908d 100644
--- a/dwhdelft.nl/pages/jongenout.vue
+++ b/dwhdelft.nl/pages/jongenout.vue
@@ -67,7 +67,7 @@ const instagramChannels = [
 </script>
 
 <template>
-  <LayoutSmallHeader bg="bg-[#5e4fff]">
+  <LayoutSmallHeader triangleClass="border-[#5e4fff]">
     {{ t('title') }}
   </LayoutSmallHeader>
 
diff --git a/outsite.nl/components/layout/Header.vue b/outsite.nl/components/layout/Header.vue
index c80cbff7..93cca033 100644
--- a/outsite.nl/components/layout/Header.vue
+++ b/outsite.nl/components/layout/Header.vue
@@ -33,17 +33,12 @@ nl:
 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>
@@ -58,8 +53,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>
diff --git a/outsite.nl/components/layout/SmallHeader.vue b/outsite.nl/components/layout/SmallHeader.vue
index 2fab0939..6cf95224 100644
--- a/outsite.nl/components/layout/SmallHeader.vue
+++ b/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>
diff --git a/outsite.nl/pages/highlights.vue b/outsite.nl/pages/highlights.vue
index 9acdc2be..f4b9425b 100644
--- a/outsite.nl/pages/highlights.vue
+++ b/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" />
diff --git a/outsite.nl/pages/testimonials.vue b/outsite.nl/pages/testimonials.vue
index 8c7741e0..e53ece08 100644
--- a/outsite.nl/pages/testimonials.vue
+++ b/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
diff --git a/shared/components/layout/BaseHeader.vue b/shared/components/layout/BaseHeader.vue
index 2a04e90e..78d58995 100644
--- a/shared/components/layout/BaseHeader.vue
+++ b/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,7 +36,7 @@ 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')">
@@ -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>

From d58f2fe482c92ac2425dcbaa5df9383489388084 Mon Sep 17 00:00:00 2001
From: Casper Boone <mail@casperboone.nl>
Date: Sat, 19 Oct 2024 16:43:06 +0200
Subject: [PATCH 2/2] Renew design of mobile menu

---
 dwhdelft.nl/components/layout/Header.vue |  2 --
 outsite.nl/components/layout/Header.vue  | 11 +++++++++--
 shared/components/layout/BaseHeader.vue  |  8 ++++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/dwhdelft.nl/components/layout/Header.vue b/dwhdelft.nl/components/layout/Header.vue
index 774e57d8..ba384f92 100644
--- a/dwhdelft.nl/components/layout/Header.vue
+++ b/dwhdelft.nl/components/layout/Header.vue
@@ -29,8 +29,6 @@ nl:
       url: book
     - title: Andersblad
       url: andersblad
-    - title: Contact again
-      url: '/contact'
     - title: Contact
       url: '/contact'
 </i18n>
diff --git a/outsite.nl/components/layout/Header.vue b/outsite.nl/components/layout/Header.vue
index 93cca033..e4f68ce9 100644
--- a/outsite.nl/components/layout/Header.vue
+++ b/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,9 +28,11 @@ 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'
 
@@ -43,8 +46,12 @@ const menu = t('menu')
       <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>
diff --git a/shared/components/layout/BaseHeader.vue b/shared/components/layout/BaseHeader.vue
index 78d58995..aea78af9 100644
--- a/shared/components/layout/BaseHeader.vue
+++ b/shared/components/layout/BaseHeader.vue
@@ -43,15 +43,15 @@ const showMenu = ref(false)
           <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>