daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-11 20:32:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile menu fix

Browse Source
This commit is contained in:
BFlat authored and Brandon Thomas committed 2023-03-04 19:43:47 -05:00
1 parent 4e579e5cb1
commit fcfd37649f
2 files changed
+45 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/storyteller.io/src/App.scss
+1
View File
@@ -897,6 +897,7 @@ $font: montserrat, sans-serif;
display: flex;
justify-content: center;
align-items: center;
z-index: 1200;
}
&.open {
packages/storyteller.io/src/common/TopNav.tsx
+44 -41
View File
@@ -60,10 +60,13 @@ function TopNav(props: Props) {
const menuClassNames = mobileMenuOpen ? "overlay open" : "overlay";
useEffect(() => {
const overlay = document.getElementById("navbar");
if (mobileMenuOpen) {
document.body.classList.add("lock-scroll");
overlay?.classList.add("h-100");
} else {
document.body.classList.remove("lock-scroll");
overlay?.classList.remove("h-100");
}
}, [mobileMenuOpen]);
@@ -218,49 +221,49 @@ function TopNav(props: Props) {
<span className="bottom"></span>
</button>
</div>
</nav>
<div className={menuClassNames}>
<div className="overlay-menu">
<ul>
<li className="nav-link">
<a onClick={menuToggle} href="#home" data-scroll-to>
Home
</a>
</li>
<li className="nav-link">
<a onClick={menuToggle} href="#film" data-scroll-to>
Film
</a>
</li>
<li className="nav-link">
<a onClick={menuToggle} href="#music" data-scroll-to>
Music
</a>
</li>
<li className="nav-link">
<a onClick={menuToggle} href="#social" data-scroll-to>
Social
</a>
</li>
<li className="nav-link">
<a onClick={menuToggle} href="#team" data-scroll-to>
Our Team
</a>
</li>
<li className="mt-4">
<a
onClick={menuToggle}
href="#contact"
data-scroll-to
className="btn btn-primary"
>
Contact
</a>
</li>
</ul>
<div className={menuClassNames}>
<div className="overlay-menu">
<ul>
<li className="nav-link">
<a onClick={menuToggle} href="#home" data-scroll-to>
Home
</a>
</li>
<li className="nav-link">
<a onClick={menuToggle} href="#film" data-scroll-to>
Film
</a>
</li>
<li className="nav-link">
<a onClick={menuToggle} href="#music" data-scroll-to>
Music
</a>
</li>
<li className="nav-link">
<a onClick={menuToggle} href="#social" data-scroll-to>
Social
</a>
</li>
<li className="nav-link">
<a onClick={menuToggle} href="#team" data-scroll-to>
Our Team
</a>
</li>
<li className="mt-4">
<a
onClick={menuToggle}
href="#contact"
data-scroll-to
className="btn btn-primary"
>
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<a href="#home" className={backToTop} data-scroll-to>
<div className="btt-shape"></div>