I am currently working on converting a JavaScript project into Angular. However, I am facing difficulty understanding why some classes are causing the menu to disappear, even after reviewing the documentation multiple times. My goal is to have the menu rotate into an X shape only when the .menu-btn is clicked on.
Below is the JavaScript code that I'm attempting to convert:
// Select DOM Items
const menuBtn = document.querySelector(".menu-btn");
const menu = document.querySelector(".menu");
const menuNav = document.querySelector(".menu-nav");
const menuBranding = document.querySelector(".menu-branding");
const navItems = document.querySelectorAll(".nav-item");
// Set Initial State Of Menu
let showMenu = false;
menuBtn.addEventListener("click", toggleMenu);
function toggleMenu() {
if (!showMenu) {
menuBtn.classList.add("close");
menu.classList.add("show");
menuNav.classList.add("show");
menuBranding.classList.add("show");
navItems.forEach((item) => item.classList.add("show"));
// Set Menu State
showMenu = true;
} else {
menuBtn.classList.remove("close");
menu.classList.remove("show");
menuNav.classList.remove("show");
menuBranding.classList.remove("show");
navItems.forEach((item) => item.classList.remove("show"));
// Set Menu State
showMenu = false;
}
}
app.component.html
<header>
<div class="container">
<div class="menu-btn" [class.menu-btn.close]="check" (click)="myfunction()">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<!-- Overlay that comes up when you click menu -->
<!-- Profile Image put in through CSS -->
<nav class="menu" [class.menu-btn.show]="check" (click)="myfunction()">
<div class="menu-branding" [class.menu-btn.show]="check" (click)="myfunction()">
<div class="portrait"></div>
</div>
<!-- Pages -->
<ul class="menu-nav" [class.menu-btn.show]="check" (click)="myfunction()">
<li class="nav-item current" [class.menu-btn.show]="check" (click)="myfunction()">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item" [class.menu-btn.show]="check" (click)="myfunction()">
<a href="about.html" class="nav-link">About</a>
</li>
<li class="nav-item" [class.menu-btn.show]="check" (click)="myfunction()">
<a href="work.html" class="nav-link">Work</a>
</li>
<li class="nav-item" [class.menu-btn.show]="check" (click)="myfunction()">
<a href="contact.html" class="nav-link">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
app.component.scss
$primary-color: red;
$secondary-color: blue;
@mixin easeOut {
transition: all 0.5s ease-out;
}
.container{
background-color: grey;
height:100px;
box-sizing: border-box;
}
a{
text-decoration: none;
color:white;
}
.btn-line{
color:blue;
}
header{
position: fixed;
z-index:2;
width:100%;
}
.menu-btn{
position: absolute;z-index:3;
right:35px;
top:35px;
cursor: pointer;
@include easeOut;
.btn-line{
width: 28px;
height: 3px;margin: 0 0 5px 0;background: white;
@include easeOut;
}
&.close {
transform: rotate(180deg);
.btn-line {
&:nth-child(1){
transform: rotate(45deg) translate(5px, 5px);
}
&:nth-child(2){
opacity: 0;
}
&:nth-child(3){
transform: rotate(-45deg) translate(7px, -6px);
}
}
}
}
.btn-line{
color:black;
}
app.component.ts
export class AppComponent {
title = 'menu';
check:boolean=true;
myfunction(){
this.check=true;
}
}