Nawigacja mobilna - dolny pasek i menu w szufladzie

Gorne menu na telefonie mialo poziomy pasek przewijania, a najwazniejsze
skroty nie mialy sie gdzie zmiescic.

- dolny pasek (<= 760 px): Start, Szukaj, Dodaj, Ulubione, Konto
- pasek dzialow (<= 1100 px) przenosi sie do szuflady pod przyciskiem menu
- w naglowku na telefonie zostaja wiadomosci, dzwonek i menu
- kafelki narzedzi schodza do dwoch i jednej kolumny
- karty hero wracaja do przeplywu, zamiast nachodzic na liste korzysci
- spis tresci stron prawnych nie rozpycha juz strony przez tabele

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/tests/routing.spec.ts

@@ -689,3 +689,62 @@ test.describe('Prywatnosc', () => {
     await expect(page.locator('.listing-detail-tour-embed iframe')).toHaveCount(1);
   });
 });
+
+// Telefon: poziome menu nie miesci sie w naglowku, wiec dzialy sa w szufladzie,
+// a najczestsze miejsca w dolnym pasku. Kazda pozycja to link ze zmiana adresu.
+test.describe('Nawigacja mobilna', () => {
+  test.use({ viewport: { width: 390, height: 844 } });
+
+  test('naglowek nie przewija sie w bok, menu glowne chowa sie w szufladzie', async ({ page }) => {
+    await goto(page, ROUTES.home);
+    await expect(page.locator('.nav')).toBeHidden();
+
+    const overflow = await page.evaluate(() => {
+      const de = document.documentElement;
+      return de.scrollWidth - de.clientWidth;
+    });
+    expect(overflow).toBeLessThanOrEqual(0);
+
+    await page.getByRole('button', { name: 'Menu serwisu' }).click();
+    await expect(page.locator('.mobile-menu')).toBeVisible();
+    await page.locator('.mobile-menu').getByRole('link', { name: 'Wynajmuję' }).click();
+    await expect(page).toHaveURL(new RegExp(`${ROUTES.rent}$`));
+    await expect(page.locator('.mobile-menu')).toHaveCount(0);
+  });
+
+  test('dolny pasek prowadzi pod wlasne adresy', async ({ page }) => {
+    await goto(page, ROUTES.home);
+    // Baner zgody stoi nad dolnym paskiem - na telefonie trzeba go najpierw zamknac.
+    await page.getByRole('button', { name: 'Tylko niezbędne' }).click();
+    const bar = page.locator('.mobile-nav');
+    await expect(bar).toBeVisible();
+
+    await bar.getByRole('link', { name: 'Szukaj' }).click();
+    await expect(page).toHaveURL(new RegExp(`${ROUTES.buy}$`));
+
+    await bar.getByRole('link', { name: 'Dodaj ogłoszenie' }).click();
+    // Dodawanie wymaga logowania - goscia przejmuje ProtectedRoute.
+    await expect(page).toHaveURL(new RegExp(`${ROUTES.login}$`));
+
+    await bar.getByRole('link', { name: 'Start' }).click();
+    await expect(page).toHaveURL(/\/$/);
+  });
+
+  test('dolny pasek nie zaslania stopki', async ({ page }) => {
+    await goto(page, ROUTES.buy);
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await page.waitForTimeout(400);
+
+    const footerBottom = await page.locator('.site-footer').evaluate((el) => el.getBoundingClientRect().bottom);
+    const barTop = await page.locator('.mobile-nav').evaluate((el) => el.getBoundingClientRect().top);
+    expect(footerBottom).toBeLessThanOrEqual(barTop + 1);
+  });
+
+  test('na desktopie nie ma dolnego paska ani przycisku menu', async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await goto(page, ROUTES.home);
+    await expect(page.locator('.mobile-nav')).toBeHidden();
+    await expect(page.locator('.header-burger')).toBeHidden();
+    await expect(page.locator('.nav')).toBeVisible();
+  });
+});