Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic nav links #1266

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+88 −96
Open

Dynamic nav links #1266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b51037b
remove border and border radius for navbar
alpimi Apr 3, 2025
ef83dc4
Create NavLink.astro
alpimi Apr 3, 2025
5be9159
implement NavLink.astro in Header.astro
alpimi Apr 3, 2025
4469aef
Update Header.astro
alpimi Apr 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 28 additions & 76 deletions src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,92 +1,46 @@
---
const { pathname } = Astro.url;
import NavLink from './NavLink.astro'
import { links } from '../consts/links'

// Lista de rutas donde NO debe aparecer el logo
const hideLogoRoutes = ["/"];
const shouldShowLogo = !hideLogoRoutes.includes(pathname);
const { pathname } = Astro.url

// Comprueba si la ruta actual está activa
const isActive = (path: string) => pathname === path;
// Lista de rutas donde NO debe aparecer el logo
const hideLogoRoutes = ['/']
const shouldShowLogo = !hideLogoRoutes.includes(pathname)
---

<header class="fixed flex items-center top-0 h-20 w-full z-50 text-white mx-auto">
<header class="fixed top-0 z-50 mx-auto flex h-20 w-full items-center rounded-b-md text-white">
<nav
class:list={[
shouldShowLogo ? "grid-cols-3" : "grid-cols-2",
"grid items-center px-6 text-sm font-medium justify-between max-w-6xl w-full mx-auto",
shouldShowLogo ? 'grid-cols-3' : 'grid-cols-2',
'mx-auto grid w-full max-w-6xl items-center justify-between px-6 text-sm font-medium',
]}
>
<div class="hidden md:flex flex-row gap-8 justify-start">
<div class="hidden flex-row justify-start gap-8 md:flex">
{/* Enlace con animación de subrayado dividido en dos colores */}
<a
href="/la-porra"
class="group relative inline-block tracking-wider py-1 leading-relaxed"
>
<span class="text-theme-seashell">HAZ TU PORRA</span>
{/* Contenedor del subrayado con overflow hidden para la animación */}
<div class="relative mt-1 h-[2px] w-full overflow-hidden">
{/* Línea rosa que se anima desde la izquierda */}
<div
class:list={[
"absolute bottom-0 left-0 h-full bg-[color:var(--color-theme-tickle-me-pink)] transition-all duration-250 ease-out",
isActive("/la-porra") ? "w-[51%]" : "group-hover:w-[51%] w-0",
]}
></div>
{/* Línea turquesa que se anima desde la derecha */}
<div
class:list={[
"absolute bottom-0 right-0 h-full bg-[color:var(--color-theme-turquoise)] transition-all duration-250 ease-out",
isActive("/la-porra") ? "w-[51%]" : "group-hover:w-[51%] w-0",
]}
></div>
</div>
</a>
{/* Segundo enlace con la misma animación */}
<a
href="/combates"
class="group relative inline-block tracking-wider py-1 leading-relaxed"
>
<span class="text-theme-seashell">VER COMBATES</span>
{/* Contenedor del subrayado con overflow hidden para la animación */}
<div class="relative mt-1 h-[2px] w-full overflow-hidden">
{/* Línea rosa que se anima desde la izquierda */}
<div
class:list={[
"absolute bottom-0 left-0 h-full bg-[color:var(--color-theme-tickle-me-pink)] transition-all duration-300 ease-out",
isActive("/combates") ? "w-[51%]" : "group-hover:w-[51%] w-0",
]}
></div>
{/* Línea turquesa que se anima desde la derecha */}
<div
class:list={[
"absolute bottom-0 right-0 h-full bg-[color:var(--color-theme-turquoise)] transition-all duration-300 ease-out",
isActive("/combates") ? "w-[51%]" : "group-hover:w-[51%] w-0",
]}
></div>
</div>
</a>
{links.map((link) => <NavLink href={link.href} text={link.text} />)}
</div>

{shouldShowLogo && (
<a
href="/"
class="mx-auto hover:scale-110 cursor-pointer duration-500 relative">
<img
class="w-10 h-auto"
src="/favicon.svg"
fetchpriority="high"
alt="La Velada del Año V"
decoding="async"
/>
</a>
)}
{
shouldShowLogo && (
<a href="/" class="relative mx-auto cursor-pointer duration-500 hover:scale-110">
<img
class="h-auto w-10"
src="/favicon.svg"
fetchpriority="high"
alt="La Velada del Año V"
decoding="async"
/>
</a>
)
}

<div class="hidden md:flex flex-col items-end">
<div class="hidden flex-col items-end md:flex">
<span
class="inline-block text-theme-seashell opacity-90 cursor-not-allowed relative tracking-wider py-1 leading-relaxed"
class="text-theme-seashell relative inline-block cursor-not-allowed py-1 leading-relaxed tracking-wider opacity-90"
>COMPRA LAS ENTRADAS
<span
class="absolute top-4 inset-0 text-[10px] text-yellow-500 mt-1 text-center tracking-wide leading-normal"
class="absolute inset-0 top-4 mt-1 text-center text-[10px] leading-normal tracking-wide text-yellow-500"
>PRÓXIMAMENTE</span
>
</span>
Expand All @@ -100,7 +54,6 @@ const isActive = (path: string) => pathname === path;
animation: header-blur-scroll 0.3s linear both;
animation-timeline: scroll();
animation-range: 0 250px;
border-bottom: 1px solid transparent;
}

@keyframes header-blur-scroll {
Expand All @@ -113,7 +66,6 @@ const isActive = (path: string) => pathname === path;
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.5);
padding-bottom: var(--spacing-6);
border-bottom-color: black;
}
}
</style>
</style>
37 changes: 37 additions & 0 deletions src/components/NavLink.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
//NavLink.astro
interface NavLinkProps {
href: string
text: string
}

const { href, text } = Astro.props as NavLinkProps

const { pathname } = Astro.url

// Comprueba si la ruta actual está activa
const isActive = (path: string) => pathname === path
---

<a href={href} class="group relative inline-block py-1 leading-relaxed tracking-wider">
<span class="text-theme-seashell">{text}</span>
{/* Contenedor del subrayado con overflow hidden para la animación */}
<div class="relative mt-1 h-[2px] w-full overflow-hidden">
{/* Línea rosa que se anima desde la izquierda */}
<div
class:list={[
'absolute bottom-0 left-0 h-full bg-[color:var(--color-theme-tickle-me-pink)] transition-all duration-250 ease-out',
isActive(href) ? 'w-[51%]' : 'w-0 group-hover:w-[51%]',
]}
>
</div>
{/* Línea turquesa que se anima desde la derecha */}
<div
class:list={[
'absolute right-0 bottom-0 h-full bg-[color:var(--color-theme-turquoise)] transition-all duration-250 ease-out',
isActive(href) ? 'w-[51%]' : 'w-0 group-hover:w-[51%]',
]}
>
</div>
</div>
</a>
4 changes: 4 additions & 0 deletions src/consts/links.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const links = [
{ href: '/la-porra', text: 'HAZ TU PORRA' },
{ href: '/combates', text: 'VER COMBATES' },
]
2 changes: 1 addition & 1 deletion src/pages/combates/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { combates } from '@/consts/pageTitles'
<div class="flex w-full flex-col items-center text-center">
<div id="landing" class="absolute top-0 flex w-full flex-col items-center py-30">
<h3
class="text-theme-seashell animate-fade-in animate-delay-300 mt-4 -skew-3 text-6xl leading-[100%] font-medium [text-shadow:_5px_5px_10px_rgb(0_0_0_/_50%)] tracking-wider brightness-125 transition-all duration-300"
class="text-theme-seashell animate-fade-in animate-delay-300 mt-4 -skew-3 text-6xl leading-[100%] font-medium tracking-wider brightness-125 transition-all duration-300 [text-shadow:_5px_5px_10px_rgb(0_0_0_/_50%)]"
>
<strong>LISTA DE LOS</strong>
<br /><strong>COMBATES</strong>
Expand Down
37 changes: 18 additions & 19 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
@import "tailwindcss";
@import 'tailwindcss';
@plugin "@midudev/tailwind-animations";

@theme {
--color-dark-magenta: #2a1f26;
--font-fallback: "Adjusted Arial Fallback", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
"Noto Sans", helvetica, arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji";
--font-primary: "Anisette";
--font-fallback:
'Adjusted Arial Fallback', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI',
'Noto Sans', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
--font-primary: 'Anisette';

/* Velada V Custom Colors */
--color-theme-french-mauve:oklch(67.65% 0.1539 329.18);
--color-theme-raisin-black:oklch(25.53% 0.0209 340.25);
--color-theme-tickle-me-pink:oklch(75.65% 0.143 355.9);
--color-theme-seashell:oklch(95.25% 0.0147 33.07);
--color-theme-turquoise:oklch(82.97% 0.148864 181.7442);
--color-theme-french-mauve: oklch(67.65% 0.1539 329.18);
--color-theme-raisin-black: oklch(25.53% 0.0209 340.25);
--color-theme-tickle-me-pink: oklch(75.65% 0.143 355.9);
--color-theme-seashell: oklch(95.25% 0.0147 33.07);
--color-theme-turquoise: oklch(82.97% 0.148864 181.7442);
}

@layer base {
Expand All @@ -29,7 +29,7 @@
::-webkit-scrollbar-thumb {
background-color: var(--color-theme-french-mauve);
border-radius: 5px;
border: 2px solid oklch(67.65% 0.1539 329.18 / 0.4);
border: 2px solid oklch(67.65% 0.1539 329.18 / 0.4);
}

::-webkit-scrollbar-thumb:hover {
Expand All @@ -40,12 +40,11 @@
* {
scrollbar-color: var(--color-theme-french-mauve) var(--color-theme-raisin-black);
scrollbar-width: thin;
border-radius: 5px;
}
}

@font-face {
font-family: "Adjusted Arial Fallback";
font-family: 'Adjusted Arial Fallback';
src: local(Arial);
size-adjust: 112%;
ascent-override: 74%;
Expand All @@ -54,26 +53,26 @@
}

@font-face {
font-family: "Anisette";
src: url("/fonts/anisette-medium.woff2") format("woff2");
font-family: 'Anisette';
src: url('/fonts/anisette-medium.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "Anisette";
src: url("/fonts/anisette-bold.woff2") format("woff2");
font-family: 'Anisette';
src: url('/fonts/anisette-bold.woff2') format('woff2');
font-weight: 600;
font-display: swap;
}

html {
font-family: "Anisette", var(--font-fallback);
font-family: 'Anisette', var(--font-fallback);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

@utility mask-fade-bottom {
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
}