-
Notifications
You must be signed in to change notification settings - Fork 608
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #491 from midudev/feat-header
Full Responsive Menu/Header Figma
- Loading branch information
Showing
8 changed files
with
264 additions
and
56 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| --- | ||
| import Typography from "@/components/Typography.astro" | ||
| --- | ||
|
|
||
| <Typography as="span" variant="body" color="neutral" class:list={"text-center"}> | ||
| © {new Date().getFullYear()} La Velada del Año <span | ||
| aria-hidden="true" | ||
| class="hidden md:inline">|</span | ||
| ><br aria-hidden="true" class="block md:hidden" /> Todos los derechos reservados. | ||
| </Typography> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| --- | ||
| const width = "w-6" | ||
| const genericHamburgerLine = `h-[2px] ${width} bg-gray-300 transition ease transform duration-300` | ||
| --- | ||
|
|
||
| <button | ||
| id={Astro.props.id} | ||
| class:list={[ | ||
| `hamburgerButton group relative flex h-[20px] flex-col items-center justify-between lg:hidden`, | ||
| width, | ||
| ]} | ||
| aria-label="hamburguer menu button" | ||
| > | ||
| <div class:list={[`group-[.open]:translate-y-2 group-[.open]:rotate-45`, genericHamburgerLine]}> | ||
| </div> | ||
| <div class:list={[`group-[.open]:opacity-0`, genericHamburgerLine]}></div> | ||
| <div class:list={[`group-[.open]:opacity-0`, genericHamburgerLine]}></div> | ||
| <div | ||
| class:list={[ | ||
| `group-[.open]:-translate-y-[0.6rem] group-[.open]:-rotate-45 `, | ||
| genericHamburgerLine, | ||
| ]} | ||
| > | ||
| </div> | ||
| </button> | ||
|
|
||
| <script> | ||
| import { $, $$ } from "@/consts/dom-selector" | ||
| document.addEventListener("astro:page-load", () => { | ||
| $$(".hamburgerButton").forEach((button) => { | ||
| button.addEventListener("click", () => { | ||
| const hamburgerButton = $(".hamburgerButton") | ||
| hamburgerButton?.classList.toggle("open") | ||
| hamburgerButton?.dispatchEvent(new CustomEvent("hamburgerButtonClicked")) | ||
| }) | ||
| }) | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| --- | ||
| import HamburgerButton from "@/components/HamburgerButton.astro" | ||
| import HeroLogo from "@/components/HeroLogo.astro" | ||
| import DrawnXLogo from "./DrawnXLogo.astro" | ||
| import Footer from "@/sections/Footer.astro" | ||
| import FooterContent from "@/components/FooterContent.astro" | ||
| import SocialButtons from "@/components/SocialButtons.astro" | ||
| const pages = [ | ||
| { name: "El Evento", href: "/" }, | ||
| { name: "Combates", href: "/combates", disabled: true }, | ||
| { name: "Pronósticos", href: "/pronosticos", disabled: true }, | ||
| { name: "Entradas", href: "/entradas", disabled: true }, | ||
| ] | ||
| --- | ||
|
|
||
| <header class="mb-10 h-16 lg:h-24"> | ||
| <nav class="group flex h-full w-full items-center justify-between px-10 lg:justify-center"> | ||
| { | ||
| pages.map(({ disabled, name, href }, key) => ( | ||
| <> | ||
| <a | ||
| href={disabled ? "" : href} | ||
| class:list={[ | ||
| "nav-item relative hidden h-full select-none flex-col items-center justify-center gap-1 px-10 text-xl uppercase text-white lg:flex", | ||
| { "cursor-not-allowed": disabled }, | ||
| ]} | ||
| > | ||
| <span class="z-10">{name}</span> | ||
| {disabled ? ( | ||
| <span class="absolute mt-10 -skew-x-6 text-xs text-accent">Próximamente</span> | ||
| ) : ( | ||
| <div class="background absolute -z-10 h-full w-full" /> | ||
| )} | ||
| </a> | ||
| {key == 1 && <div class={`hidden w-64 lg:block`} />} | ||
| </> | ||
| )) | ||
| } | ||
| <a href="/"><DrawnXLogo class:list={`block w-10 lg:hidden`} /></a> | ||
| <HamburgerButton class:list={`block lg:hidden`} id="menuButton" /> | ||
| <div | ||
| class="absolute inset-0 z-[888] flex h-screen w-screen flex-col items-center overflow-x-auto bg-[var(--background-color)] px-10 lg:hidden" | ||
| id="menuMobileContent" | ||
| > | ||
| <aside class="flex min-h-16 w-full items-center justify-between"> | ||
| <span class="text-xl font-semibold uppercase text-primary">Menú</span> | ||
| <HamburgerButton id="innerMenuButton" /> | ||
| </aside> | ||
| <div class="flex min-h-2 w-full items-center"> | ||
| <hr | ||
| class="h-[2px] w-full border-t-0" | ||
| style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)" | ||
| /> | ||
| </div> | ||
| <nav class="flex w-full flex-col items-center gap-5"> | ||
| <img src="img/lvda.webp" class="accent-drop-shadow my-4 max-w-60 drop-shadow-lg" /> | ||
| <hr | ||
| class="h-[2px] w-full border-t-0" | ||
| style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)" | ||
| /> | ||
| { | ||
| pages.map(({ disabled, name, href }, key) => ( | ||
| <> | ||
| <a | ||
| href={href} | ||
| class:list={[ | ||
| "flex flex-col items-center justify-center gap-2 text-xl capitalize", | ||
| { "pointer-events-none": disabled }, | ||
| ]} | ||
| > | ||
| <span class="z-10 uppercase text-primary">{name}</span> | ||
| {disabled && <span class="text-accent">Próximamente</span>} | ||
| </a> | ||
| <hr | ||
| class="h-[2px] w-full border-t-0" | ||
| style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)" | ||
| /> | ||
| </> | ||
| )) | ||
| } | ||
| <nav class="my-4 flex flex-col gap-10"> | ||
| <FooterContent /> | ||
| <SocialButtons class="flex items-center justify-center" /> | ||
| </nav> | ||
| </nav> | ||
| </div> | ||
| </nav> | ||
| <div class="relative flex h-2 w-full flex-col items-center"> | ||
| <div class="absolute flex h-full w-full items-center"> | ||
| <hr | ||
| class="h-[2px] w-full border-t-0" | ||
| style="background:linear-gradient(to right, transparent 3%, white 35%, white 100%)" | ||
| /> | ||
| <HeroLogo class:list={`-mx-2 h-60 w-auto lg:-ml-5 lg:h-80`} noEffect /> | ||
| <hr | ||
| class="h-[2px] w-full border-t-0" | ||
| style="background:linear-gradient(to left, transparent 3%, white 35%, white 100%)" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <style> | ||
| .nav-item .background { | ||
| position: absolute; | ||
| inset: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| opacity: 0; | ||
| background: linear-gradient(to bottom, rgba(221, 221, 221, 20%) 0%, transparent 100%); | ||
| transition: opacity 0.3s; | ||
| } | ||
|
|
||
| .nav-item:hover .background { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| #menuMobileContent { | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| transition: opacity 0.3s; | ||
| } | ||
|
|
||
| #menuMobileContent.open { | ||
| opacity: 1 !important; | ||
| pointer-events: all; | ||
| } | ||
|
|
||
| .accent-drop-shadow { | ||
| filter: drop-shadow(0px 0px 25px rgba(var(--color-accent-rgb), 0.25)); | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| import { $, $$ } from "@/consts/dom-selector" | ||
| document.addEventListener("astro:page-load", () => { | ||
| const nav = $("nav") | ||
| const menuButton = $("#menuButton") | ||
| const innerMenuButton = $("#innerMenuButton") | ||
|
|
||
| menuButton?.addEventListener("hamburgerButtonClicked", () => toggleMenu(nav)) | ||
| innerMenuButton?.addEventListener("hamburgerButtonClicked", () => toggleMenu(nav)) | ||
|
|
||
| function toggleMenu(nav: HTMLElement | null) { | ||
| $("#menuMobileContent")?.classList.toggle("open") | ||
| nav?.classList.toggle("open") | ||
| document.body.classList.toggle("overflow-hidden") | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| --- | ||
| import GithubIcon from "@/icons/github.astro" | ||
| import InstagramIcon from "@/icons/instagram.astro" | ||
| import XIcon from "@/icons/x.astro" | ||
| --- | ||
|
|
||
| <nav class={`${Astro.props.class}`}> | ||
| <ul | ||
| class="flex flex-row items-center gap-x-6" | ||
| aria-label="redes sociales y botón para alternar tema" | ||
| > | ||
| <li> | ||
| <a | ||
| target="_blank" | ||
| rel="noopener" | ||
| aria-label="Instagram de la velada, se abrirá en una nueva pestaña" | ||
| href="https://www.instagram.com/infolavelada" | ||
| class="inline-block any-hover:scale-125 any-hover:opacity-70 motion-safe:transition motion-reduce:any-hover:scale-100" | ||
| > | ||
| <InstagramIcon | ||
| class="text-primary transition-colors duration-300 hover:text-accent motion-reduce:duration-0" | ||
| /> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| target="_blank" | ||
| rel="noopener" | ||
| aria-label="X de la velada, se abrirá en una nueva pestaña" | ||
| href="https://x.com/infoLaVelada" | ||
| class="inline-block any-hover:scale-125 any-hover:opacity-70 motion-safe:transition motion-reduce:any-hover:scale-100" | ||
| > | ||
| <XIcon | ||
| class="text-primary transition-colors duration-300 hover:text-accent motion-reduce:duration-0" | ||
| /> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| target="_blank" | ||
| rel="noopener" | ||
| aria-label="Github de la velada, se abrirá en una nueva pestaña" | ||
| href="https://github.com/midudev/la-velada-web-oficial" | ||
| class="inline-block any-hover:scale-125 any-hover:opacity-70 motion-safe:transition motion-reduce:any-hover:scale-100" | ||
| > | ||
| <GithubIcon | ||
| class="text-primary transition-colors duration-300 hover:text-accent motion-reduce:duration-0" | ||
| /> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters