mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better Header

Browse Source
This commit is contained in:
prototypa
2023-07-27 12:55:48 -04:00
parent 2c8597fce6
commit 242a172b36
8 changed files with 185 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/styles/base.css
View File

@ -35,8 +35,26 @@
}
}
#header.scroll {
@apply shadow-md md:shadow-lg bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
#header.scroll > div:first-child {
@apply bg-white md:bg-white/90 md:backdrop-blur-md;
box-shadow: 0 0.375rem 1.5rem 0 rgb(140 152 164 / 13%);
}
.dark #header.scroll > div:first-child,
#header.scroll.dark > div:first-child {
@apply bg-white md:bg-[#030621e6] border-b border-gray-500/20;
box-shadow: none;
}
/* #header.scroll > div:last-child {
@apply py-3;
} */
#header.expanded nav {
position: fixed;
top: 70px;
left: 0;
right: 0;
bottom: 70px !important;
padding: 0 5px;
}
.dropdown:hover .dropdown-menu {

27
src/components/common/BasicScripts.astro
View File

@ -36,17 +36,19 @@ import { SITE } from '~/config.mjs';
let ticking = true;
attachEvent('#header nav', 'click', function () {
document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
document.body.classList.remove('overflow-hidden');
document.getElementById('header')?.classList.remove('h-screen');
document.querySelector('#header nav')?.classList.add('hidden');
document.querySelector("[data-aw-toggle-menu]")?.classList.remove("expanded");
document.body.classList.remove("overflow-hidden");
document.getElementById("header")?.classList.remove("h-screen");
document.querySelector("#header nav")?.classList.add("hidden");
});
attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
elem.classList.toggle('expanded');
document.body.classList.toggle('overflow-hidden');
document.getElementById('header')?.classList.toggle('h-screen');
document.querySelector('#header nav')?.classList.toggle('hidden');
attachEvent('[data-aw-toggle-menu]', 'click', function () {
document.body.classList.toggle("overflow-hidden");
document.getElementById("header")?.classList.toggle("h-screen");
document.getElementById("header")?.classList.toggle("expanded");
document.getElementById("header")?.classList.toggle("bg-page");
document.querySelector("#header nav")?.classList.toggle("hidden");
document.querySelector("#header > div > div:last-child")?.classList.toggle("hidden");
});
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
@ -119,8 +121,9 @@ import { SITE } from '~/config.mjs';
if (elem) {
elem.classList.remove('expanded');
}
document.body.classList.remove('overflow-hidden');
document.getElementById('header')?.classList.remove('h-screen');
document.querySelector('#header nav')?.classList.add('hidden');
document.body.classList.remove("overflow-hidden");
document.getElementById("header")?.classList.remove("h-screen");
document.getElementById("header")?.classList.remove("expanded");
document.querySelector("#header nav")?.classList.add("hidden");
};
</script>

117
src/components/widgets/Header.astro
View File

@ -1,10 +1,11 @@
---
import { Icon } from 'astro-icon/components';
import Logo from '~/components/Logo.astro';
import ToggleTheme from '~/components/common/ToggleTheme.astro';
import ToggleMenu from '~/components/common/ToggleMenu.astro';
import { Icon } from "astro-icon/components";
import Logo from "~/components/Logo.astro";
import ToggleTheme from "~/components/common/ToggleTheme.astro";
import ToggleMenu from "~/components/common/ToggleMenu.astro";
import { getHomePermalink, getAsset } from '~/utils/permalinks';
import { getHomePermalink } from "~/utils/permalinks";
import { trimSlash, getAsset } from "~/utils/permalinks";
interface Link {
text?: string;
@ -14,67 +15,88 @@ interface Link {
}
interface ActionLink extends Link {
type?: string;
class?: string;
}
interface MenuLink extends Link {
links?: Array<Link>;
links?: Array<MenuLink>;
}
export interface Props {
id?: string;
links?: Array<MenuLink>;
actions?: Array<ActionLink>;
isSticky?: boolean;
isDark?: boolean;
isFullWidth?: boolean;
showToggleTheme?: boolean;
showRssFeed?: boolean;
position?: string;
}
const {
id = "header",
links = [],
actions = [],
isSticky = false,
isDark = false,
isFullWidth = false,
showToggleTheme = false,
showRssFeed = false,
position = 'center',
position = "center",
} = Astro.props;
const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
---
<header
class:list={[
{ sticky: isSticky, relative: !isSticky },
'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100 not-prose',
{ sticky: isSticky, relative: !isSticky, dark: isDark },
"top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out",
]}
id="header"
{...id ? { id } : {}}
>
<div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-7xl">
<div class:list={[{"mr-auto": position === "right"}, "flex justify-between"]}>
<div class="absolute inset-0"></div>
<div
class:list={[
"relative text-default py-3 px-3 md:px-6 mx-auto w-full md:flex md:justify-between",
{
"max-w-7xl": !isFullWidth,
},
]}
>
<div class:list={[{ "mr-auto rtl:mr-0 rtl:ml-auto": position === "right" }, "flex justify-between"]}>
<a class="flex items-center" href={getHomePermalink()}>
<Logo />
</a>
<div class="flex items-center md:hidden">
{showToggleTheme && <ToggleTheme />}
{/* <ToggleTheme /> */}
<ToggleMenu />
</div>
</div>
<nav
class="items-center w-full md:w-auto hidden md:flex dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible md:mx-5"
class="items-center w-full md:w-auto hidden md:flex text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:mx-5"
aria-label="Main navigation"
>
<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
<ul
class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium"
>
{
links.map(({ text, href, links }) => (
<li class={links?.length ? 'dropdown' : ''}>
<li class={links?.length ? "dropdown" : ""}>
{links?.length ? (
<>
<button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center">
{text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 hidden md:inline" />
<button class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center">
{text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline" />
</button>
<ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl">
{links.map(({ text: text2, href: href2 }) => (
<li>
<a
class="first:rounded-t last:rounded-b md:hover:bg-gray-200 dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap"
class:list={[
"first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap",
{ "aw-link-active" : href2 === currentPath}
]}
href={href2}
>
{text2}
@ -85,7 +107,10 @@ const {
</>
) : (
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
class:list={[
"hover:text-link dark:hover:text-white px-4 py-3 flex items-centers",
{ "aw-link-active": href === currentPath }
]}
href={href}
>
{text}
@ -96,38 +121,38 @@ const {
}
</ul>
</nav>
<div class:list={[{ 'ml-auto': position === 'left' }, 'md:self-center flex items-center md:mb-0']}>
<div class="hidden items-center md:flex">
{showToggleTheme && <ToggleTheme iconClass="w-5 h-5" />}
{
showRssFeed && (
<a
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS Feed"
href={getAsset('/rss.xml')}
>
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
)
}
<div
class:list={[
{ "ml-auto rtl:ml-0 rtl:mr-auto": position === "left" },
"hidden md:self-center flex md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 bottom-0 p-3 md:p-0",
]}
>
<div class="items-center flex justify-between w-full md:w-auto">
<div class="flex">
{showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
{
showRssFeed && (
<a
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS Feed"
href={getAsset('/rss.xml')}
>
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
)
}
</div>
{
actions?.length ? (
<span class="ml-4">
{actions.map(({ text, href, type }) => (
<a
class:list={[
'btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm',
{ 'btn-ghost': type === 'ghost', 'btn-primary': type === 'primary' },
]}
href={href}
>
<span class="ml-4 rtl:ml-0 rtl:mr-0">
{actions.map(({ text, href, class: className }) => (
<a class:list={["btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm", className]} href={href}>
<Fragment set:html={text} />
</a>
))}
</span>
) : (
''
""
)
}
</div>

41
src/data.js
View File

@ -23,20 +23,24 @@ export const headerData = {
text: 'Pages',
links: [
{
text: 'Features',
text: 'Features (Anchor Link)',
href: getPermalink('/#features'),
},
{
text: 'Services',
href: getPermalink('/services'),
},
{
text: 'Pricing',
href: '#',
href: getPermalink('/pricing'),
},
{
text: 'About us',
href: '#',
href: getPermalink('/about'),
},
{
text: 'Contact',
href: '#',
href: getPermalink('/contact'),
},
{
text: 'Terms',
@ -48,13 +52,38 @@ export const headerData = {
},
],
},
{
text: "Blog",
links: [
{
text: "Blog List",
href: getBlogPermalink(),
},
{
text: "Article",
href: getPermalink("get-started-website-with-astro-tailwind-css", "post"),
},
{
text: "Article (with Widgets)",
href: getPermalink("markdown-elements-demo-post", "post"),
},
{
text: "Category Page",
href: getPermalink("tutorials", "category"),
},
{
text: "Tag Page",
href: getPermalink("astro", "tag"),
},
],
},
{
text: 'Widgets',
href: '#',
},
{
text: 'Blog',
href: getBlogPermalink(),
text: 'Contact',
href: '#',
},
],
actions: [{ type: 'button', text: 'Download', href: 'https://github.com/onwidget/astrowind' }],

11
src/pages/about.astro Normal file
View File

@ -0,0 +1,11 @@
---
import Layout from '~/layouts/PageLayout.astro';
const meta = {
title: "About us",
};
---
<Layout {meta}>
About us
</Layout>

11
src/pages/contact.astro Normal file
View File

@ -0,0 +1,11 @@
---
import Layout from '~/layouts/PageLayout.astro';
const meta = {
title: "Contact",
};
---
<Layout {meta}>
Contact
</Layout>

11
src/pages/pricing.astro Normal file
View File

@ -0,0 +1,11 @@
---
import Layout from '~/layouts/PageLayout.astro';
const meta = {
title: "Pricing",
};
---
<Layout {meta}>
Pricing
</Layout>

11
src/pages/services.astro Normal file
View File

@ -0,0 +1,11 @@
---
import Layout from '~/layouts/PageLayout.astro';
const meta = {
title: "Services",
};
---
<Layout {meta}>
Services
</Layout>