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

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

@ -1,19 +1,23 @@
--- ---
import { Icon } from 'astro-icon'; import { Icon } from "astro-icon";
import Logo from '~/components/common/Logo.astro'; import Logo from "~/components/common/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 { getHomePermalink} from '~/utils/permalinks'; import { getHomePermalink } from "~/utils/permalinks";
const links = [ const links = [
{ {
text: 'Features', text: "Features",
href: '#features', href: "#features",
}, },
{ {
text: 'Download', text: "FAQs",
href: '#download', href: "#faqs",
},
{
text: "Download",
href: "#download",
}, },
// { // {
// text: 'About us', // text: 'About us',
@ -22,8 +26,13 @@ const links = [
]; ];
--- ---
<header class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100" id="header"> <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"> 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"> <div class="flex justify-between">
<a class="flex items-center" href={getHomePermalink()}> <a class="flex items-center" href={getHomePermalink()}>
<Logo /> <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" 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" 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 }) => ( links.map(({ text, href, links }) => (
<li class={links?.length ? 'dropdown' : ''}> <li class={links?.length ? "dropdown" : ""}>
{links?.length ? ( {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"> <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> </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"> <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 }) => ( {links.map(({ text: text2, href: href2 }) => (