graham/ghall.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 Fix scrolling when drawer is open

Browse Source
This commit is contained in:
Graham Hall
2025-08-31 10:51:32 -04:00
parent 4676b8de32
commit c07efd1481
2 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/Drawer.astro
+7 -10
View File
@@ -5,18 +5,15 @@ import CloseIcon from '../../assets/svg/xmark.svg';
import { navLinks } from '../../data/nav-links'; import { navLinks } from '../../data/nav-links';
--- ---
<div <!-- drawerOpened is defined in /src/layouts/Layout.astro -->
x-data="{ open: false }" <div class="drawer-container" @keydown.escape="drawerOpen = false">
class="drawer-container" <button @click="drawerOpen = !drawerOpen">
@keydown.escape="open = false"
>
<button @click="open = !open">
<BarsIcon class="bars-icon" width={24} height={24} /> <BarsIcon class="bars-icon" width={24} height={24} />
</button> </button>
<div <div
class="overlay" class="overlay"
@click="open = !open" @click="drawerOpen = !drawerOpen"
x-show="open" x-show="drawerOpen"
x-transition:enter-start="hidden-overlay" x-transition:enter-start="hidden-overlay"
x-transition:enter-end="visible-overlay" x-transition:enter-end="visible-overlay"
x-transition:leave-start="visible-overlay" x-transition:leave-start="visible-overlay"
@@ -25,14 +22,14 @@ import { navLinks } from '../../data/nav-links';
</div> </div>
<div <div
class="drawer" class="drawer"
x-show="open" x-show="drawerOpen"
x-transition:enter-start="hidden-drawer" x-transition:enter-start="hidden-drawer"
x-transition:enter-end="visible-drawer" x-transition:enter-end="visible-drawer"
x-transition:leave-start="visible-drawer" x-transition:leave-start="visible-drawer"
x-transition:leave-end="hidden-drawer" x-transition:leave-end="hidden-drawer"
> >
<div> <div>
<button @click="open = !open"> <button @click="drawerOpen = !drawerOpen">
<CloseIcon class="bars-icon" width={24} height={24} /></button <CloseIcon class="bars-icon" width={24} height={24} /></button
> >
</div> </div>
src/layouts/Layout.astro
+11 -1
View File
@@ -30,7 +30,11 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
href={`${Astro.site}rss.xml`} href={`${Astro.site}rss.xml`}
/><title>{`ghall.space - ${title}`}</title> /><title>{`ghall.space - ${title}`}</title>
</head> </head>
<body class="layout-simple"> <body
class="layout-simple"
x-data="{ drawerOpen: false }"
:class="drawerOpen ? 'lock-scroll' : ''"
>
<Header /> <Header />
<main> <main>
<slot /> <slot />
@@ -38,3 +42,9 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
<Footer /> <Footer />
</body> </body>
</html> </html>
<style>
.lock-scroll {
overflow: hidden;
}
</style>