Add global components
This commit is contained in:
parent
730547e064
commit
a0c1dedf59
3 changed files with 131 additions and 0 deletions
0
src/components/global/Footer.astro
Normal file
0
src/components/global/Footer.astro
Normal file
23
src/components/global/Head.astro
Normal file
23
src/components/global/Head.astro
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
---
|
||||||
|
const { Title, Description } = Astro.props
|
||||||
|
---
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Metadata -->
|
||||||
|
<title>{Title}</title>
|
||||||
|
<meta name="description" content={Description}>
|
||||||
|
|
||||||
|
<!-- Options -->
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="theme-color" content="#2970cc">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="apple-touch-icon" type="image/png" sizes="256x256" href="/assets/images/favicon/256x256.png">
|
||||||
|
<link rel="apple-touch-icon" type="image/png" sizes="32x32" href="/assets/images/favicon/32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="256x256" href="/assets/images/favicon/256x256.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon/32x32.png">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/@shoelace-style/shoelace/cdn/themes/dark.css" onload="document.documentElement.classList.add('sl-theme-dark');"/>
|
||||||
|
<script type="module" src="/@shoelace-style/shoelace/cdn/shoelace.js"></script>
|
||||||
|
</head>
|
||||||
108
src/components/global/Header.astro
Normal file
108
src/components/global/Header.astro
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
---
|
||||||
|
// Properties
|
||||||
|
const {Selected} = Astro.props
|
||||||
|
|
||||||
|
// Icons
|
||||||
|
import {Language, Menu} from '@iconoir/vue'
|
||||||
|
|
||||||
|
// i18n
|
||||||
|
import i18next, { t } from "i18next";
|
||||||
|
import { Trans, HeadHrefLangs } from "astro-i18next/components";
|
||||||
|
|
||||||
|
// User Agent
|
||||||
|
import { useUserAgent } from "astro-useragent"
|
||||||
|
const uaString = Astro.request.headers.get("user-agent")
|
||||||
|
const { source, isMobile } = useUserAgent(uaString)
|
||||||
|
|
||||||
|
// Properties - Selected
|
||||||
|
if (Selected === "Home") {var Select_Home = true}
|
||||||
|
else if (Selected === "Products") {var Select_Products = true}
|
||||||
|
else if (Selected === "Pricing") {var Select_Pricing = true}
|
||||||
|
else if (Selected === "Support") {var Select_Support = true}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="header-start">
|
||||||
|
<a href="/">
|
||||||
|
<img src="/images/logos/Logo.png" alt="FalixNodes LLC's Logo"/>
|
||||||
|
<p>{t("Header.Flux")}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{isMobile ?
|
||||||
|
null
|
||||||
|
:
|
||||||
|
<div class="header-center">
|
||||||
|
<a id="menu-link-home" href="/">{t("Header.Home")}</a>
|
||||||
|
<a id="menu-link-products" href="#">{t("Header.Products")}</a>
|
||||||
|
<a id="menu-link-pricing" href="#">{t("Header.Pricing")}</a>
|
||||||
|
<a id="menu-link-support" href="#">{t("Header.Support")}</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="header-end">
|
||||||
|
<a href="#">{t("Header.Login")}</a>
|
||||||
|
<a href="#">{t("Header.SignUp")}</a>
|
||||||
|
<sl-dropdown placement="bottom-end" distance="6">
|
||||||
|
<sl-button slot="trigger" caret><Language/></sl-button>
|
||||||
|
<sl-menu>
|
||||||
|
<sl-menu-item onclick="location.href = '/'">English</sl-menu-item>
|
||||||
|
<sl-menu-item onclick="location.href = '/jp'">Japanese</sl-menu-item>
|
||||||
|
</sl-menu>
|
||||||
|
</sl-dropdown>
|
||||||
|
{isMobile ?
|
||||||
|
<sl-dropdown placement="bottom-end" distance="6">
|
||||||
|
<sl-button slot="trigger" caret><Menu/></sl-button>
|
||||||
|
<sl-menu>
|
||||||
|
<sl-menu-item>Home</sl-menu-item>
|
||||||
|
<sl-menu-item>Products</sl-menu-item>
|
||||||
|
<sl-menu-item>Pricing</sl-menu-item>
|
||||||
|
<sl-menu-item>Support</sl-menu-item>
|
||||||
|
<sl-divider></sl-divider>
|
||||||
|
<sl-menu-item>Sign Up</sl-menu-item>
|
||||||
|
<sl-menu-item>Login</sl-menu-item>
|
||||||
|
</sl-menu>
|
||||||
|
</sl-dropdown>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{Select_Home ?
|
||||||
|
<style is:inline>
|
||||||
|
#menu-link-home {
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
{Select_Products ?
|
||||||
|
<style is:inline>
|
||||||
|
#menu-link-products {
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
{Select_Pricing ?
|
||||||
|
<style is:inline>
|
||||||
|
#menu-link-pricing {
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
{Select_Support ?
|
||||||
|
<style is:inline>
|
||||||
|
#menu-link-support {
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
: null
|
||||||
|
}
|
||||||
Reference in a new issue