From 242a172b36698c16c6c7b0b0459d5770f75a1fa5 Mon Sep 17 00:00:00 2001 From: prototypa Date: Thu, 27 Jul 2023 12:55:48 -0400 Subject: [PATCH] Better Header --- src/assets/styles/base.css | 22 ++++- src/components/common/BasicScripts.astro | 27 +++--- src/components/widgets/Header.astro | 117 ++++++++++++++--------- src/data.js | 41 ++++++-- src/pages/about.astro | 11 +++ src/pages/contact.astro | 11 +++ src/pages/pricing.astro | 11 +++ src/pages/services.astro | 11 +++ 8 files changed, 185 insertions(+), 66 deletions(-) create mode 100644 src/pages/about.astro create mode 100644 src/pages/contact.astro create mode 100644 src/pages/pricing.astro create mode 100644 src/pages/services.astro diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index 3436c97..e120622 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -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 { diff --git a/src/components/common/BasicScripts.astro b/src/components/common/BasicScripts.astro index 5883e7f..679cffd 100644 --- a/src/components/common/BasicScripts.astro +++ b/src/components/common/BasicScripts.astro @@ -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"); }; diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro index 11e1330..ce96c7e 100644 --- a/src/components/widgets/Header.astro +++ b/src/components/widgets/Header.astro @@ -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; + links?: Array; } export interface Props { + id?: string; links?: Array; actions?: Array; 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)}` ---