Merge pull request #64 from CodeandoMexico/issue24

Corrección de selectores de menu

src/components/Hero.svelte

@@ -14,7 +14,7 @@
 	});
 </script>
 
-<div class="hero" style="background: {accentColor}">
+<div class="hero pt-hero" style="background: {accentColor}">
 	<div class="container px-5 py-28">
 		<div class="flex-col-reverse md:flex-row flex items-center gap-10 columns-2">
 			<div class="md:w-1/2 md:p-5">

src/components/Navbar.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { principalMenuStore } from "@/store";
+
   function closeHambMenu() {
     document.getElementById('hamburger-menu').classList.toggle('hidden');
   }
@@ -12,9 +14,9 @@
     {name: "Comunidad", url: "/comunidad"},
     {name: "Recursos", url: "/recursos"},
     {name: "Blog", url: "/blog"},
-    ];
+  ];
 </script>
-<nav class="w-full  py-5">
+<nav class="absolute w-full py-5 max-lg:bg-white">
   <div class="flex container m-auto items-center  px-5">
     <a href="/">
       <span class="sr-only">Codeando México</span>
@@ -25,7 +27,14 @@
 
     <ul class="gap-5 hidden lg:flex">
       {#each menuItems as item }
-        <li><a class="hover:underline hover:gray-800 uppercase font-bold" href="{item.url}">{item.name}</a></li>
+        <li>
+          <a
+            class={`hover:underline hover:gray-800 uppercase font-bold ${$principalMenuStore.urlActive.includes(item.url) ? $principalMenuStore.color : ''}`.trim()}
+            href="{item.url}"
+          >
+            {item.name}
+          </a>
+        </li>
       {/each}
     </ul>
 
@@ -43,7 +52,7 @@
 <div id="hamburger-menu" class="lg:hidden hidden" role="dialog" aria-modal="true">
   <!-- Background backdrop, show/hide based on slide-over state. -->
   <div class="fixed inset-0 z-10"></div>
-  <div class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+  <div class="fixed inset-y-0 right-0 z-40 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
     <div class="flex items-center justify-between">
       <a href="/" class="-m-1.5 p-1.5">
         <span class="sr-only">Codeando México</span>
@@ -62,7 +71,7 @@
           {#each menuItems as item}
           <div class="mx-3 block px-3 py-2 divide-y divide-gray-500 hover:bg-gray-50">
 
-            <a href="{item.url}" class="-text-base font-semibold leading-7 text-gray-900 uppercase ">{item.name}</a>
+            <a href="{item.url}" class={`-text-base font-semibold leading-7 uppercase ${$principalMenuStore.urlActive.includes(item.url) ? 'text-cmxgreen' : 'text-gray-900'}`}>{item.name}</a>
           </div>
           {/each}
         </div>

src/lib/menuSelectorUpdater.js

@@ -0,0 +1,20 @@
+import { onDestroy } from "svelte";
+import { principalMenuStore } from "@/store";
+
+export function updateMenuSelector({url = '/', color = 'text-white'}) {
+  principalMenuStore.update(data => {
+    data.urlActive = url
+    data.color = color
+
+    return data
+  });
+
+  onDestroy(() => {
+    principalMenuStore.update(data => {
+      data.urlActive = ''
+      data.color = ''
+
+      return data
+    });
+  });
+}

src/routes/acerca/+page.svelte

@@ -1,6 +1,9 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater';
   import Hero from '@/components/Hero.svelte';
   import IconTextAction from '@/components/IconTextAction.svelte';
+
+  updateMenuSelector({url: '/acerca'})
 </script>
 
 <Hero accentColor="#0073F4" title="Acerca de" subtitle="Somos una organización sin fines de lucro, basada en una comunidad abierta." image="/acerca.png"/>

src/routes/aviso-de-privacidad/+page.svelte

@@ -4,7 +4,7 @@
   const { aviso } = data
 </script>
 
-<div id="aviso" class="container mx-auto py-20">
+<div id="aviso" class="container mx-auto my-20 pt-hero">
   <div class="w-10/12 p-5 mx-auto w-1/2 mx-auto bg-[url('/grid-bg.png')] bg-slate-200 prose" style={`box-shadow: 7px 7px 1px black;`}>
     {@html aviso.content}
     <p>Ultima actualización: <HumanDate date={aviso.date_updated}/></p>

src/routes/blog/+page.svelte

@@ -1,10 +1,13 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   import ArticleCard from "@/components/Cards/ArticleCard.svelte";
   import BlogHero from "@/components/BlogHero.svelte";
   export let data
   const { blog, posts } = data
+
+  updateMenuSelector({url: '/blog', color: 'text-cmxgreen'})
 </script>
-<div class="container my-20 mx-auto">
+<div class="container my-20 pt-hero mx-auto">
 
   <div class="container m-auto px-3">
     <div class="my-7">

src/routes/blog/[slug]/+page.svelte

@@ -1,8 +1,11 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   import ReadingTime from '@/components/ReadingTime.svelte';
   import HumanDate from '@/components/HumanDate.svelte';
   export let data
   const { post } = data
+
+  updateMenuSelector({url: '/blog', color: 'text-cmxgreen'})
 </script>
 
 <svelte:head>
@@ -13,8 +16,7 @@
   <meta property="og:image" content={`https://content.codeandomexico.org/assets/${post.post_image}`} />
 </svelte:head>
 
-<section class="my-10">
-
+<section class="my-10 pt-hero">
   <div class="container m-auto max-w-prose my-8">
     <h1 class="text-5xl font-black my-8">{post.title}</h1>
     {#if post.authors}
@@ -32,5 +34,4 @@
   <div class="container m-auto p-3 prose prose-blockquote:text-2xl prose-blockquote:border-green-400">
     <p class="prose text-lg">{@html post.content}</p>
   </div>
-
 </section>

src/routes/comunidad/+page.svelte

@@ -1,10 +1,13 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   import Hero from "@/components/Hero.svelte";
   import GetInvolvedCard from "@/components/Cards/GetInvolvedCard.svelte";
   import CommunityCard from "@/components/Cards/CommunityCard.svelte";
   // import CollaboratorCard from "@/components/Cards/CollaboratorCard.svelte";
   export let data
   const { comunidad } = data
+
+  updateMenuSelector({url: '/comunidad'})
 </script>
 
 <Hero accentColor="#F2D301" title="Involúcrate en la comunidad" subtitle="Somos una comunidad abierta que construye tecnología para el bien común." image="/comunidad.png" />

src/routes/newsletter/confirmed/+page.svelte

@@ -1,4 +1,4 @@
-<div class="container mx-auto py-20">
+<div class="container mx-auto my-20 pt-hero">
   <div class="h-full flex flex-col justify-center min-h-20 py-20">
 
 

src/routes/proyectos/+page.svelte

@@ -1,11 +1,14 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   import Hero from '@/components/Hero.svelte';
   import IconTextAction from '@/components/IconTextAction.svelte';
   import SubscribeBox from '@/components/SubscribeBox.svelte';
   import Badge from '@/components/Badge.svelte';
 	import ProjectCard from '@/components/Cards/ProjectCard.svelte';
   export let data
   const { projects } = data
+
+  updateMenuSelector({url: '/proyectos'})
 </script>
 
 <Hero title="Proyectos" subtitle="Colaboramos desde el diseño hasta la implementación de tecnología cívica." image="/proyectos.png"/>

src/routes/recursos/+page.svelte

@@ -1,9 +1,12 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   import Hero from "@/components/Hero.svelte";
   import RecursosCard from "@/components/Cards/RecursosCard.svelte";
 
   export let data
   const { conocimientos, recursos } = data
+
+  updateMenuSelector({url: '/recursos'})
 </script>
 
 <Hero accentColor="#FF6D53" image="/recursos.png" title="Recursos" subtitle="Conocimiento que hemos construido a lo largo del tiempo sobre tecnología cívica, datos abiertos y más." />

src/store/index.js

@@ -0,0 +1,6 @@
+import { writable } from "svelte/store";
+
+export const principalMenuStore = writable({
+  urlActive: '',
+  color: ''
+});

tailwind.config.js

@@ -16,6 +16,9 @@ export default {
         cmxred: "#FF6D53",
         cmxblue: "#0073F4"
       },
+      padding: {
+        hero: '83px'
+      }
     }
   },
   plugins: [require("daisyui"),  require('@tailwindcss/typography')]