Skip to content

Commit ff00610

Browse files
mckenzieartsmckenziearts
authored
Update header (#117)
* 💄 Update Site header * Add weigth on button and compile assets
1 parent bd85593 commit ff00610

File tree

10 files changed

+437
-190
lines changed

10 files changed

+437
-190
lines changed

‎public/css/app.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/app.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/mix-manifest.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"/js/app.js": "/js/app.js?id=ba100c8f6b070c0cfac2d92eb2d9ba05",
3-
"/css/app.css": "/css/app.css?id=7470f98fa77a0725aa692b073e05720c"
2+
"/js/app.js": "/js/app.js?id=857207f48168eb5cc9d90ca0a9e71d34",
3+
"/css/app.css": "/css/app.css?id=338c3e708863942bd81d20b113c989dc"
44
}

‎resources/css/header.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.header.is-fixed {
2-
@apply fixed inset-x-0 transform duration-300 bg-skin-menu/80 backdrop-blur;
2+
@apply fixed inset-x-0 transform duration-300 bg-skin-menu/80;
33
}
44

55
.header.is-hidden {

‎resources/js/helpers/header.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ let scrolling = false
77
const scrollDelta = 20
88
let scrollOffset = $header ? $header.offsetHeight : 0
99

10-
// Les différents états possible du header
10+
// Les différents états possibles du header
1111
const FIXED = 0
1212
const HIDDEN = 1
1313
const DEFAULT = 2
@@ -52,14 +52,14 @@ const autoHideHeader = function () {
5252
} else {
5353
setState(DEFAULT)
5454
}
55-
/**
55+
5656
// Masquage / affichage
5757
if (previousTop - currentTop > scrollDelta) {
5858
$header.classList.remove('is-hidden')
5959
} else if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
6060
$header.classList.add('is-hidden')
6161
}
62-
**/
62+
6363
previousTop = currentTop
6464
scrolling = false
6565
}

‎resources/views/components/container.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div {{ $attributes->merge(['class' => 'relative z-0']) }}>
1+
<div {{ $attributes->merge(['class' => 'z-0']) }}>
22
{{ $slot }}
33
</div>

‎resources/views/components/layouts/header.blade.php

+29-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav x-data="{ open: false, flyoutMenu: false }" {{ $attributes->merge(['class' => 'relative z-10 bg-skin-menu']) }}>
1+
<nav x-data="{ open: false, flyoutMenu: false }" {{ $attributes->merge(['class' => 'relative z-10 bg-skin-menu/50 backdrop-blur-sm']) }}>
22
<div class="max-w-7xl mx-auto px-2 sm:px-4">
33
<div class="flex justify-between h-16">
44
<div class="flex px-2 lg:px-0">
@@ -172,7 +172,7 @@ class="absolute z-10 -ml-4 mt-3 transform w-screen max-w-md lg:max-w-3xl lg:ml-0
172172
<!-- Add actions dropdown -->
173173
<div x-data="{ open: false }" @keydown.escape.stop="open = false;" @click.outside="open = false;" class="ml-4 relative shrink-0">
174174
<div>
175-
<button type="button" class="shrink-0 bg-skin-card p-1 text-skin-muted rounded-full hover:text-skin-base focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500" x-ref="button" @click="open =! open">
175+
<button type="button" class="shrink-0 hover:bg-skin-card p-1 text-skin-muted rounded-full hover:text-skin-base focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500" x-ref="button" @click="open =! open">
176176
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
177177
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
178178
</svg>
@@ -231,13 +231,23 @@ class="origin-top absolute right-0 mt-2 w-56 rounded-md shadow-lg py-1 bg-skin-m
231231

232232
<div x-show="open" class="lg:hidden font-sans" id="mobile-menu" style="display: none;">
233233
<div class="pt-2 pb-3 space-y-1">
234-
<a href="{{ route('forum.index') }}" class="border-transparent hover:bg-skin-card-muted hover:border-skin block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ active(['forum', 'forum*'], 'bg-green-50 border-green-500 text-skin-primary', 'text-skin-menu hover:text-skin-menu-hover') }}">{{ __('Forum') }}</a>
235-
<a href="{{ route('articles') }}" class="border-transparent hover:bg-skin-card-muted hover:border-skin block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ active(['articles', 'articles*'], 'bg-green-50 border-green-500 text-skin-primary', 'text-skin-menu hover:text-skin-menu-hover') }}">{{ __('Articles') }}</a>
236-
<a href="{{ route('discussions.index') }}" class="border-transparent hover:bg-skin-card-muted hover:border-skin block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ active(['discussions', 'discussions*'], 'bg-green-50 border-green-500 text-skin-primary', 'text-skin-menu hover:text-skin-menu-hover') }}">{{ __('Discussions') }}</a>
237-
<a href="#" class="border-transparent hover:bg-skin-card-muted hover:border-skin block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ active(['tutorials', 'tutorials*'], 'bg-green-50 border-green-500 text-skin-primary', 'text-skin-menu hover:text-skin-menu-hover') }}">{{ __('Vidéos') }}</a>
234+
<a href="{{ route('forum.index') }}" class="border-transparent hover:bg-skin-card-muted hover:border-skin block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ active(['forum', 'forum*'], 'bg-green-50 border-green-500 text-skin-primary', 'text-skin-menu hover:text-skin-menu-hover') }}">
235+
{{ __('Forum') }}
236+
</a>
237+
<a href="{{ route('articles') }}" class="border-transparent hover:bg-skin-card-muted hover:border-skin block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ active(['articles', 'articles*'], 'bg-green-50 border-green-500 text-skin-primary', 'text-skin-menu hover:text-skin-menu-hover') }}">
238+
{{ __('Articles') }}
239+
</a>
240+
<a href="{{ route('discussions.index') }}" class="border-transparent hover:bg-skin-card-muted hover:border-skin block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ active(['discussions', 'discussions*'], 'bg-green-50 border-green-500 text-skin-primary', 'text-skin-menu hover:text-skin-menu-hover') }}">
241+
{{ __('Discussions') }}
242+
</a>
243+
<a href="#" class="border-transparent hover:bg-skin-card-muted hover:border-skin block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ active(['tutorials', 'tutorials*'], 'bg-green-50 border-green-500 text-skin-primary', 'text-skin-menu hover:text-skin-menu-hover') }}">
244+
{{ __('Vidéos') }}
245+
</a>
238246
</div>
239247
<div class="py-4 px-3 border-t border-skin-light">
240-
<h4 class="text-sm leading-5 font-medium uppercase tracking-wide text-skin-muted">{{ __('Autres') }}</h4>
248+
<h4 class="text-sm leading-5 font-medium uppercase tracking-wide text-skin-muted">
249+
{{ __('Autres') }}
250+
</h4>
241251
<div class="mt-5 space-y-6">
242252
<a href="https://snippets.laravel.cm" class="flex items-center text-skin-base">
243253
<svg class="h-6 w-6 mr-3 -ml-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -298,8 +308,12 @@ class="origin-top absolute right-0 mt-2 w-56 rounded-md shadow-lg py-1 bg-skin-m
298308
</button>
299309
</div>
300310
<div class="mt-3 space-y-1">
301-
<a href="{{ route('profile') }}" class="block px-4 py-2 text-base font-medium text-skin-menu hover:text-skin-menu-hover">{{ __('Mon profil') }}</a>
302-
<a href="{{ route('user.settings') }}" class="block px-4 py-2 text-base font-medium text-skin-menu hover:text-skin-menu-hover">{{ __('Paramètres') }}</a>
311+
<a href="{{ route('profile') }}" class="block px-4 py-2 text-base font-medium text-skin-menu hover:text-skin-menu-hover">
312+
{{ __('Mon profil') }}
313+
</a>
314+
<a href="{{ route('user.settings') }}" class="block px-4 py-2 text-base font-medium text-skin-menu hover:text-skin-menu-hover">
315+
{{ __('Paramètres') }}
316+
</a>
303317
<div class="px-4 py-2" role="form">
304318
<form method="POST" action="{{ route('logout') }}" role="form">
305319
@csrf
@@ -311,8 +325,12 @@ class="origin-top absolute right-0 mt-2 w-56 rounded-md shadow-lg py-1 bg-skin-m
311325
</div>
312326
@else
313327
<div class="space-y-1">
314-
<a href="{{ route('login') }}" class="block px-4 py-2 text-base font-medium text-skin-menu hover:text-skin-menu-hover">{{ __('Se connecter') }}</a>
315-
<a href="{{ route('register') }}" class="block px-4 py-2 text-base font-medium text-flag-green">{{ __('Créer un compte') }}</a>
328+
<a href="{{ route('login') }}" class="block px-4 py-2 text-base font-medium text-skin-menu hover:text-skin-menu-hover">
329+
{{ __('Se connecter') }}
330+
</a>
331+
<a href="{{ route('register') }}" class="block px-4 py-2 text-base font-medium text-flag-green">
332+
{{ __('Créer un compte') }}
333+
</a>
316334
</div>
317335
@endauth
318336
</div>

0 commit comments

Comments
 (0)