Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/luislopez-stack/landing-pages/llms.txt

Use this file to discover all available pages before exploring further.

The NavBar component is the top-level navigation bar that sits fixed at the top of every page. It lives in src/components/Navbar.js and is rendered once in App.js, wrapping the entire route tree. It handles scroll detection, collapsible mobile layout, internal React Router links, and a GitHub fork/star button.

​
Overview

The Navbar uses three pieces of state-driven behaviour to adapt to different scroll positions and screen sizes. Scroll-aware background — A scrollHandler function is attached to window.addEventListener("scroll", ...). When window.scrollY >= 20, the state variable navColour is set to true, which switches the component’s className from "navbar" to "sticky". The .sticky class (defined in style.css) applies a backdrop blur and a darker background so the bar remains legible once the user scrolls past the hero section. Responsive collapse — The Bootstrap <Navbar expand="md"> prop means all nav items are hidden behind a toggler on screens narrower than the md breakpoint (768 px). On desktop they are always visible in the horizontal bar. Animated hamburger toggler — The <Navbar.Toggle> renders three raw <span> elements (no text) that are styled via CSS to form a classic hamburger icon. Clicking the toggle calls updateExpanded(expand ? false : "expanded"), which drives the expanded prop of the outer <Navbar> and opens or closes the drawer. Each nav link also calls updateExpanded(false) in its onClick handler so the drawer closes after navigation.

​
Navigation links

The four visible links and one Blogs link are rendered as <Nav.Item> children inside <Navbar.Collapse>.
LabelRouteIcon
Inicio/AiOutlineHome
Citas/aboutAiOutlineUser
Actividades/projectAiOutlineFundProjectionScreen
Resumenexternal linkCgFileDocument
Blogsexternal linkImBlog
Resumen and Blogs are currently set to href="" and open in a new tab (target="_blank"). The internal <Link to="/resume"> lines are commented out. Fill in the href values with real URLs — or uncomment the <Link> lines — before going live.

​
Customizing nav links

Each nav link follows the same two-line JSX pattern. Here is the Citas link as a reference:
src/components/Navbar.js
<Nav.Item>
  <Nav.Link
    as={Link}
    to="/about"
    onClick={() => updateExpanded(false)}
  >
    <AiOutlineUser style={{ marginBottom: "2px" }} /> Citas
  </Nav.Link>
</Nav.Item>
1

Add a new internal link

Copy the block above, update to="/" to your new route, swap the icon import for any react-icons icon, and change the label text.
2

Add an external link

Replace as={Link} and to="..." with a plain href="https://..." and add target="_blank" rel="noreferrer". This is exactly how Resumen and Blogs are structured.
3

Remove a link

Delete the entire <Nav.Item>…</Nav.Item> block for the link you want to remove.
4

Change an icon

Import the replacement icon from react-icons at the top of Navbar.js and swap the JSX tag inside the link. The full icon catalogue is at react-icons.github.io.
Switching Resumen from external to internal:
src/components/Navbar.js
// Before (external href, currently empty)
<Nav.Link href="" target="_blank" rel="noreferrer">
  <CgFileDocument style={{ marginBottom: "2px" }} /> Resumen
</Nav.Link>

// After (internal React Router link)
<Nav.Link as={Link} to="/resume" onClick={() => updateExpanded(false)}>
  <CgFileDocument style={{ marginBottom: "2px" }} /> Resumen
</Nav.Link>
The logo image is imported from src/Assets/logo.png and rendered inside <Navbar.Brand>:
src/components/Navbar.js
import logo from "../Assets/logo.png";

<Navbar.Brand href="/" className="d-flex">
  <img src={logo} className="img-fluid logo" alt="brand" />
</Navbar.Brand>
To swap the logo, replace src/Assets/logo.png with your own image file (keeping the same filename), or update the import path to point to a new file. The .logo CSS class in style.css controls the rendered size.
See /customization/branding for full guidance on replacing the logo and adjusting its dimensions.

​
Fork/Star button

The rightmost nav item is a Bootstrap <Button> that links to the project’s GitHub repository. It renders a fork icon and a star icon side by side:
src/components/Navbar.js
<Nav.Item className="fork-btn">
  <Button
    href=""
    target="_blank"
    className="fork-btn-inner"
  >
    <CgGitFork style={{ fontSize: "1.2em" }} />{" "}
    <AiFillStar style={{ fontSize: "1.1em" }} />
  </Button>
</Nav.Item>
The href="" is currently empty. Replace it with the full URL of your GitHub repository — for example href="https://github.com/your-username/your-repo". The button opens in a new tab due to target="_blank". If you want to remove the fork/star button entirely, delete the <Nav.Item className="fork-btn">…</Nav.Item> block.
Navbar CSS classes (.sticky, .navbar, .fork-btn, .fork-btn-inner) are all defined in src/style.css. See /customization/styling for a full reference of available overrides.

Build docs developers (and LLMs) love

Get started for freeTalk to us