Better Header
This commit is contained in:
prototypa
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
41
src/data.js
@ -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
11
src/pages/about.astro
Normal 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
11
src/pages/contact.astro
Normal 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
11
src/pages/pricing.astro
Normal 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
11
src/pages/services.astro
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
import Layout from '~/layouts/PageLayout.astro';
|
||||
|
||||
const meta = {
|
||||
title: "Services",
|
||||
};
|
||||
---
|
||||
|
||||
<Layout {meta}>
|
||||
Services
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user