refactor navbar code
This commit is contained in:
parent
bced6944f6
commit
bb346995ea
4 changed files with 66 additions and 41 deletions
|
|
@ -11,27 +11,6 @@ body {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TODO: Optimize, clean and realocate where it belogns the links styles */
|
|
||||||
a {
|
|
||||||
--boder-color: transparent;
|
|
||||||
color: var(--prj-link-text);
|
|
||||||
border: 1px solid var(--boder-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
transition: background-color 200ms, color 200ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.active {
|
|
||||||
border: 1px solid var(--prj-accent-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
--border-color: var(--prj-accent-bg);
|
|
||||||
background-color: var(--prj-accent-bg);
|
|
||||||
color: var(--prj-accent-text);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
||||||
|
|
||||||
@media screen and (min-width: 640px) {
|
@media screen and (min-width: 640px) {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,13 @@
|
||||||
---
|
---
|
||||||
interface Props {
|
const links = [
|
||||||
links: { href: string; text: string }[];
|
{ href: '/', text: 'Home' },
|
||||||
}
|
{ href: '/blog', text: 'Blog' },
|
||||||
|
{ href: '/portafolio', text: 'Portafolio' },
|
||||||
|
{ href: '/curriculum', text: 'Curriculum' },
|
||||||
|
{ href: '/contact', text: 'Contact' },
|
||||||
|
];
|
||||||
|
|
||||||
const { links } = Astro.props;
|
// TODO: Fix so the "active" class can come from the server so it doesnt flicker
|
||||||
---
|
---
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||||
|
|
@ -11,14 +15,7 @@ const { links } = Astro.props;
|
||||||
{
|
{
|
||||||
links.map((link) => (
|
links.map((link) => (
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
{/* TODO: active logic doesnt work in prod because is compiled --> */}
|
<a class="nav-link" href={link.href}>
|
||||||
<a
|
|
||||||
class:list={[
|
|
||||||
'nav-link',
|
|
||||||
{ active: Astro.url.pathname === link.href },
|
|
||||||
]}
|
|
||||||
href={link.href}
|
|
||||||
>
|
|
||||||
{link.text}
|
{link.text}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -27,6 +24,16 @@ const { links } = Astro.props;
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Add active class to the current link
|
||||||
|
const link = document.querySelector(`a[href='${location.pathname}']`);
|
||||||
|
|
||||||
|
if (link) {
|
||||||
|
link.classList.add("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
nav {
|
nav {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -37,6 +44,23 @@ const { links } = Astro.props;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
--boder-color: transparent;
|
||||||
|
color: var(--prj-link-text);
|
||||||
|
border: 1px solid var(--boder-color);
|
||||||
|
border-radius: 4px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
transition: background-color 200ms, color 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.active {
|
||||||
|
border: 1px solid var(--prj-accent-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
--border-color: var(--prj-accent-bg);
|
||||||
|
background-color: var(--prj-accent-bg);
|
||||||
|
color: var(--prj-accent-text);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
29
src/components/Navbar.tsx
Normal file
29
src/components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
links: Array<{ href: string; text: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Navbar(props: Props): JSX.Element {
|
||||||
|
return (
|
||||||
|
<nav className="navbar navbar-expand-lg bg-body-tertiary">
|
||||||
|
<ul className="list-unstyle hstack">
|
||||||
|
{props.links.map((link, idx) => (
|
||||||
|
<li className="nav-item" key={idx}>
|
||||||
|
{/* TODO: active logic doesnt work in prod because is compiled --> */}
|
||||||
|
<a
|
||||||
|
className={
|
||||||
|
'nav-link' + window.location.pathname === link.href
|
||||||
|
? 'active'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
href={link.href}
|
||||||
|
>
|
||||||
|
{link.text}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -7,13 +7,6 @@ const { title } = Astro.props;
|
||||||
import '../assets/style/global.css';
|
import '../assets/style/global.css';
|
||||||
import Navbar from '../components/Navbar.astro';
|
import Navbar from '../components/Navbar.astro';
|
||||||
|
|
||||||
const navbarLinks = [
|
|
||||||
{ href: '/', text: 'Home' },
|
|
||||||
{ href: '/blog', text: 'Blog' },
|
|
||||||
{ href: '/portafolio', text: 'Portafolio' },
|
|
||||||
{ href: '/curriculum', text: 'Curriculum' },
|
|
||||||
{ href: '/contact', text: 'Contact' },
|
|
||||||
];
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
@ -31,7 +24,7 @@ const navbarLinks = [
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<Navbar client:load links={navbarLinks} />
|
<Navbar />
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue