Improve Header widget
This commit is contained in:
prototypa
@ -16,6 +16,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
#header.scroll {
|
||||
@apply border-b dark:border-none border-gray-50 bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
import { SITE } from "~/config.mjs"
|
||||
import { SITE } from '~/config.mjs';
|
||||
---
|
||||
|
||||
<script is:inline define:vars={{ defaultTheme: SITE.defaultTheme }}>
|
||||
|
||||
function applyTheme(theme) {
|
||||
function applyTheme(theme) {
|
||||
if (theme === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
@ -12,28 +11,30 @@ function applyTheme(theme) {
|
||||
}
|
||||
}
|
||||
|
||||
if ((defaultTheme && defaultTheme.endsWith(":only")) || (!localStorage.theme && defaultTheme !== "system")) {
|
||||
applyTheme(defaultTheme.replace(":only", ""));
|
||||
}
|
||||
else if (
|
||||
if ((defaultTheme && defaultTheme.endsWith(':only')) || (!localStorage.theme && defaultTheme !== 'system')) {
|
||||
applyTheme(defaultTheme.replace(':only', ''));
|
||||
} else if (
|
||||
localStorage.theme === 'dark' ||
|
||||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
applyTheme("dark")
|
||||
applyTheme('dark');
|
||||
} else {
|
||||
applyTheme("light")
|
||||
applyTheme('light');
|
||||
}
|
||||
|
||||
function attachEvent(selector, event, fn) {
|
||||
const matches = document.querySelectorAll(selector);
|
||||
const matches = typeof selector === 'string' ? document.querySelectorAll(selector) : selector;
|
||||
if (matches && matches.length) {
|
||||
matches.forEach((elem) => {
|
||||
elem.addEventListener(event, () => fn(elem), false);
|
||||
elem.addEventListener(event, (e) => fn(e, elem), false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
let lastKnownScrollPosition = 0;
|
||||
let ticking = false;
|
||||
|
||||
attachEvent('[data-aw-toggle-menu]', 'click', function (elem) {
|
||||
elem.classList.toggle('expanded');
|
||||
document.body.classList.toggle('overflow-hidden');
|
||||
@ -42,7 +43,7 @@ function applyTheme(theme) {
|
||||
});
|
||||
|
||||
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
|
||||
if (defaultTheme.endsWith(":only")) {
|
||||
if (defaultTheme.endsWith(':only')) {
|
||||
return;
|
||||
}
|
||||
document.documentElement.classList.toggle('dark');
|
||||
@ -81,7 +82,26 @@ function applyTheme(theme) {
|
||||
newlink.href = href;
|
||||
newlink.click();
|
||||
});
|
||||
|
||||
attachEvent([document], 'scroll', function () {
|
||||
lastKnownScrollPosition = window.scrollY;
|
||||
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(() => {
|
||||
const header = document.getElementById('header');
|
||||
if (lastKnownScrollPosition > 100 && !header.classList.contains('scroll')) {
|
||||
document.getElementById('header').classList.add('scroll');
|
||||
} else if (lastKnownScrollPosition <= 100 && header.classList.contains('scroll')) {
|
||||
document.getElementById('header').classList.remove('scroll');
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.onpageshow = function () {
|
||||
const elem = document.querySelector('[data-aw-toggle-menu]');
|
||||
if (elem) {
|
||||
|
||||
@ -5,12 +5,58 @@ import ToggleTheme from '~/components/common/ToggleTheme.astro';
|
||||
import ToggleMenu from '~/components/common/ToggleMenu.astro';
|
||||
|
||||
import { getHomePermalink, getBlogPermalink, getPermalink } from '~/utils/permalinks';
|
||||
|
||||
const links = [
|
||||
{
|
||||
text: 'Landing Pages',
|
||||
links: [
|
||||
{
|
||||
text: 'Startup',
|
||||
href: getPermalink('/landing/startup'),
|
||||
},
|
||||
{
|
||||
text: 'Saas',
|
||||
href: getPermalink('/landing/saas'),
|
||||
},
|
||||
{
|
||||
text: 'Mobile App',
|
||||
href: getPermalink('/landing/mobile-app'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Pages',
|
||||
links: [
|
||||
{
|
||||
text: 'Services',
|
||||
href: getPermalink('/services'),
|
||||
},
|
||||
{
|
||||
text: 'About us',
|
||||
href: getPermalink('/about'),
|
||||
},
|
||||
{
|
||||
text: 'Contact',
|
||||
href: getPermalink('/contact'),
|
||||
},
|
||||
{
|
||||
text: 'Terms',
|
||||
href: getPermalink('/terms'),
|
||||
},
|
||||
{
|
||||
text: 'Privacy policy',
|
||||
href: getPermalink('/privacy'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Blog',
|
||||
href: getBlogPermalink(),
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<header
|
||||
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white md:bg-white/90 dark:bg-slate-900 dark:md:bg-slate-900/90 md:backdrop-blur-sm"
|
||||
id="header"
|
||||
>
|
||||
<header class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-200" id="header">
|
||||
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
|
||||
<div class="flex justify-between">
|
||||
<a class="flex items-center" href={getHomePermalink()}>
|
||||
@ -26,58 +72,38 @@ import { getHomePermalink, getBlogPermalink, getPermalink } from '~/utils/permal
|
||||
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">
|
||||
<li class="dropdown">
|
||||
<button
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
>Pages</button
|
||||
>
|
||||
<ul
|
||||
class="dropdown-menu rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white md:min-w-[200px] dark:md:bg-slate-800 drop-shadow-xl"
|
||||
>
|
||||
{
|
||||
links.map(({ text, href, links }) => (
|
||||
<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 transition duration-150 ease-in-out">
|
||||
{text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 hidden md:inline" />
|
||||
</button>
|
||||
<ul class="dropdown-menu rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white md:min-w-[200px] dark:md:bg-slate-800 drop-shadow-xl">
|
||||
{links.map(({ text: text2, href: href2 }) => (
|
||||
<li>
|
||||
<a
|
||||
class="rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href="#">Features</a
|
||||
class="first:rounded-t last:rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap"
|
||||
href={href2}
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap" href="#"
|
||||
>Profile</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href="#">Pricing</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href={getPermalink('/terms')}>Terms and Conditions</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href={getPermalink('/privacy')}>Privacy Policy</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<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"
|
||||
href={getPermalink('useful-resources-to-create-websites', 'post')}
|
||||
>Resources
|
||||
{text2}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
) : (
|
||||
<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"
|
||||
href={getBlogPermalink()}>Blog</a
|
||||
href={href}
|
||||
>
|
||||
{text}
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<li class="md:hidden">
|
||||
<a
|
||||
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
@ -85,7 +111,8 @@ import { getHomePermalink, getBlogPermalink, getPermalink } from '~/utils/permal
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
|
||||
</nav>
|
||||
<div class="md:self-center flex items-center md:mb-0">
|
||||
<div class="hidden items-center md:flex">
|
||||
<ToggleTheme iconClass="w-5 h-5" />
|
||||
<a
|
||||
@ -96,14 +123,10 @@ import { getHomePermalink, getBlogPermalink, getPermalink } from '~/utils/permal
|
||||
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
class="inline-block text-gray-500 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"
|
||||
aria-label="Astrowind Github"
|
||||
class="btn w-full ml-3 py-2.5 px-6 font-medium text-gray-600 shadow-none"
|
||||
href="https://github.com/onwidget/astrowind">Download</a
|
||||
>
|
||||
<Icon name="tabler:brand-github" class="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user