import React, { useState } from "react";
// Importuj ikony hamburger i X z biblioteki lucide-react
import { Menu, X } from "lucide-react";
const Navbar = () => {
// State do przechowywania stanu menu (otwarte/zamknięte)
const [open, setOpen] = useState(false);
return (
// Nav - główny element, fixed aby przylepił się do góry, z-50 żeby był nad innymi elementami
{/* Kontener wewnętrzny - flex do rozprowadzenia elementów */}
<div className="mx-auto px-6 h-12 flex items-center justify-between">
{/* Logo - po lewej stronie */}
<div className="text-white font-bold text-lg">KnopersShop</div>
{/*
=== DESKTOP MENU ===
$ $ $ NAJWAŻNIEJSZY BREAKPOINT 1 $ $ $
Widoczne TYLKO na dużych ekranach (md+)
$ "hidden" = domyślnie ukryto (dotyczy: < 768px, czyli telefon i mały tablet)
$ "md:flex" = od 768px POKAŻ menu jako flex (dotyczy: ≥ 768px, czyli tablet i desktop)
LOGIKA:
- Telefon (< 768px): klasa "hidden" → menu UKRYTE ❌
- Desktop (≥ 768px): klasa "md:flex" → menu WIDOCZNE ✅
*/}
<ul className="hidden md:flex gap-6 absolute left-1/2 transform -translate-x-1/2">
<li><a className="text-red-400 hover:text-white transition" href="">Home</a></li>
<li><a className="text-red-400 hover:text-white transition" href="">About</a></li>
<li><a className="text-red-400 hover:text-white transition" href="">Contact</a></li>
<li><a className="text-red-400 hover:text-white transition" href="">Products</a></li>
</ul>
{/*
$ $ $ NAJWAŻNIEJSZY BREAKPOINT 2 $ $ $
Hamburger przycisk - widoczny TYLKO na małych ekranach (< md)
$ "md:hidden" = od 768px UKRYJ button (dotyczy: ≥ 768px, czyli tablet i desktop)
$ Brak "hidden" = domyślnie POKAŻ button (dotyczy: < 768px, czyli telefon)
LOGIKA:
- Telefon (< 768px): brak "hidden" → button WIDOCZNY ✅
- Desktop (≥ 768px): klasa "md:hidden" → button UKRYTY ❌
onClick={() => setOpen(!open)} = przełącz stan menu (otwórz/zamknij)
*/}
<button
onClick={() => setOpen(!open)}
className="md:hidden text-white"
aria-label="Toggle menu"
>
{/* Jeśli menu otwarte pokaż X, jeśli zamknięte pokaż Menu */}
{open ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
{/*
=== MOBILE MENU ===
Mobile menu dropdown - pokazuje się TYLKO:
1. Gdy state "open" jest true (użytkownik kliknął hamburger)
2. Gdy ekran jest < md (768px)
"md:hidden" = od 768px tego ukryj (nawet jeśli by miało się pokazać)
*/}
{open && (
<div className="md:hidden bg-gray-900 px-6 py-4 flex flex-col gap-3">
<a href="" className="text-red-400 hover:text-white transition">Home</a>
<a href="" className="text-red-400 hover:text-white transition">About</a>
<a href="" className="text-red-400 hover:text-white transition">Contact</a>
<a href="" className="text-red-400 hover:text-white transition">Products</a>
</div>
)}
</nav>
);
};
export default Navbar;
/*
╔════════════════════════════════════════════════════════════════════╗
║ PODSUMOWANIE BREAKPOINTÓW - NAJWAŻNIEJSZE ║
╚════════════════════════════════════════════════════════════════════╝
md = 768px (punkt przełączenia)
$ REGUŁA 1: "hidden md:flex"
< 768px (telefon): hidden → UKRYTO ❌
≥ 768px (desktop): md:flex → WIDOCZNE ✅
$ REGUŁA 2: "md:hidden"
< 768px (telefon): brak hidden → WIDOCZNE ✅
≥ 768px (desktop): md:hidden → UKRYTO ❌
WYNIK:
Telefon: hamburger ✅, menu ❌
Desktop: hamburger ❌, menu ✅
*/
// Menu/elementy które chcesz na DUŻYCH ekranach
className="hidden md:flex"
// Elementy które chcesz na MAŁYCH ekranach
className="md:hidden"
**Niezależnie od projektu:**
- Navbar → `hidden md:flex` i `md:hidden`
- Sidebar → `hidden md:flex` i `md:hidden`
- Header → `hidden md:flex` i `md:hidden`
- Footer sekcje → `hidden md:flex` i `md:hidden`
**To jest SZABLON:**
Coś dla dużych ekranów? → hidden md:flex ✅
Coś dla małych ekranów? → md:hidden ✅
Responsive Tailwind CSS: The Universal Pattern You'll Use Every Day
Responsywność w Tailwindzie nie musi być skomplikowana. Istnieje jeden uniwersalny pattern, który rozwiąże 95% Twoich problemów.
The Golden Rule
Responsive Tailwind CSS: The Universal Pattern You'll Use Every Day
Responsywność w Tailwindzie nie musi być skomplikowana. Istnieje jeden uniwersalny pattern, który rozwiąże 95% Twoich problemów.
The Golden Rule
// Dla dużych ekranów (desktop)
className="hidden md:flex"
// Dla małych ekranów (mobile)
className="md:hidden"
To jest wszystko. Tyle potrzebujesz.
Dlaczego Ten Pattern Działa
Tailwind pracuje na zasadzie mobile-first. Oznacza to, że:
- Domyślny stan - zawsze zakładasz telefon (< 768px)
- Breakpoint modifier - dodajesz klasę, aby zmienić styl od pewnego rozmiaru (md+)
// Czytaj to tak:
// "Domyślnie hidden, od md pokaż jako flex"
className="hidden md:flex"
// "Domyślnie widoczne, od md ukryj"
className="md:hidden"
Praktyczne Zastosowanie
Navbar (Desktop Menu + Hamburger)
// Desktop menu - ukryto na telefonie, flex od md
<ul className="hidden md:flex gap-6">
<li><Link href="">Home</Link></li>
<li><Link href="">About</Link></li>
</ul>
// Hamburger button - widoczny na telefonie, ukryty od md
<button className="md:hidden">
<Menu size={24} />
</button>
// Mobile menu - widoczny na telefonie, ukryty od md
<div className="md:hidden">
<a href="">Home</a>
<a href="">About</a>
</div>
Sidebar
<aside className="hidden lg:flex flex-col w-64">
{/* Sidebar visible only on large screens */}
</aside>
Responsive Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{/* 1 col on mobile, 2 cols on tablet, 4 cols on desktop */}
</div>
Responsive Spacing
<div className="px-4 md:px-8 lg:px-16">
{/* 4px padding on mobile, 8px on tablet, 16px on desktop */}
</div>
Tailwind Breakpoints Reference
| Breakpoint | Min Width | Użyj Kiedy |
|---|---|---|
sm |
640px | Rzadko |
md |
768px | Zawsze (default) |
lg |
1024px | Dla dużych desktop'ów |
xl |
1280px | Wyjątki |
2xl |
1536px | Monitor 4K |
Profesjonalny porada: Trzymaj się md:hidden i hidden md:flex. Inne breakpointy to wyjątki.
The Pattern Applied to Everything
Ta sama logika działa dla każdej CSS właściwości:
// Display
className="hidden md:block"
className="block md:hidden"
// Flexbox
className="flex-col md:flex-row"
// Grid
className="grid-cols-1 md:grid-cols-2"
// Typography
className="text-sm md:text-base lg:text-lg"
// Colors
className="bg-red-400 md:bg-blue-400"
// Width
className="w-full md:w-1/2"
Why This Matters
- Consistency - Ten sam pattern we wszystkich projektach
- Predictability - Zawsze wiesz gdzie szukać breakpoint'ów
- Performance - Mniej CSS na urządzeniach mobilnych
- Maintainability - Łatwo dodawać responsive warianty
Podsumowanie
Chcesz element na DUŻYCH ekranach? → hidden md:flex ✅
Chcesz element na MAŁYCH ekranach? → md:hidden ✅
Chcesz element na OBU ekranach? → flex (bez breakpoint) ✅
To jest całe Tailwind responsiveness. Mistrz się robi przez powtórzenie.
TL;DR: Używaj hidden md:flex i md:hidden. Koniec. Prawie nigdy nie potrzebujesz nic innego.
Top comments (0)