diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro index 8642442..ae18767 100644 --- a/src/components/layout/Header.astro +++ b/src/components/layout/Header.astro @@ -1,16 +1,21 @@ --- -const nav = [ - { href: "/", label: "Strona główna" }, - { href: "/internet", label: "Internet" }, - { href: "/telewizja", label: "Telewizja" }, - { href: "/internet-telewizja", label: "Internet + TV" }, - { href: "/mapa-zasiegu", label: "Mapa zasięgu" }, - { href: "/kontakt", label: "Kontakt" } +import MobileMenu from "../../islands/MobileMenu.jsx"; + +const links = [ + { name: "START", href: "/" }, + { name: "INTERNET ŚWIATŁOWODOWY", href: "/internet-swiatlowodowy" }, + { name: "INTERNET I TELEWIZJA", href: "/internet-telewizja" }, + { name: "INTERNET RADIOWY", href: "/internet-radiowy" }, + { name: "TELEFON", href: "/telefon" }, + { name: "ZASIĘG SIECI", href: "/mapa-zasiegu" }, + { name: "KONTAKT", href: "/kontakt" } ]; --- -
-
+
-
+ diff --git a/src/content/home/hero.yaml b/src/content/home/hero.yaml index e698fc9..40f7dc5 100644 --- a/src/content/home/hero.yaml +++ b/src/content/home/hero.yaml @@ -5,7 +5,7 @@ subtitle: - "Realny serwis, szybkie wsparcie" - "Stabilna infrastruktura światłowodowa i radiowa" description: "Internet i telewizja od ludzi, którzy naprawdę są na miejscu. Bez infolinii z końca świata." -imageUrl: "/images/hero/fiber-example.jpg" +imageUrl: "/images/fiber2.webp" ctas: - label: "Sprawdź dostępność" href: "/mapa-zasiegu" diff --git a/src/islands/MobileMenu.jsx b/src/islands/MobileMenu.jsx new file mode 100644 index 0000000..8aee837 --- /dev/null +++ b/src/islands/MobileMenu.jsx @@ -0,0 +1,36 @@ +import { 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 toggle = () => setOpen(o => !o); + + return ( + <> + {/* Ikona hamburgera */} + + + {/* Panel mobilny */} +
+ {links.map(link => ( + setOpen(false)} + > + {link.name} + + ))} +
+ + ); +} diff --git a/src/pages/internet-radiowy/index.astro b/src/pages/internet-radiowy/index.astro new file mode 100644 index 0000000..cd6a09c --- /dev/null +++ b/src/pages/internet-radiowy/index.astro @@ -0,0 +1,20 @@ +--- +import DefaultLayout from "../../layouts/DefaultLayout.astro"; + +const seo = { + title: "Internet – FUZ", + description: "Internet – FUZ", + canonical: "/internet" +}; +--- + + +
+
+

Internet Radiowy– FUZ

+

+ Ta podstrona jest na razie szkieletem. Możemy tu później wczytać treść z YAML. +

+
+
+
diff --git a/src/pages/internet/index.astro b/src/pages/internet-swiatlowodowy/index.astro similarity index 100% rename from src/pages/internet/index.astro rename to src/pages/internet-swiatlowodowy/index.astro diff --git a/src/pages/telewizja/index.astro b/src/pages/telefon/index.astro similarity index 89% rename from src/pages/telewizja/index.astro rename to src/pages/telefon/index.astro index 3ff90df..f17a31a 100644 --- a/src/pages/telewizja/index.astro +++ b/src/pages/telefon/index.astro @@ -11,7 +11,7 @@ const seo = {
-

Telewizja – FUZ

+

Telefon – FUZ

Ta podstrona jest na razie szkieletem. Możemy tu później wczytać treść z YAML.

diff --git a/src/styles/base.css b/src/styles/base.css index bef0574..d28b1aa 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -1,2 +1,3 @@ @import "./tailwind.css"; -@import "./theme.css"; \ No newline at end of file +@import "./theme.css"; +@import "./navbar.css"; \ No newline at end of file diff --git a/src/styles/navbar.css b/src/styles/navbar.css new file mode 100644 index 0000000..cd7f326 --- /dev/null +++ b/src/styles/navbar.css @@ -0,0 +1,43 @@ +.fuz-navbar { + @apply w-full bg-[var(--fuz-bg)] text-[var(--fuz-text)] shadow-sm sticky top-0 z-50; +} + +.fuz-navbar-inner { + @apply max-w-7xl mx-auto flex items-center justify-between py-4 px-4; +} + +.fuz-navbar-logo { + @apply text-2xl font-bold text-[var(--fuz-text)]; +} + +.fuz-accent { + color: var(--fuz-accent); +} + +.fuz-navbar-links { + @apply gap-6; +} + +.fuz-navbar-link { + @apply text-base hover:text-[var(--fuz-accent)] transition-colors; +} + +.fuz-mobile-toggle { + @apply text-3xl p-2 text-[var(--fuz-text)]; +} + +/* Panel mobilny */ +.fuz-mobile-menu { + @apply fixed top-0 right-0 h-full w-64 bg-[var(--fuz-bg)] shadow-lg + transform translate-x-full transition-transform duration-300 + flex flex-col gap-4 p-6; +} + +.fuz-mobile-menu.open { + @apply translate-x-0; +} + +.fuz-mobile-link { + @apply text-lg py-2 border-b border-gray-300 dark:border-gray-700 + text-[var(--fuz-text)] hover:text-[var(--fuz-accent)]; +}