From 8c0d246e702b2662294f4e8fd80e310a5facd564 Mon Sep 17 00:00:00 2001 From: Michael_Estrada <98861990+BryanEstrada003@users.noreply.github.com> Date: Sun, 22 Sep 2024 13:51:48 -0500 Subject: [PATCH] Nav & Header (#53) * Add line style in nav * Add line design * Change line design and nav responsive * Create Heading * Add Heading * Corrections in lint * others * Delete nodesource_setup.sh --------- Co-authored-by: Alexander Goussas <84427521+aloussase@users.noreply.github.com> --- src/lib/assets/forms/frame.svg | 16 +++++ src/lib/assets/forms/line.svg | 4 ++ src/lib/components/layout/Heading.svelte | 29 ++++++++ src/lib/components/layout/Navbar.svelte | 92 ++++++++++++++++++++++-- src/routes/events/+page.svelte | 4 +- src/routes/projects/+page.svelte | 6 +- 6 files changed, 144 insertions(+), 7 deletions(-) create mode 100644 src/lib/assets/forms/frame.svg create mode 100644 src/lib/assets/forms/line.svg create mode 100644 src/lib/components/layout/Heading.svelte diff --git a/src/lib/assets/forms/frame.svg b/src/lib/assets/forms/frame.svg new file mode 100644 index 0000000..7d1453d --- /dev/null +++ b/src/lib/assets/forms/frame.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/lib/assets/forms/line.svg b/src/lib/assets/forms/line.svg new file mode 100644 index 0000000..fe3c899 --- /dev/null +++ b/src/lib/assets/forms/line.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/lib/components/layout/Heading.svelte b/src/lib/components/layout/Heading.svelte new file mode 100644 index 0000000..4236784 --- /dev/null +++ b/src/lib/components/layout/Heading.svelte @@ -0,0 +1,29 @@ + + +
+
+

{title}

+
+
+ + diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte index 1474b48..f091aab 100644 --- a/src/lib/components/layout/Navbar.svelte +++ b/src/lib/components/layout/Navbar.svelte @@ -4,6 +4,8 @@ const current_path = $derived($page.url.pathname); + let menuOpen = $state(false); + const LINKS = [ { text: "Inicio", href: "/" }, { text: "Eventos", href: "/events" }, @@ -11,13 +13,27 @@ { text: "Contacto", href: "/contact" }, { text: "Miembros", href: "/members" }, ]; + + const toggleMenu = () => { + menuOpen = !menuOpen; + }; + + const closeMenu = () => { + menuOpen = false; + }; -