1
0
Fork 0

Use transition instead of fixed text

This commit is contained in:
Korbs 2024-06-21 05:18:00 -04:00
parent 369b5b4119
commit e4faaab288
3 changed files with 38 additions and 22 deletions

View file

@ -4,6 +4,10 @@ const {
Icon Icon
} = Astro.props } = Astro.props
// i18n
import i18next, { t } from "i18next";
import { Trans, HeadHrefLangs } from "astro-i18next/components";
// Icons // Icons
import { import {
Menu, Menu,
@ -33,35 +37,34 @@ if (Astro.url.pathname.startsWith('/watch')) {
<button class="dropdown-button" onclick="ToggleHeaderDropdown()"><Menu/></button> <button class="dropdown-button" onclick="ToggleHeaderDropdown()"><Menu/></button>
<div id="primary" class="header-dropdown"> <div id="primary" class="header-dropdown">
<p>Options</p> <p>{t('dropdown.Options')}</p>
<a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()" style="justify-content: space-between;"><div><Language/> Language</div> <NavArrowRight/></a> <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()" style="justify-content: space-between;"><div><Language/> {t('dropdown.Language')}</div> <NavArrowRight/></a>
<a href=""><ProfileCircle/> Account</a> <a href=""><ProfileCircle/> {t('dropdown.Account')}</a>
<a href=""><Settings/> Settings</a> <a href=""><Settings/> {t('dropdown.Settings')}</a>
<a href=""><List/> Instances</a> <a href=""><List/> {t('dropdown.Instances')}</a>
<p>Hub</p> <p>{t('dropdown.Hub')}</p>
<a href=""><ViewGrid/> Apps</a> <a href=""><ViewGrid/> {t('dropdown.Apps')}</a>
<a href=""><Arcade/> Games</a> <a href=""><Arcade/> {t('dropdown.Games')}</a>
<p>Open in...</p> <p>{t('dropdown.Openin')}</p>
<a href=""><CircleSpark/> Lite Mode</a> <a href=""><CircleSpark/> {t('dropdown.LiteMode')}</a>
<a href=""><Youtube/> YouTube</a> <a href=""><Youtube/> {t('dropdown.YouTube')}</a>
<a href=""><OpenNewWindow/> Invidious</a> <a href=""><OpenNewWindow/> {t('dropdown.Invidious')}</a>
<a href=""><OpenNewWindow/> Pipe</a> <a href=""><OpenNewWindow/> {t('dropdown.Pipe')}</a>
<a href=""><OpenNewWindow/> Invidious</a>
<p>Other</p> <p>{t('dropdown.Other')}</p>
<a href=""><InfoCircle/> About</a> <a href=""><InfoCircle/> {t('dropdown.About')}</a>
<a href=""><PrivacyPolicy/> Privacy</a> <a href=""><PrivacyPolicy/> {t('dropdown.Privacy')}</a>
<a href=""><Code/> Source Code</a> <a href=""><Code/> {t('dropdown.SourceCode')}</a>
</div> </div>
<div id="language" class="header-dropdown"> <div id="language" class="header-dropdown">
<p>Language</p> <p>Language</p>
<a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()"><NavArrowLeft/> Go Back</a> <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()"><NavArrowLeft/> Go Back</a>
<a href="">English</a> <a href="/api/language/en/">English</a>
<a href="">Spanish</a> <a href="">Spanish</a>
<a href="">Russian</a> <a href="">Russian</a>
<a href="">Japanese</a> <a href="/api/language/jp/">Japanese</a>
</div> </div>
<script is:inline> <script is:inline>

View file

@ -1,4 +1,13 @@
--- ---
// i18n
import i18next, { t } from "i18next";
import { Trans, HeadHrefLangs } from "astro-i18next/components";
if (Astro.cookies.get("Language").value === undefined) {Astro.cookies.set("Language", "EN", {path: "/",sameSite: 'strict'})}
var UserLanguage = Astro.cookies.get("Language").value
if (UserLanguage === "JP") {i18next.changeLanguage("jp")}
else if (UserLanguage === "EN") {i18next.changeLanguage("en")}
// Properties // Properties
const { const {
Title, Title,

View file

@ -1,4 +1,8 @@
--- ---
// i18n
import i18next, { t } from "i18next";
import { Trans, HeadHrefLangs } from "astro-i18next/components";
// Components // Components
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import { actions } from "astro:actions"; import { actions } from "astro:actions";
@ -20,11 +24,11 @@ import {
<header> <header>
<div class="header-content"> <div class="header-content">
<div class="header-start"> <div class="header-start">
<Image src={Poke} alt="Poke Logo" height={24} /> <a href={'/' + i18next.language + '/'}><Image src={Poke} alt="Poke Logo" height={24} /></a>
</div> </div>
<div class="header-center"> <div class="header-center">
<form> <form>
<input type="text" placeholder="Search"/> <input type="text" placeholder={t('header.search')}/>
<button type="submit"><Search/></button> <button type="submit"><Search/></button>
</form> </form>
</div> </div>