Korbs/Contour
Archived
Template
1
Fork 0
Code Issues Pull requests Activity

Add global components

Browse source
This commit is contained in:
get 2024-01-30 11:02:11 -05:00
parent 730547e064
commit a0c1dedf59
No known key found for this signature in database
3 changed files with 131 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
src/components/global/Footer.astro Normal file
View file

23
src/components/global/Head.astro Normal file
View 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
View 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
}