begin
This commit is contained in:
metacryst
16
ui/public/components/Footer.js
Normal file
16
ui/public/components/Footer.js
Normal file
@@ -0,0 +1,16 @@
|
||||
css(`
|
||||
page-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
`)
|
||||
|
||||
export default class Footer extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML += /* html */`
|
||||
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("page-footer", Footer)
|
||||
150
ui/public/components/NavBar.js
Normal file
150
ui/public/components/NavBar.js
Normal file
@@ -0,0 +1,150 @@
|
||||
css(`
|
||||
nav-bar {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100vw;
|
||||
z-index: 1;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.title-div {
|
||||
position: absolute;
|
||||
left: 2em;
|
||||
top: 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.links-div {
|
||||
position: absolute;
|
||||
right: 3em;
|
||||
top: 2.75em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo-p {
|
||||
font-size: 2em;
|
||||
margin: 0 0 0 15px;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-hamburger {
|
||||
margin-right: 8vw;
|
||||
display: none;
|
||||
max-height:40px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 1em;
|
||||
margin: 0 0 0 15px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 820px) {
|
||||
nav-bar a {
|
||||
text-decoration: none;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.title-div {
|
||||
position: static
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
.logo-p {
|
||||
font-size: 8vw;
|
||||
margin: 0 0 0 1vw;
|
||||
}
|
||||
|
||||
.nav-hamburger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.links-div {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.outer-nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 20vw;
|
||||
background: var(--tan);
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 3vw;
|
||||
max-height:80px;
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
export default class NavBar extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML += /* html */ `
|
||||
<div class="outer-nav">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<a draggable="false" href="/" id="homeLink" style="display: flex; align-items: center; text-decoration: none; color: var(--green);">
|
||||
<div class="title-div">
|
||||
<img class="logo" width="40" height="40" src="_/icons/logo.svg"/>
|
||||
<p class="logo-p">Hyperia</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="links-div">
|
||||
<a draggable="false" href="/about" class="nav-link">About</a>
|
||||
<a draggable="false" href="/join" class="nav-link">Join</a>
|
||||
<a draggable="false" href="/login" class="nav-link">Login</a>
|
||||
</div>
|
||||
|
||||
<!-- Right side: hamburger -->
|
||||
<img class="nav-hamburger" src="_/icons/hamburger.svg">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Track which anchor was pressed down
|
||||
let activeLink = null;
|
||||
|
||||
// Get all anchor tags inside this element
|
||||
const anchors = this.querySelectorAll('a');
|
||||
|
||||
anchors.forEach(anchor => {
|
||||
anchor.addEventListener('mousedown', (e) => {
|
||||
activeLink = anchor;
|
||||
});
|
||||
});
|
||||
|
||||
// Listen globally for mouseup, to detect release anywhere
|
||||
document.addEventListener('mouseup', (e) => {
|
||||
if (activeLink) {
|
||||
// Navigate to the href of the activeLink
|
||||
window.location.href = activeLink.href;
|
||||
activeLink = null;
|
||||
}
|
||||
});
|
||||
|
||||
const hamburger = this.querySelectorAll("img")[1]
|
||||
const sidebar = document.querySelector("side-bar");
|
||||
|
||||
hamburger.addEventListener("click", () => {
|
||||
if (sidebar.style.right === "0vw") {
|
||||
sidebar.style.right = "-100vw";
|
||||
} else {
|
||||
sidebar.style.right = "0vw";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("nav-bar", NavBar)
|
||||
27
ui/public/components/NavMenu.js
Normal file
27
ui/public/components/NavMenu.js
Normal file
@@ -0,0 +1,27 @@
|
||||
css(`
|
||||
nav-menu {
|
||||
position: fixed;
|
||||
bottom: 6vh;
|
||||
right: 6vh;
|
||||
width: 20vw;
|
||||
height: 10vh;
|
||||
background: var(--green);
|
||||
color: var(--tan);
|
||||
border: 20px solid var(--tan);
|
||||
}
|
||||
`)
|
||||
|
||||
export default class NavMenu extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML += /* html */ `
|
||||
<span style="display: block; height: 2vh; background-color: var(--tan); border-radius: 2px;"></span>
|
||||
<span style="display: block; height: 2vh; background-color: var(--tan); border-radius: 2px;"></span>
|
||||
<span style="display: block; height: 2vh; background-color: var(--tan); border-radius: 2px;"></span>
|
||||
<p style="font-size: 3vh; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">Menu</p>
|
||||
`
|
||||
|
||||
document.addEventListener("")
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("nav-menu", NavMenu)
|
||||
46
ui/public/components/SideBar.js
Normal file
46
ui/public/components/SideBar.js
Normal file
@@ -0,0 +1,46 @@
|
||||
css(`
|
||||
side-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -100vw;
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
background: var(--tan);
|
||||
border-left: 1px solid var(--green);
|
||||
transition: right 0.3s ease;
|
||||
z-index: 10;
|
||||
padding: 5vw;
|
||||
}
|
||||
|
||||
side-bar a {
|
||||
font-size: 8vw;
|
||||
color: var(--red)
|
||||
}
|
||||
|
||||
side-bar h2 {
|
||||
font-size: 6vw
|
||||
}
|
||||
`)
|
||||
|
||||
|
||||
export default class SideBar extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML += /* html */`
|
||||
<h2>Menu</h2>
|
||||
<ul style="list-style: none; padding: 0;">
|
||||
<li><a href="/join">Join</a></li>
|
||||
<li><a href="/locations">Locations</a></li>
|
||||
<li><a href="/donate">Donate</a></li>
|
||||
<li><a href="/events">Events</a></li>
|
||||
<li><a href="/login">Login</a></li>
|
||||
</ul>
|
||||
<img src="_/icons/x.svg" style="margin-top: 70vw; width: 10vw; height: 10vw" onclick="">
|
||||
`
|
||||
this.querySelector("img").addEventListener("click", () => {
|
||||
const sidebar = document.querySelector("side-bar");
|
||||
sidebar.style.right = "-100vw"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("side-bar", SideBar)
|
||||
Reference in New Issue
Block a user