Korbs/Pandora
1
Fork 0
Code Issues Pull requests Activity

Add Header componet, optimize mobile support

Browse source
This commit is contained in:
Korbs 2024-12-24 05:12:45 -05:00
parent 3a3bfaaef7
commit 750daa74e6
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
3 changed files with 175 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.ts
View file

@ -5,7 +5,8 @@ import Hero from "./src/blocks/Hero.astro"
// Components
import Banner from "./src/Banner.astro"
import BlogPost from "./src/BlogPost.astro";
import Header from "./src/Header.astro";
import Image from "./src/Image.astro";
// Export
export {Banner, BlogPost, CallToAction, Image, Hero}
export {Banner, BlogPost, CallToAction, Image, Header, Hero}

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@sudovanilla/pandora",
"version": "1.7.4",
"version": "1.7.5",
"author": "SudoVanilla",
"displayName": "Pandora",
"description": "Astro component library built for SudoVanilla related websites and projects.",

172
src/Header.astro Normal file
View file

@ -0,0 +1,172 @@
---
// Properties
const {
Title,
Logo,
MobilePosition = "Top"
} = Astro.props
// Components
import Image from './Image.astro'
---
<header class="pd-header pd-desktop-view">
<div class="pd-header-start">
{Logo ?
<Image class:list={'pd-header-logo'} Source={Logo}/>
:
null
}
{Title ?
<a style="text-decoration: none;" href="/" class="pd-header-title"><strong>{Title}</strong></a>
:
null
}
<slot name="header-start"></slot>
</div>
<div class="pd-header-center">
<slot name="header-center"></slot>
</div>
<div class="pd-header-end">
<slot name="header-end"></slot>
</div>
</header>
<header class="pd-header pd-mobile-view">
<div class="pd-header-start">
{Logo ?
<Image class:list={'pd-header-logo'} Source={Logo}/>
:
null
}
{Title ?
<a style="text-decoration: none;" href="/" class="pd-header-title"><strong>{Title}</strong></a>
:
null
}
<slot name="header-start"></slot>
</div>
<div class="pd-header-end">
<details>
<summary>Menu</summary>
<div class="pd-header-mobile-dropdown">
<slot name="header-center"></slot>
<hr/>
<slot name="header-end"></slot>
</div>
</details>
</div>
</header>
{
()=> {
if (MobilePosition === "Top") {
return <style>
.pd-header.pd-mobile-view {
position: sticky;
top: 12px;
margin-bottom: 26px;
.pd-header-end {
details[open=""] {
top: -2px;
}
}
}
</style>
} else if (MobilePosition === "Bottom") {
return <style>
.pd-header.pd-mobile-view {
position: fixed;
bottom: 24px;
top: inherit;
width: calc(100% - 100px);
.pd-header-end {
details[open=""] {
bottom: -2px;
}
}
}
</style>
}
}
}
<style lang="scss" is:global>
// Media Adaption
@media screen and (max-width: 800px) {.pd-desktop-view {display: none !important}}
@media screen and (min-width: 800px) {.pd-mobile-view {display: none !important}}
// Mobile View
.pd-header.pd-mobile-view {
border: 2px #373737 solid;
border-radius: 12px;
padding: 16px 24px;
font-size: 24px;
z-index: 24;
backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
.pd-header-end {
details {
&[open=""] {
position: absolute;
left: -2px;
width: calc(100% - 32px);
display: grid;
backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
border: 2px #373737 solid;
border-radius: 12px;
gap: 6px;
padding: 16px;
summary {
margin-bottom: 12px;
}
}
hr {
border: none;
background: #373737;
height: 2px;
width: 100%;
border-radius: 3rem;
opacity: 0.25;
margin: 0px;
}
summary {
background: #373737;
color: white;
border-radius: 6px;
padding: 8px 24px;
}
.pd-header-mobile-dropdown {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 26px;
}
}
}
}
// Desktop View
.pd-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
padding: 24px 0px;
h2, p, a {
margin: 0px;
}
.pd-header-start,
.pd-header-center,
.pd-header-end {
display: flex;
align-items: center;
gap: 16px;
}
.pd-header-start {
img {
width: 32px;
height: 30px;
}
}
}
</style>