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

update before work

Browse source
This commit is contained in:
Alexander Navarro 2023-08-20 10:33:52 -04:00
parent 6917b0c1bd
commit bced6944f6
3 changed files with 46 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/Navbar.astro
View file

@ -1,6 +1,6 @@
---
interface Props {
links: { href: string, text: string }[];
links: { href: string; text: string }[];
}
const { links } = Astro.props;
@ -8,11 +8,22 @@ const { links } = Astro.props;
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<ul class="list-unstyle hstack">
{links.map(link =>(
{
links.map((link) => (
<li class="nav-item">
<a class:list={"nav-link", { active: Astro.url.pathname === link.href}} href={link.href}>{link.text}</a>
{/* TODO: active logic doesnt work in prod because is compiled --> */}
<a
class:list={[
'nav-link',
{ active: Astro.url.pathname === link.href },
]}
href={link.href}
>
{link.text}
</a>
</li>
))}
))
}
</ul>
</nav>

19
src/layouts/Layout.astro
View file

@ -4,23 +4,23 @@ export interface Props {
}
const { title } = Astro.props;
import "../assets/style/global.css";
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" },
]
{ href: '/', text: 'Home' },
{ href: '/blog', text: 'Blog' },
{ href: '/portafolio', text: 'Portafolio' },
{ href: '/curriculum', text: 'Curriculum' },
{ href: '/contact', text: 'Contact' },
];
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description">
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
@ -28,11 +28,10 @@ const navbarLinks = [
<!-- Reset and normilize styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
</head>
<body>
<header>
<Navbar links={navbarLinks}/>
<Navbar client:load links={navbarLinks} />
</header>
<main>
<slot />

7
src/pages/blog.astro Normal file
View file

@ -0,0 +1,7 @@
---
import Layout from '../layouts/Layout.astro';
---
<Layout title="Blog">
<h1>Blog</h1>
</Layout>