fixed hamburger menu and header in id new

This commit is contained in:
Esteban Paz 2026-02-12 19:37:45 -05:00
parent f69cc5799e
commit aae5591b1c
2 changed files with 16 additions and 10 deletions

View File

@ -1,11 +1,12 @@
--- ---
import Button from "./ui/Button.astro"; import Button from "./ui/Button.astro";
import { Icon } from "astro-icon/components";
--- ---
<div> <div>
<div class="md:flex justify-between px-8 md:px-0 md:py-4"> <div class="flex justify-between px-8 md:px-0 md:py-4">
<div class="border-l-4 border-colorPrimary pl-4"> <div class="border-l-4 border-colorPrimary pl-4">
<p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-3xl md:text-lg"> <p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-2xl md:text-lg">
<a href="/">Centro del Reino<br /> De Paz y Justicia</a> <a href="/">Centro del Reino<br /> De Paz y Justicia</a>
</p> </p>
</div> </div>
@ -21,15 +22,20 @@ import Button from "./ui/Button.astro";
<input id="my-drawer-1" type="checkbox" class="drawer-toggle" /> <input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
<div class="drawer-content"> <div class="drawer-content">
<!-- Page content here --> <!-- Page content here -->
<label for="my-drawer-1" class="btn drawer-button">Open drawer</label> <label for="my-drawer-1" class="btn-ghost drawer-button"><Icon name="ph:list" class="text-white text-4xl font-bold" /></label>
</div> </div>
<div class="drawer-side"> <div class="drawer-side">
<label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label> <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu min-h-full w-80 p-4 bg-[#22523F] text-white"> <ul class="menu min-h-full w-80 p-4 bg-[url(/img/mid-logo-2.webp)] bg-no-repeat bg-contain bg-center bg-[#22523F] text-white">
<!-- Sidebar content here --> <!-- Sidebar content here -->
<p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-xl "> <div class="flex gap-2 justify-center items-center mb-8 mt-8">
<img class="w-1/3 object-contain" src="/img/logo-metalico.webp" alt="Logo Centro del Reino de Paz y Justicia" />
<p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-lg ">
<a href="/">Centro del Reino<br /> De Paz y Justicia</a> <a href="/">Centro del Reino<br /> De Paz y Justicia</a>
</p> </p>
</div>
<div class="font-primary font-bold flex flex-col gap-1 text-lg p-0"> <div class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
<li><a><a class="hover:text-colorPrimary transition" href="#somos">Somos</a></a></li> <li><a><a class="hover:text-colorPrimary transition" href="#somos">Somos</a></a></li>
<li><a><a class="hover:text-colorPrimary transition" href="#programs">Programas</a></a></li> <li><a><a class="hover:text-colorPrimary transition" href="#programs">Programas</a></a></li>

View File

@ -21,16 +21,16 @@ const { Content } = await render(post);
--- ---
<MainLayout> <MainLayout>
<!-- <div class="container mx-auto py-16"> <div class="container mx-auto py-16">
<Header /> <Header />
</div> --> </div>
<TitleSection title={post.data.title} /> <TitleSection title={post.data.title} />
<div class="container mx-auto"> <div class="container mx-auto">
{post.data.gallery && <CarouselSection images={post.data.gallery} />} {post.data.gallery && <CarouselSection images={post.data.gallery} />}
<div class="grid md:grid-cols-10"> <div class="grid md:grid-cols-10">
<div class="md:col-span-7 bg-white p-8 md:p-20 prose-p:mb-4 text-black"> <div class="md:col-span-7 bg-white p-8 md:p-20 prose-p:mb-4 text-[#003421]">
<Content /> <Content />
</div> </div>
<div class="md:col-span-3 bg-tertiary"> <div class="md:col-span-3 bg-tertiary">