BuboBubo/livecodingfr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework logic of hamburger menu for responsive screens

Browse Source
This commit is contained in:
Raphaël Forment
2024-07-31 11:36:15 +02:00
parent 6699f04718
commit 527b25cd5a
2 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.postcss
View File

@ -45,7 +45,7 @@
}
.mobile-menu-link {
@apply text-gray-100 hover:text-orange-300 flex md:hidden;
@apply text-gray-100 hover:text-orange-300 flex hover:border-b-2;
}
.sidebar-link {

55
src/routes/+layout.svelte
View File

@ -6,19 +6,19 @@
showMenu = !showMenu;
}
</script>
<div>
<div class="bg-neutral-800">
<nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
<div class="flex items-center justify-between">
<nav class="px-8 py-2 flex justify-between items-center">
<div class="flex items-center justify-between w-full">
<a
href="/"
class="website-title text-2xl font-bold bg-gradient-to-r from-orange-700 via-blue-500 to-green-400 text-transparent bg-clip-text animate-gradient"
>livecoding.fr</a
>
<!-- Mobile menu button -->
<div on:click={toggleNavbar} role="button" class="flex md:hidden">
<div class="lg:hidden">
<button
on:click={toggleNavbar}
type="button"
class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"
>
@ -39,34 +39,42 @@
</button>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div
class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
? 'flex'
: 'hidden'}"
>
<a href="/evenements" class="mobile-menu-link">Évènements</a>
<a href="/membres" class="mobile-menu-link">Membres</a>
<a href="/outils" class="mobile-menu-link">Outils</a>
<a href="/guides" class="mobile-menu-link">Guides</a>
<a href="/articles" class="mobile-menu-link">Articles</a>
<a href="/reseaux" class="mobile-menu-link">Réseaux</a>
<a href="/ressources" class="mobile-menu-link">Ressources</a>
<a href="/presse" class="mobile-menu-link">Presse</a>
<a href="/contacts" class="mobile-menu-link">Contact</a>
<!-- Desktop Menu -->
<div class="hidden lg:flex lg:items-center lg:space-x-10">
<a href="/evenements" class="titlebar-link">Évènements</a>
<a href="/membres" class="titlebar-link">Membres</a>
<a href="/outils" class="titlebar-link">Outils</a>
<a href="/guides" class="titlebar-link">Guides</a>
<a href="/articles" class="titlebar-link">Articles</a>
<a href="/reseaux" class="titlebar-link">Réseaux</a>
<a href="/ressources" class="titlebar-link">Ressources</a>
<a href="/presse" class="titlebar-link">Presse</a>
<a href="/contacts" class="titlebar-link">Contact</a>
</div>
</nav>
<!-- Mobile Menu -->
<div class="lg:hidden {showMenu ? 'block' : 'hidden'}">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="/evenements" class="mobile-menu-link block">Évènements</a>
<a href="/membres" class="mobile-menu-link block">Membres</a>
<a href="/outils" class="mobile-menu-link block">Outils</a>
<a href="/guides" class="mobile-menu-link block">Guides</a>
<a href="/articles" class="mobile-menu-link block">Articles</a>
<a href="/reseaux" class="mobile-menu-link block">Réseaux</a>
<a href="/ressources" class="mobile-menu-link block">Ressources</a>
<a href="/presse" class="mobile-menu-link block">Presse</a>
<a href="/contacts" class="mobile-menu-link block">Contact</a>
</div>
</div>
</div>
</div>
<main class="bg-neutral-900">
<div class="drawer lg:drawer-open">
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
<div class="drawer-content space-y-4 flex flex-col lg:px-16 px-4 py-8">
<slot />
</div>
<div class="drawer-side no-scrollbar m-0">
<div class="drawer-side no-scrollbar m-0 lg:block hidden">
<label
for="my-drawer-2"
aria-label="close sidebar"
@ -104,7 +112,6 @@
</div>
</div>
</main>
<footer class="footer-style">
<div class="flex justify-between">
<p class="inline indent-4 text-bold text-white">Raphaël Forment</p>
@ -115,4 +122,4 @@
>
</p>
</div>
</footer>
</footer>