navbar.html

<!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">
    <title>IdeaKart💡</title>
    <link rel="stylesheet" href="navbar.css">
</head>
<body>


    <!-- navBar section -->


    <section id="header">
        <a href="index.html" class="logo">IdeaKart💡</a>
        <div id="search_box">
            <input type="text" placeholder="Search for product">
            <button>Search</button>
        </div>

        <div>
            <ul id="navbar">
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="about_page.html">About</a></li>
                <li><a href="contact_us_page.html">Contact</a></li>
                <li id="login_text"><a href="login.html">Login</a></li>
                <li><a href="cart.html">🛒</a></li>

            </ul>
        </div>    
    </section>

    
</body>
</html>


<script src="script.js">

</script>


<script>
    let isSignin = JSON.parse(localStorage.getItem("signinData"));
    let current_user_name = isSignin[0].name;
  
    if (isSignin !== null) {
      document.querySelector("#login_text").innerHTML =
  
        `<select name="current_user" id="current_user">
     <option id="useless" class="dash_options" value="">${current_user_name}</option>
     <option class="dash_options" value="Dashboard">Dashboard</option>
     <option class="dash_options" value="Notifications">Notifications</option>
     <option class="dash_options" value="sign_out">Sign Out</option>
   </select>`
    }
  
    let Dash = document.querySelector("#current_user");
    Dash.addEventListener("change", dashFunction);
  
    function dashFunction() {
      if (Dash.value == "sign_out") {
        localStorage.removeItem("signinData");
        window.location.reload();
      } else if (Dash.value == "Dashboard") {
        window.location.href = "dashboard_home.html";
      } else if (Dash.value == "Notifications") {
        window.location.href = "notification.html";
      }
    }
  </script>