365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix issue #418: main navigation is not centred on md

Browse Source
This commit is contained in:
prototypa
2024-04-12 11:23:41 -04:00
parent be6bd25781
commit e017fbf529
1 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
--- ---
import { Icon } from "astro-icon/components"; import { Icon } from 'astro-icon/components';
import Logo from "~/components/Logo.astro"; import Logo from '~/components/Logo.astro';
import ToggleTheme from "~/components/common/ToggleTheme.astro"; import ToggleTheme from '~/components/common/ToggleTheme.astro';
import ToggleMenu from "~/components/common/ToggleMenu.astro"; import ToggleMenu from '~/components/common/ToggleMenu.astro';
import Button from "~/components/ui/Button.astro" import Button from '~/components/ui/Button.astro';
import { getHomePermalink } from "~/utils/permalinks"; import { getHomePermalink } from '~/utils/permalinks';
import { trimSlash, getAsset } from "~/utils/permalinks"; import { trimSlash, getAsset } from '~/utils/permalinks';
import type { CallToAction } from "~/types"; import type { CallToAction } from '~/types';
interface Link { interface Link {
text?: string; text?: string;
@@ -35,7 +35,7 @@ export interface Props {
} }
const { const {
id = "header", id = 'header',
links = [], links = [],
actions = [], actions = [],
isSticky = false, isSticky = false,
@@ -43,30 +43,36 @@ const {
isFullWidth = false, isFullWidth = false,
showToggleTheme = false, showToggleTheme = false,
showRssFeed = false, showRssFeed = false,
position = "center", position = 'center',
} = Astro.props; } = Astro.props;
const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}` const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
--- ---
<header <header
class:list={[ class:list={[
{ sticky: isSticky, relative: !isSticky, dark: isDark }, { 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", 'top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out',
]} ]}
{...isSticky ? { "data-aw-sticky-header": true } : {}} {...isSticky ? { 'data-aw-sticky-header': true } : {}}
{...id ? { id } : {}} {...id ? { id } : {}}
> >
<div class="absolute inset-0"></div> <div class="absolute inset-0"></div>
<div <div
class:list={[ class:list={[
"relative text-default py-3 px-3 md:px-6 mx-auto w-full md:flex md:justify-between", 'relative text-default py-3 px-3 md:px-6 mx-auto w-full',
{ {
"max-w-7xl": !isFullWidth, 'md:flex md:justify-between': position !== 'center',
},
{
'md:grid md:grid-cols-3 md:items-center': position === 'center',
},
{
'max-w-7xl': !isFullWidth,
}, },
]} ]}
> >
<div class:list={[{ "mr-auto rtl:mr-0 rtl:ml-auto": position === "right" }, "flex justify-between"]}> <div class:list={[{ 'mr-auto rtl:mr-0 rtl:ml-auto': position === 'right' }, 'flex justify-between']}>
<a class="flex items-center" href={getHomePermalink()}> <a class="flex items-center" href={getHomePermalink()}>
<Logo /> <Logo />
</a> </a>
@@ -75,27 +81,28 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
</div> </div>
</div> </div>
<nav <nav
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" class="items-center w-full md:w-auto hidden md:flex md:mx-5 text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:justify-self-center"
aria-label="Main navigation" aria-label="Main navigation"
> >
<ul <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" 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 md:justify-center"
> >
{ {
links.map(({ text, href, links }) => ( links.map(({ text, href, links }) => (
<li class={links?.length ? "dropdown" : ""}> <li class={links?.length ? 'dropdown' : ''}>
{links?.length ? ( {links?.length ? (
<> <>
<button class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center"> <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" /> {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> </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"> <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 }) => ( {links.map(({ text: text2, href: href2 }) => (
<li> <li>
<a <a
class:list={[ 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", '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} { 'aw-link-active': href2 === currentPath },
]} ]}
href={href2} href={href2}
> >
@@ -108,8 +115,8 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
) : ( ) : (
<a <a
class:list={[ class:list={[
"hover:text-link dark:hover:text-white px-4 py-3 flex items-centers", 'hover:text-link dark:hover:text-white px-4 py-3 flex items-center',
{ "aw-link-active": href === currentPath } { 'aw-link-active': href === currentPath },
]} ]}
href={href} href={href}
> >
@@ -123,8 +130,8 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
</nav> </nav>
<div <div
class:list={[ class:list={[
{ "ml-auto rtl:ml-0 rtl:mr-auto": position === "left" }, { 'ml-auto rtl:ml-0 rtl:mr-auto': position === 'left' },
"hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0", 'hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0 md:justify-self-end',
]} ]}
> >
<div class="items-center flex justify-between w-full md:w-auto"> <div class="items-center flex justify-between w-full md:w-auto">
@@ -146,11 +153,11 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
actions?.length ? ( actions?.length ? (
<span class="ml-4 rtl:ml-0 rtl:mr-4"> <span class="ml-4 rtl:ml-0 rtl:mr-4">
{actions.map((btnProps) => ( {actions.map((btnProps) => (
<Button {...btnProps} class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto"/> <Button {...btnProps} class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto" />
))} ))}
</span> </span>
) : ( ) : (
"" ''
) )
} }
</div> </div>