diff --git a/components/layout/LayoutHeader.vue b/components/layout/LayoutHeader.vue
index f1041879318a055ec7a4a0b9d60514ccda143da8..bf5877ae4fbe9cd1816d0eb68989d9ef6d06e4bb 100644
--- a/components/layout/LayoutHeader.vue
+++ b/components/layout/LayoutHeader.vue
@@ -16,14 +16,18 @@
:class="{ '-translate-y-20': scrolled }"
>
<nav class="container flex justify-between items-center mx-auto h-16">
+ <LayoutHeaderMenuHamburger class="mr-3 flex lg:hidden">
+ <LayoutHeaderMenu class="flex-col space-y-4" />
+ </LayoutHeaderMenuHamburger>
+
<LayoutHeaderLogo :show-title="!searchFocus" />
<div class="flex justify-end items-center relative">
<LayoutHeaderMenuSearch @search-focus="searchFocus = $event" />
- <LayoutHeaderMenu />
+ <LayoutHeaderMenu class="hidden lg:flex" />
- <AppDarkModeToggle class="hidden lg:inline-flex ml-3" />
+ <AppDarkModeToggle class="hidden xl:inline-flex ml-3" />
<LayoutHeaderMenuAvatar />
</div>
@@ -75,13 +79,4 @@ export default {
/* Copied from discourse */
box-shadow: 0 2px 4px -1px rgb(0 0 0 / 25%);
}
-.menu-hamburger {
- display: block;
- fill: none;
- height: 16px;
- width: 16px;
- stroke: currentcolor;
- stroke-width: 3;
- overflow: visible;
-}
</style>
diff --git a/components/layout/LayoutHeaderMenuAvatar.vue b/components/layout/LayoutHeaderMenuAvatar.vue
index 5e9879a3435948a5de538b66d40cd33157800001..9e4ad92b0a96452c0bb225a78ef4673306f947cd 100644
--- a/components/layout/LayoutHeaderMenuAvatar.vue
+++ b/components/layout/LayoutHeaderMenuAvatar.vue
@@ -69,15 +69,39 @@
</div>
<div v-if="git">
<span
- class="bg-purple-200 text-purple-800 font-medium py-0.5 px-1 text-sm rounded"
+ class="
+ bg-purple-200
+ text-purple-800
+ font-medium
+ py-0.5
+ px-1
+ text-sm
+ rounded
+ "
v-text="git.draft.count"
/>
<span
- class="bg-yellow-200 text-yellow-800 font-medium py-0.5 px-1 text-sm rounded"
+ class="
+ bg-yellow-200
+ text-yellow-800
+ font-medium
+ py-0.5
+ px-1
+ text-sm
+ rounded
+ "
v-text="git.pending_review.count"
/>
<span
- class="bg-green-200 text-green-800 font-medium py-0.5 px-1 text-sm rounded"
+ class="
+ bg-green-200
+ text-green-800
+ font-medium
+ py-0.5
+ px-1
+ text-sm
+ rounded
+ "
v-text="git.pending_publish.count"
/>
</div>
@@ -123,7 +147,15 @@
>
<div>Mes tickets</div>
<div
- class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
+ class="
+ bg-gray-200
+ text-gray-800
+ font-medium
+ w-5
+ h-5
+ text-center text-sm
+ rounded-full
+ "
v-text="git.my_issues.count"
/>
</a>
@@ -134,7 +166,15 @@
>
<div>Mes demandes de fusion</div>
<div
- class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
+ class="
+ bg-gray-200
+ text-gray-800
+ font-medium
+ w-5
+ h-5
+ text-center text-sm
+ rounded-full
+ "
v-text="git.my_merge_requests.count"
/>
</a>
@@ -167,7 +207,7 @@
<span>Aide</span>
</nuxt-link>
- <div><AppDarkModeToggle class="lg:hidden ml-2" /></div>
+ <AppDarkModeToggle class="xl:hidden ml-2" />
<AppA11y class="ml-2" />
</div>
diff --git a/components/layout/LayoutHeaderMenuForum.vue b/components/layout/LayoutHeaderMenuForum.vue
index e6ba7cae2baeb994a7ec7120cc26a37768684063..ce69af33043aeb3a2cc08d8752f20fbf7321daed 100644
--- a/components/layout/LayoutHeaderMenuForum.vue
+++ b/components/layout/LayoutHeaderMenuForum.vue
@@ -1,5 +1,5 @@
<template>
- <div v-if="!loading" class="flex items-center">
+ <div v-if="!loading" class="menu-forum flex items-center">
<MiniMap class="mx-4" style="min-width: 440px" />
<div class="text-left text-xs py-1 w-80 border-l dark:border-gray-500">
@@ -58,4 +58,7 @@ export default {
margin-right: 5px;
display: inline-block;
}
+.hamburger-menu .menu-forum {
+ display: none;
+}
</style>
diff --git a/components/layout/LayoutHeaderMenuHamburger.vue b/components/layout/LayoutHeaderMenuHamburger.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61163022c745e09844c5431cf9d9752684b1ef32
--- /dev/null
+++ b/components/layout/LayoutHeaderMenuHamburger.vue
@@ -0,0 +1,78 @@
+<script>
+export default {
+ name: 'LayoutHeaderMenuHamburger',
+ data() {
+ return {
+ isOpen: false,
+ }
+ },
+}
+</script>
+
+<template>
+ <div>
+ <div
+ class="hamburger flex flex-col space-between space-y-1.5"
+ :class="isOpen ? 'is-open' : ''"
+ @click="isOpen = !isOpen"
+ >
+ <span class="hamburger-item" />
+ <span class="hamburger-item" />
+ <span class="hamburger-item" />
+ </div>
+
+ <transition :name="isOpen ? 'slideback' : 'slide'">
+ <div
+ v-show="isOpen"
+ class="hamburger-menu fixed bg-white left-0 top-0 w-min z-10 shadow p-8"
+ >
+ <slot />
+ </div>
+ </transition>
+ </div>
+</template>
+
+<style lang="postcss" scoped>
+.hamburger-item {
+ @apply block w-8 h-1 bg-gray-800 dark:bg-gray-300 transition;
+}
+
+.is-open.hamburger > span:nth-child(1) {
+ transform: translate(0, 0.625rem) rotate(-45deg);
+}
+
+.is-open.hamburger > span:nth-child(2) {
+ opacity: 0;
+}
+
+.is-open.hamburger > span:nth-child(3) {
+ transform: translate(0, -0.625rem) rotate(45deg);
+}
+
+.hamburger-menu {
+ top: 65px;
+ height: calc(100vh - 65px);
+}
+
+.slide-leave-active,
+.slide-enter-active {
+ transition: 0.5s;
+}
+.slide-enter {
+ transform: translate(100%, 0);
+}
+.slide-leave-to {
+ transform: translate(-100%, 0);
+}
+
+.slideback-leave-active,
+.slideback-enter-active {
+ transition: 0.5s;
+}
+.slideback-enter {
+ transform: translate(-100%, 0);
+}
+.slideback-leave-to {
+ transform: translate(100%, 0);
+}
+</style>