<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Futuristic-Technologies | <%= title %>
    </title>
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
</head>

<body>
    <div class="cursor"></div>
    <nav class="navbar">
        <!-- mobile menu controls -->
        <label for="menuBtn"><img src="/icons/bars-solid.svg" alt="menu" class="menu"><input type="checkbox" id="menuBtn"></label>

        <!-- desktop menu -->
        <ul class="desktop">
            <li><a href="/">Home</a></li>
            <li><a href="/products">Products</a></li>
            <li><a href="/contact-us">Contact Us</a></li>
            <li><a href="/about-us">About Us</a></li>
        </ul>
        
        <a href="/"><img src="/icons/10-modified.png" alt="home" class="home"></a>
        
        <!-- mobile menu -->
        <ul class="mobile">
            <li><a href="/products">Products</a></li>
            <li><a href="/contact-us">Contact Us</a></li>
            <li><a href="/about-us">About Us</a></li>
        </ul>

        
    </nav>





<script>
    const menuBtn = document.querySelector('#menuBtn');
    const menuBtnIc = document.querySelector('.menu')
    const menu = document.querySelector('.mobile');
    
// setup mobile menu functionality
    menuBtn.checked = false;
    menuBtn.addEventListener('change',(e)=>{
        if(e.target.checked){
            menu.classList.add('showMenu');
            menuBtnIc.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(180deg)" }], { duration: 200 })
            menuBtnIc.src = "/icons/xmark-solid.svg"
            
        }
        else{
             menuBtnIc.animate([{ transform: "rotate(180deg)" }, { transform: "rotate(0deg)" }], { duration: 200 })
            menu.classList.remove('showMenu')
            menuBtnIc.src = '/icons/bars-solid.svg'
        }
    })

    // cursor animation
    const cursor = (e) => {
            mouseCursor.style.top = e.pageY + 'px';
            mouseCursor.style.left = e.pageX + 'px';
        }

    let mouseCursor = document.querySelector('.cursor');
    window.addEventListener('mousemove',cursor);

    
</script>    