Upon clicking the navbar to extend it, I encountered an issue where I couldn't interact with inputs and buttons on my website. Upon further investigation, I discovered that this problem was linked to the navbar itself. Removing the navbar resolved the interaction issues on the site. It seems there might be an issue with how the navbar extension is implemented as certain elements become only partially clickable. For example, on the addNote page, the last input box functions correctly but only half of it is clickable.
View the AddNote page here
Below is the CSS code for the menu:
.menu{
background: red;
width:100%;
min-height:10vh;
position: fixed;
left:0px;
top:0px;
z-index: 10;
border-bottom: 0.4px solid #C0C5CD;
transition: 0.3s ease-in-out;
cursor: pointer;
}
.menu-item{
font-size:0em;
color:black;
margin-top: 1.2vh;
display:block;
opacity:0;
height: 0px;
transition: 0.3s ease-in-out;
border-bottom: 0.7px solid #C0C5CD;
background:red;
display: none;
}
.menu-item-extend{
opacity:1;
height: 5.5vh;
font-size: 1.6em;
display: block;
}
.noStyle{
border: none;
}
And here is the HTML code for the menu (using React v4):
import { Meteor } from "meteor/meteor"
import React from "react";
import { withRouter, Link } from "react-router-dom";
import { SubjectRoutes } from "../subjectRoutes/subjectRoutes";
import "../../../client/stylesheets/authentication.css"
class Menu extends React.Component{
extendMenu(){
let menuItems = document.querySelectorAll(".menu-item");
for(let i = 0; i <= menuItems.length; i++ ){
menuItems[i].classList.toggle("menu-item-extend")
}
console.log(menuItems)
}
render(){
return(
<div className="center center-v-outer">
<div className="menu center-v-inner" ref="menu" onClick={this.extendMenu.bind(this)}>
<h1 className="menu-header">PostNote</h1>
<p className="menu-item"><Link to="/">Home</Link></p>
<p className="menu-item"><Link to="/searchNotes">Notes</Link></p>
<p className="menu-item"><Link to="/addNote">Add a Note</Link></p>
<p className="menu-item noStyle"><Link to={`/users/${Meteor.userId()}`} >My Profile</Link></p>
</div>
</div>
);
}
}
export default withRouter(Menu)