.js fil svarar inte, tips? React.
Tja gänget! Håller på med en sida i react där css fungerar utmärkt att importera men just js fungerar inte. Håller på att skapa en navbar som skall synas efter att användaren har loggat in, all kod svarar förutom js verkar det som, dock bara för att logga ut ska tilläggas, så den fungerar delvis men förstår inte varför inte resten fungerar.
Skall tilläggas att det som inte svarar är min showNavbar funktion som jag kallar i mina buttons
Här kommer lite kod:
Detta är main sidan som användaren kommer till efter inlogg:
import Navbar from "../Navbar/index";
import React from "react";
const Main = () => {
return (
<React.Fragment>
<Navbar/>
</React.Fragment>
);
};
export default Main;
Detta är navbar.js
import { useRef } from 'react';
import { FaBars, FaTimes } from 'react-icons/fa';
import './styles.module.css';
function Navbar(){
const navRef = useRef();
const handleLogout = () => {
localStorage.removeItem("token");
window.location.reload();
};
const showNavbar = () => {
navRef.current.classList.toggle("responsive_nav");
}
return(
<header>
<h3>Logo</h3>
<nav ref={navRef}>
<a href="/#">Hem</a>
<a href="/#">Nyheter</a>
<a href="/#">Forum</a>
<a href="/#">Kontakt</a>
<a href="/#" onClick={handleLogout}>Logga Ut</a>
<button className="nav-btn nav-close-btn" onClick={showNavbar}>
<FaTimes />
</button>
</nav>
<button className="nav-btn" onClick={showNavbar}>
<FaBars />
</button>
</header>
);
}
export default Navbar;
samt css för navbar:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root{
--mainColor: #006390;
--mainColorLight: #5767aa;
--sedondaryColor: #DB2839;
--textColor: #eee;
}
header{
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
padding: 0 2rem;
background-color: var(--mainColor);
color: var(--textColor);
}
nav a{
margin: 0 2rem;
color: var(--textColor);
text-decoration: none;
}
nav a:hover{
color: var(--sedondaryColor);
}
header .nav-btn{
padding: 5px;
cursor: pointer;
background: transparent;
border: none;
outline: none;
color: var(--textColor);
visibility: hidden;
opacity: 0;
font-size: 1.8rem;
}
@media only screen and (max-width: 1024px){
header .nav-btn{
visibility: visible;
opacity: 1;
}
header nav{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
background-color: var(--mainColor);
transition: 1s;
transform: translateY(-100vh);
}
header .responsive_nav{
transform: none;
}
nav .nav-close-btn{
position: absolute;
top: 2rem;
right: 2rem;
}
nav a{
font-size: 1.5rem;
}
}
Läste nånstans att id kan va bra att ha med, tänkte höra era tankar först!
