diff --git a/src/components/sections/SectionChannelsSearch.astro b/src/components/sections/SectionChannelsSearch.astro index ef8b5a8..989bbbb 100644 --- a/src/components/sections/SectionChannelsSearch.astro +++ b/src/components/sections/SectionChannelsSearch.astro @@ -2,7 +2,7 @@ import { Image } from "astro:assets"; import type { ImageMetadata } from "astro"; import Markdown from "../../islands/Markdown.jsx"; -import TvChannelsSearch from "../../islands/jambox/JamboxChannelsSearch.jsx"; +import JamboxChannelsSearch from "../../islands/jambox/JamboxChannelsSearch.jsx"; const props = Astro.props ?? {}; const section = props.section ?? {}; @@ -44,7 +44,7 @@ if (section.image) { {section.title &&

{section.title}

} {section.content && } - + {section.button && (
diff --git a/src/content/contact/contact.yaml b/src/content/contact/contact.yaml index 8cd6e0f..c6b5aec 100644 --- a/src/content/contact/contact.yaml +++ b/src/content/contact/contact.yaml @@ -1,4 +1,4 @@ -title: SKONTAKTUJ SIĘ Z NAMI +title: Skontaktuj się z nami description: |

FUZ ADAM ROJEK

ul. Świętojańska 46

diff --git a/src/islands/MobileMenu.jsx b/src/islands/MobileMenu.jsx index 7ddc7af..315dae8 100644 --- a/src/islands/MobileMenu.jsx +++ b/src/islands/MobileMenu.jsx @@ -1,31 +1,75 @@ -import { useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; + /** * @typedef {{ name: string; href: string }} MenuLink * @param {{ links: MenuLink[] }} props */ - export default function MobileMenu({ links = [] }) { const [open, setOpen] = useState(false); + const menuRef = useRef(null); + const btnRef = useRef(null); - const toggle = () => setOpen(o => !o); + const close = () => setOpen(false); + const toggle = (e) => { + e?.stopPropagation?.(); + setOpen((o) => !o); + }; + + useEffect(() => { + const onKey = (e) => e.key === "Escape" && close(); + document.addEventListener("keydown", onKey); + return () => document.removeEventListener("keydown", onKey); + }, []); + + useEffect(() => { + if (!open) return; + + const onDocClick = (e) => { + const menuEl = menuRef.current; + const btnEl = btnRef.current; + + if (menuEl && menuEl.contains(e.target)) return; + if (btnEl && btnEl.contains(e.target)) return; + + close(); + }; + + document.addEventListener("mousedown", onDocClick); + document.addEventListener("touchstart", onDocClick, { passive: true }); + + return () => { + document.removeEventListener("mousedown", onDocClick); + document.removeEventListener("touchstart", onDocClick); + }; + }, [open]); return ( <> -
- {links.map(link => ( - setOpen(false)} - > +