Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ashcroft08/provesa-web/llms.txt

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

​
Overview

The Navbar component provides the main navigation for the PROVESA Web application. It features a responsive design with a glass-morphism effect, scroll detection for transparency changes, and a mobile-friendly slide-out menu.

​
Import

import Navbar from '$lib/components/Navbar.svelte';

​
Props

​
transparent
boolean
default:"false"
Enables transparent mode when at the top of the page. When true, the navbar will be fully transparent (with white text) until the user scrolls down. Perfect for use with hero sections.
​
logoUrl
string
default:"''"
Custom logo URL. If not provided, defaults to the built-in PROVESA logo. The logo automatically inverts to white when in transparent mode.

​
Usage

​
Basic Usage

<Navbar />

​
With Transparent Mode (Homepage)

<script>
  import Navbar from '$lib/components/Navbar.svelte';
  import { page } from '$app/state';
  
  let isHome = $derived(page.url.pathname === '/');
</script>

<Navbar transparent={isHome} />

<script>
  let { data } = $props();
</script>

<Navbar logoUrl={data?.siteConfig?.logoUrl} />

​
Real Example from +layout.svelte

<script>
  import Navbar from '$lib/components/Navbar.svelte';
  import { page } from '$app/state';
  
  let { data } = $props();
  
  let isHome = $derived(page.url.pathname === '/');
  const excludedRoutes = ['/login', '/admin'];
  let showChrome = $derived(!page.error && !excludedRoutes.includes(page.url.pathname));
</script>

{#if showChrome}
  <Navbar transparent={isHome} logoUrl={data?.siteConfig?.logoUrl} />
{/if}

​
Features

The navbar includes the following navigation items:
  • Inicio - Links to /#inicio
  • Productos - Links to /#productos
  • Nosotros - Links to /#nosotros-teaser (home) or /nosotros (other pages)
  • Concursos - Links to /concursos
  • Trabaja con Nosotros - Links to /empleo

​
Scroll Detection

The navbar automatically detects when the user scrolls more than 50px from the top: 
function handleScroll() {
  scrolled = window.scrollY > 50;
}
When scrolled, the navbar transitions from transparent to a glass-morphism effect.

​
Mobile Menu

On mobile devices (< 768px), the navigation links are hidden and replaced with a hamburger menu button. When clicked, a full-screen overlay menu appears with:
  • Large, touch-friendly navigation links
  • PROVESA logo
  • Close button in the top-right corner

​
Styling

​
Glass-morphism Effect

The navbar uses a glass-morphism effect when not transparent: 
.glass-nav {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
}

​
Transparent Mode

When transparent={true} and at the top of the page:
  • Background becomes fully transparent
  • Text color changes to white
  • Logo inverts to white using CSS filters
  • Border becomes transparent

​
Active States

Navigation links feature an animated underline on hover: 
after:absolute after:-bottom-1 after:left-0 after:h-0.5 
after:w-0 after:bg-primary after:transition-all 
after:content-[''] hover:text-primary hover:after:w-full

​
Component Behavior

The “Nosotros” link intelligently changes based on the current page:
  • On homepage (/): Links to /#nosotros-teaser (anchor link)
  • On other pages: Links to /nosotros (full page)
let nosotrosHref = $derived(page.url.pathname === '/' ? '/#nosotros-teaser' : '/nosotros');

​
Fixed Positioning

The navbar is fixed to the top of the viewport: 
position: fixed;
top: 0;
z-index: 50;
width: 100%;

​
Accessibility

  • Uses semantic <nav> element
  • Mobile menu uses <button> for proper accessibility
  • Logo link includes descriptive alt text
  • Navigation links are keyboard accessible

​
Dependencies

  • lucide-svelte - Menu and X icons
  • $app/state - Access to current page URL
  • $lib/assets/images/provesa-logo.png - Default logo
  • Footer - Site footer component
  • HeroSlider - Often used with transparent navbar

Build docs developers (and LLMs) love

Get started for freeTalk to us