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 { .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 { .sidebar-link {

55
src/routes/+layout.svelte
View File

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