website/pikaos-site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add FAQs to the Header

Browse Source
This commit is contained in:
Gopal Kaul 2023-02-21 20:32:52 +05:30
parent 04980fc4d5
commit 67370c27f0
1 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,38 @@
---
import { Icon } from 'astro-icon';
import Logo from '~/components/common/Logo.astro';
import ToggleTheme from '~/components/common/ToggleTheme.astro';
import ToggleMenu from '~/components/common/ToggleMenu.astro';
import { Icon } from "astro-icon";
import Logo from "~/components/common/Logo.astro";
import ToggleTheme from "~/components/common/ToggleTheme.astro";
import ToggleMenu from "~/components/common/ToggleMenu.astro";
import { getHomePermalink} from '~/utils/permalinks';
import { getHomePermalink } from "~/utils/permalinks";
const links = [
{
text: 'Features',
href: '#features',
},
{
text: 'Download',
href: '#download',
},
// {
// text: 'About us',
// href: '#about',
// },
{
text: "Features",
href: "#features",
},
{
text: "FAQs",
href: "#faqs",
},
{
text: "Download",
href: "#download",
},
// {
// text: 'About us',
// href: '#about',
// },
];
---
<header class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100" id="header">
<div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-6xl">
<header
class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100"
id="header"
>
<div
class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-6xl"
>
<div class="flex justify-between">
<a class="flex items-center" href={getHomePermalink()}>
<Logo />
@ -37,14 +46,20 @@ const links = [
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
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 pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base"
>
{
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 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" />
{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 }) => (