Files
_resources/_tecky/party-planner/backend/public/functions/addNavbar.js
louiscklaw 04dbefcbaf update,
2025-02-01 01:58:47 +08:00

57 lines
2.0 KiB
JavaScript

export function addNavbar() {
// innerHTML only works for link and img and text, not Script tag
document.querySelector('head').innerHTML += `
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Pacifico&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="/addNavbar.css" />
`;
document.querySelector('.navbar-container').innerHTML = `
<div class="row">
<div class="col-12 header-nav">
<nav class="navbar">
<a class="navbar-brand" href="/index.html">
<img src="/asset/party_icon.jpg" width="54" height="54" class="d-inline-block align-top">
<div class="navbar-logo-text">
Party Planner
</div>
</a>
</nav>
<div class="login-part">
<div class="user-login dropdown">
<button type="button" class="btn landing-Page-login-btn dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/personalPage/personalPage.html">Edit Profile</a></li>
<li><a class="dropdown-item" href="/comment/comment.html">Comments</a></li>
<li><a class="dropdown-item logout">Log out</a></li>
</ul>
</div>
</div>
</div>
</div>
`;
document.querySelector('.logout').addEventListener('click', async () => {
const res = await fetch('/login/logout', {
method: 'POST'
});
if (res.status !== 200) {
const data = await res.json();
alert(data.msg);
return;
}
const result = await res.json();
if (result.status) {
window.location.href = '/';
} else {
alert('Unable to log out!');
}
});
}