58 lines
2.2 KiB
JavaScript
58 lines
2.2 KiB
JavaScript
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
|
|
|
/*
|
|
* foss_alternatives website
|
|
* Copyright (C) 2024 interstellar_development
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
class Header extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.innerHTML = `
|
|
<link rel="stylesheet" href="styles.css">
|
|
<header>
|
|
<div class="header-content">
|
|
<div><a href="../index.html" class="project-name">FOSS alternatives</a></div>
|
|
<button class="back-button" onclick="goBack()">← Back</button>
|
|
<button class="burger-menu" onclick="toggleMenu()">☰</button>
|
|
</div>
|
|
</header>
|
|
<div class="div-menu">
|
|
<ul class="menu">
|
|
<li><a href="../games/index.html">Games</a></li>
|
|
<li><a href="../general_purpose/index.html">General Purpose</a></li>
|
|
<li><a href="../internet_tools/index.html">Internet Tools</a></li>
|
|
<li><a href="../multimedia/index.html">Multimedia</a></li>
|
|
<li><a href="../operating_systems/index.html">Operating Systems</a></li>
|
|
<li><a href="../social_platforms/index.html">Social Platforms</a></li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('header-component', Header);
|
|
|
|
function goBack() {
|
|
window.history.back();
|
|
}
|
|
|
|
function toggleMenu() {
|
|
const menu = document.querySelector('.div-menu');
|
|
menu.style.display = menu.style.display === 'none' || menu.style.display === '' ? 'block' : 'none';
|
|
}
|