Add components
This commit is contained in:
Korbs
parent
f96c8be123
commit
6de1fc8113
4 changed files with 284 additions and 0 deletions
161
src/components/Dropdown.astro
Normal file
161
src/components/Dropdown.astro
Normal file
|
|
@ -0,0 +1,161 @@
|
||||||
|
---
|
||||||
|
// Properties
|
||||||
|
const {
|
||||||
|
Icon
|
||||||
|
} = Astro.props
|
||||||
|
|
||||||
|
// Icons
|
||||||
|
import {
|
||||||
|
Menu,
|
||||||
|
Settings,
|
||||||
|
ProfileCircle,
|
||||||
|
CircleSpark,
|
||||||
|
Youtube,
|
||||||
|
OpenNewWindow,
|
||||||
|
ViewGrid,
|
||||||
|
Arcade,
|
||||||
|
InfoCircle,
|
||||||
|
PrivacyPolicy,
|
||||||
|
Code,
|
||||||
|
Language,
|
||||||
|
NavArrowLeft,
|
||||||
|
NavArrowRight,
|
||||||
|
List
|
||||||
|
} from '@iconoir/vue'
|
||||||
|
|
||||||
|
// Check URL
|
||||||
|
if (Astro.url.pathname.startsWith('/watch')) {
|
||||||
|
var WatchPage = true
|
||||||
|
} else {
|
||||||
|
var WatchPage = false
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<button class="dropdown-button" onclick="ToggleHeaderDropdown()"><Menu/></button>
|
||||||
|
<div id="primary" class="header-dropdown">
|
||||||
|
<p>Options</p>
|
||||||
|
<a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()" style="justify-content: space-between;"><div><Language/> Language</div> <NavArrowRight/></a>
|
||||||
|
<a href=""><ProfileCircle/> Account</a>
|
||||||
|
<a href=""><Settings/> Settings</a>
|
||||||
|
<a href=""><List/> Instances</a>
|
||||||
|
|
||||||
|
<p>Hub</p>
|
||||||
|
<a href=""><ViewGrid/> Apps</a>
|
||||||
|
<a href=""><Arcade/> Games</a>
|
||||||
|
|
||||||
|
<p>Open in...</p>
|
||||||
|
<a href=""><CircleSpark/> Lite Mode</a>
|
||||||
|
<a href=""><Youtube/> YouTube</a>
|
||||||
|
<a href=""><OpenNewWindow/> Invidious</a>
|
||||||
|
<a href=""><OpenNewWindow/> Pipe</a>
|
||||||
|
<a href=""><OpenNewWindow/> Invidious</a>
|
||||||
|
|
||||||
|
<p>Other</p>
|
||||||
|
<a href=""><InfoCircle/> About</a>
|
||||||
|
<a href=""><PrivacyPolicy/> Privacy</a>
|
||||||
|
<a href=""><Code/> Source Code</a>
|
||||||
|
</div>
|
||||||
|
<div id="language" class="header-dropdown">
|
||||||
|
<p>Language</p>
|
||||||
|
<a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()"><NavArrowLeft/> Go Back</a>
|
||||||
|
<a href="">English</a>
|
||||||
|
<a href="">Spanish</a>
|
||||||
|
<a href="">Russian</a>
|
||||||
|
<a href="">Japanese</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
/*
|
||||||
|
@licstart The following is the entire license notice for the
|
||||||
|
JavaScript code in this page.
|
||||||
|
|
||||||
|
Copyright (C) 2024 SudoVanilla
|
||||||
|
|
||||||
|
The JavaScript code in this page is free software: you can
|
||||||
|
redistribute it and/or modify it under the terms of the GNU
|
||||||
|
General Public License (GNU GPL) as published by the Free Software
|
||||||
|
Foundation, either version 3 of the License, or (at your option)
|
||||||
|
any later version. The code is distributed WITHOUT ANY WARRANTY;
|
||||||
|
without even the implied warranty of MERCHANTABILITY or FITNESS
|
||||||
|
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
|
||||||
|
|
||||||
|
As additional permission under GNU GPL version 3 section 7, you
|
||||||
|
may distribute non-source (e.g., minimized or compacted) forms of
|
||||||
|
that code without the copy of the GNU GPL normally required by
|
||||||
|
section 4, provided you include this license notice and a URL
|
||||||
|
through which recipients can access the Corresponding Source.
|
||||||
|
|
||||||
|
|
||||||
|
@licend The above is the entire license notice
|
||||||
|
for the JavaScript code in this page.
|
||||||
|
*/
|
||||||
|
function ToggleHeaderDropdown() {
|
||||||
|
var HeaderDropdown = document.querySelector(".header-dropdown#primary");
|
||||||
|
if (HeaderDropdown.style.display === "flex") {
|
||||||
|
HeaderDropdown.style.display = "none";
|
||||||
|
} else {
|
||||||
|
HeaderDropdown.style.display = "flex";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function ToggleHeaderLanguageDropdown() {
|
||||||
|
var HeaderLanguageDropdown = document.querySelector(".header-dropdown#language");
|
||||||
|
if (HeaderLanguageDropdown.style.display === "flex") {
|
||||||
|
HeaderLanguageDropdown.style.display = "none";
|
||||||
|
} else {
|
||||||
|
HeaderLanguageDropdown.style.display = "flex";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.dropdown-button {
|
||||||
|
color: white;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
padding: 4px 6px;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
width: 18px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-dropdown {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
right: 24px;
|
||||||
|
background: #202020;
|
||||||
|
border-radius: 12px;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 12px 6px 8px 6px;
|
||||||
|
p {
|
||||||
|
margin: 0px 0px 0px 12px;
|
||||||
|
color: gray;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 6px 12px !important;
|
||||||
|
aspect-ratio: inherit !important;
|
||||||
|
min-width: 200px;
|
||||||
|
border-radius: 6px;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
0
src/components/global/Footer.astro
Normal file
0
src/components/global/Footer.astro
Normal file
24
src/components/global/Head.astro
Normal file
24
src/components/global/Head.astro
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
// Properties
|
||||||
|
const {
|
||||||
|
Title,
|
||||||
|
Description
|
||||||
|
} = Astro.props
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>{Title}</title>
|
||||||
|
<link href=/favicon.ico rel=icon>
|
||||||
|
<link rel="manifest" href="/manifest.json">
|
||||||
|
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="darkreader-lock">
|
||||||
|
<meta name="theme-color" content="#414161">
|
||||||
|
<meta http-equiv="content-language" content="en-us">
|
||||||
|
<meta name="viewport" content="width=device-1200px, initial-scale=1.0, shrink-to-fit=yes, viewport-fit=cover">
|
||||||
|
<meta content="▶▶ Poke - The privacy app of your dreams!" property=og:title>
|
||||||
|
<meta content="Poke is a free software YouTube front-end, search engine, translator, map app, and more!! Watch silly videos, search the internet, and do all of that and more anonymously in this all-in-one privacy app!!!" property="twitter:description">
|
||||||
|
<meta content="https://cdn.glitch.global/302c6ee0-629f-453b-9024-bad1f8d7be36/poke.png?v=1716216428745" property="og:image">
|
||||||
|
<meta content="summary_large_image" name="twitter:card" />
|
||||||
99
src/components/global/Header.astro
Normal file
99
src/components/global/Header.astro
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
---
|
||||||
|
// Components
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
import { actions } from "astro:actions";
|
||||||
|
import Dropdown from '@components/Dropdown.astro'
|
||||||
|
|
||||||
|
// Images
|
||||||
|
import Poke from '@assets/poke-text.svg'
|
||||||
|
|
||||||
|
// Icons
|
||||||
|
import {
|
||||||
|
Server,
|
||||||
|
Gamepad,
|
||||||
|
Settings,
|
||||||
|
Search,
|
||||||
|
Language
|
||||||
|
} from '@iconoir/vue'
|
||||||
|
---
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="header-start">
|
||||||
|
<Image src={Poke} alt="Poke Logo" height={24} />
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<form>
|
||||||
|
<input type="text" placeholder="Search"/>
|
||||||
|
<button type="submit"><Search/></button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="header-end">
|
||||||
|
<Dropdown/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
background: #161616;
|
||||||
|
border-bottom: 2px #232323 solid;
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px 24px;
|
||||||
|
align-items: center;
|
||||||
|
margin: auto;
|
||||||
|
max-width: 1200px;
|
||||||
|
position: relative;
|
||||||
|
.header-center {
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
input {
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
border: 2px #333 solid;
|
||||||
|
border-right: 0px;
|
||||||
|
border-radius: 3rem 0px 0px 3rem;
|
||||||
|
padding: 6px 12px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
border: 2px #333 solid;
|
||||||
|
border-left: 0px;
|
||||||
|
border-radius: 0px 3rem 3rem 0px;
|
||||||
|
padding: 1px 8px 0px 0px;
|
||||||
|
cursor: var(--pointer-cursor);
|
||||||
|
svg {
|
||||||
|
width: 16px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-end {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
padding: 4px 6px;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
width: 18px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in a new issue