I have been developing a mobile-friendly Multi-level push navigation menu for my website using dynamically generated links based on projects from my GitHub account. I found a push menu on CodePen here and am in the process of integrating it into React instead of just using plain HTML and CSS. Everything seems to be working well except for the Back Button.
https://i.stack.imgur.com/AHyKP.png
https://i.stack.imgur.com/ZqaD9.png
Interestingly, when I scroll to the bottom of the page and click on any empty space under "Shell," it acts as a back button and takes me to the previous menu. This push menu does not utilize JavaScript, but I am willing to incorporate it if it can resolve this issue. I have attempted troubleshooting numerous times, but some parts of the SCSS are unfamiliar to me. My website is built on Next.js using React. Below are snippets of my render function and my sass code. Feel free to reach out if you have any questions or require more information.
This is the render() in the index.jsx
render() {
return (
<div className={`${this.renderCSS()}`}>
<div className="nav">
<nav>
<a className="mobile-menu-trigger">Open mobile menu</a>
{/* <button className={'mobile-menu-trigger'} >Mobile Menu</button> */}
<ul className="menu menu-bar">
<li>
<a className="menu-link menu-bar-link" aria-haspopup="true">Projects</a>
<ul className="mega-menu mega-menu--multiLevel">
<li className="mobile-menu-back-item">
<a className="menu-link mobile-menu-back-link">Back</a>
</li>
{Object.keys(this.props.languages).map(language => {
const allProjects = this.props.languages[language];
return (
<li key={language}>
<a className="menu-link mega-menu-link" aria-haspopup="true">{language}</a>
<ul className="menu menu-list">
{allProjects.map((item, index) => {
const project = this.props.projects[item];
const openGithubRepo = () => {
window.open(project.svn_url, "_blank");
}
const openGithubPages = () => {
window.open(`https://ngwessels.github.io/${project.name}/`, "_blank");
}
if (project.has_pages) {
return (
<li key={project.id}>
<a className="menu-link menu-list-link"
aria-haspopup="true">{project.name}</a>
<ul className="menu menu-list">
<li>
<a className="menu-link menu-list-link" onClick={openGithubRepo}>Open Github</a>
</li>
<li>
<a className="menu-link menu-list-link" onClick={openGithubPages}>Visit Live Example</a>
</li>
</ul>
</li>
);
} else {
return (
<li key={project.id}>
<a className="menu-link menu-list-link" onClick={openGithubRepo}>{project.name}</a>
</li>
)
}
})}
</ul>
</li>
)
})}
</ul>
</li>
<li>
<a className="menu-link menu-bar-link">Static link</a>
</li>
</ul>
</nav>
</div>
</div>
)
}
And here is the styles.scss
$color-accent: black;
$color-light: #ffffff;
$color-dark: black;
$menu-link-padding: 20px 25px;
$breakpoint: 950px;
$mega-menu-multiLevel-colWidth: 100/3 + 0%;
$mobile-menu-back-height: "calc(1.4em + 40px)";
$mobile-menu-back-offset: "calc(0px - (1.4em + 40px))";
$menu-mobile-width: 350px;
// ------------------ SHARED STYLES
nav {
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
a {
display: block;
text-decoration: none;
&:hover, &:visited {
text-decoration: none;
}
}
}
.nav {
a {
font-family: 'Arial Black';
}
}
.menu-bar {
background: $color-light;
display: flex;
}
.menu-link {
padding: $menu-link-padding;
background: $color-light;
color: $color-accent;
transition: background .2s, color .2s;
position: relative;
z-index: 1;
&[aria-haspopup="true"] {
padding-right: 40px;
&:after {
content: "";
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowRight.svg#accent');
background-size: 14px;
width: 14px;
height: 14px;
font-size:12px;
position: absolute;
right: 10px;
top:50%;
transform: translateY(-50%);
}
}
}
.mega-menu-header {
font-size: 1.2em;
text-transform: uppercase;
font-weight: bold;
color: darken($color-accent, 5%);
}
.mega-menu {
background: $color-light;
z-index: 10;
}
.mega-menu--multiLevel {
flex-direction: column;
}
// ------------------ MEDIA QUERIES
...