alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

refactor navbar code

Browse source
This commit is contained in:
Alexander Navarro 2023-08-20 11:45:40 -04:00
parent bced6944f6
commit bb346995ea
4 changed files with 66 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/assets/style/global.css
View file

@ -11,27 +11,6 @@ body {
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 */
@media screen and (min-width: 640px) {

48
src/components/Navbar.astro
View file

@ -1,9 +1,13 @@
---
interface Props {
links: { href: string; text: string }[];
}
const links = [
{ 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">
@ -11,14 +15,7 @@ const { links } = Astro.props;
{
links.map((link) => (
<li class="nav-item">
{/* TODO: active logic doesnt work in prod because is compiled --> */}
<a
class:list={[
'nav-link',
{ active: Astro.url.pathname === link.href },
]}
href={link.href}
>
<a class="nav-link" href={link.href}>
{link.text}
</a>
</li>
@ -27,6 +24,16 @@ const { links } = Astro.props;
</ul>
</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>
nav {
width: fit-content;
@ -37,6 +44,23 @@ const { links } = Astro.props;
}
a {
--boder-color: transparent;
color: var(--prj-link-text);
border: 1px solid var(--boder-color);
border-radius: 4px;
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>

29
src/components/Navbar.tsx Normal file
View 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>
);
}

9
src/layouts/Layout.astro
View file

@ -7,13 +7,6 @@ const { title } = Astro.props;
import '../assets/style/global.css';
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>
@ -31,7 +24,7 @@ const navbarLinks = [
</head>
<body>
<header>
<Navbar client:load links={navbarLinks} />
<Navbar />
</header>
<main>
<slot />