/Navbar.js/
import './navbar.scss';
import {FaBars, FaSearch} from "react-icons/fa";
import { useState } from 'react';
function Navbar(){
const [hide,sethide] = useState(true);
const barIcon = document.querySelectorAll(".link-hide");
const showIcon = () => {
sethide(!hide);
if(!hide){
console.log("hello");
barIcon.forEach(baricon => {
baricon.style.display = "block";
})
}
else{
console.log("hi");
barIcon.forEach(baricon => {
baricon.style.display = "none";
})
}
}
return (
<div className='navbar'>
<ul className='link-group'>
<li className='hello'>Home</li>
<li className='link-hide'>Band</li>
<li className='link-hide'>Tour</li>
<li className='link-hide'>Contact</li>
<li className='link-hide'>More</li>
</ul>
<div className='align-icon'>
<FaSearch className='search-icon'/>
<FaBars className='bar-icon' onClick={showIcon}/>
</div>
</div>
);
}
export default Navbar;
===========================================
/Navbar.scss/
@import url('https://fonts.googleapis.com/css2?family=Freehand&family=Josefin+Sans:wght@200;300;400&family=Montserrat:wght@200;300;400;600&family=Silkscreen&display=swap');
*{
padding : 0px;
margin : 0px;
box-sizing: border-box;
text-align: left;
text-decoration: none;
list-style-type: none;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color : white;
}
.navbar{
background : black;
display: flex !important;
position: relative;
grid-template-columns: 50% 50%;
position: fixed;
width: 100%;
ul{
li{
padding: 20px 25px;
}
li:hover{
background-color: gray ;
}
}
.align-icon{
align-self: center;
position: absolute;
right: 0px;
padding: 21px 25px;
}
.align-icon:hover{
background-color: gray;
}
}
@media (max-width: 570px){
.search-icon{
display: none;
}
.align-icon{
align-self: flex-start !important;
}
.bar-icon{
display: block;
}
.link-group{
display: block;
width: 100%;
.link-hide{
display: none;
}
li:nth-child(1){
display:inline-block;
}
}
}
@media (min-width: 571px){
ul{
display: flex;
}
.search-icon{
display: block;
}
.bar-icon{
display:none;
}
.link-hide{
display: block !important;
}
}
============================================
/Home.scss/
@import url('https://fonts.googleapis.com/css2?family=Freehand&family=Josefin+Sans:wght@200;300;400&family=Montserrat:wght@200;300;400;600&family=Silkscreen&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color:white;
font-family: 'Montserrat', sans-serif;
}
.show-image{
position: relative;
.pos-absolute{
width: 100%;
position: absolute;
bottom: 10%;
h1,p{
display: flex;
justify-content: center;
}
}
}
.head-text{
font-size: 20px;
}
I am currently developing a React-based website and encountered an issue when trying to implement the .show-image class in Home.scss. It seems that this class is causing my Navbar component to disappear from the webpage. When I remove the .show-image class, the Navbar reappears as expected. Seeking guidance from experienced developers on how to resolve this issue. Thank you for your assistance.