mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix issue #53 Toggle menu will disappear

Browse Source
This commit is contained in:
prototypa
2022-11-01 11:37:12 +01:00
parent bb67f106b8
commit d50028ed06
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/core/BasicScripts.astro
View File

@ -29,7 +29,8 @@
attachEvent('[data-aw-toggle-menu]', 'click', function (elem) { attachEvent('[data-aw-toggle-menu]', 'click', function (elem) {
elem.classList.toggle('expanded'); elem.classList.toggle('expanded');
document.body.classList.toggle('overflow-hidden'); document.body.classList.toggle('overflow-hidden');
document.getElementById('menu')?.classList.toggle('hidden'); document.getElementById('header')?.classList.toggle('h-screen');
document.querySelector('#header nav')?.classList.toggle('hidden');
}); });
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () { attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
@ -43,6 +44,7 @@
elem.classList.remove('expanded'); elem.classList.remove('expanded');
} }
document.body.classList.remove('overflow-hidden'); document.body.classList.remove('overflow-hidden');
document.getElementById('menu')?.classList.add('hidden'); document.getElementById('header')?.classList.remove('h-screen');
document.querySelector('#header nav')?.classList.add('hidden');
}; };
</script> </script>

2
src/components/widgets/Header.astro
View File

@ -9,6 +9,7 @@ import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permal
<header <header
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white md:bg-white/90 dark:bg-slate-900 dark:md:bg-slate-900/90 md:backdrop-blur-sm border-b dark:border-b-0" class="sticky top-0 z-40 flex-none mx-auto w-full bg-white md:bg-white/90 dark:bg-slate-900 dark:md:bg-slate-900/90 md:backdrop-blur-sm border-b dark:border-b-0"
id="header"
> >
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4"> <div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
<div class="flex justify-between"> <div class="flex justify-between">
@ -23,7 +24,6 @@ import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permal
<nav <nav
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-screen md:h-auto" class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-screen md:h-auto"
aria-label="Main navigation" aria-label="Main navigation"
id="menu"
> >
<ul <ul
class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base" class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base"