From fabee4df1de1eb8498ac169f14f4d5e782ee7130 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 19:17:36 +0200
Subject: [PATCH] Stacca la barra di navigazione dal fondo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

La barra era una striscia a filo schermo con la sfumatura al bordo superiore
(scroll edge effect). Ora è una pillola staccata: il `<nav>` esterno tiene solo
posizione, safe area e margine laterale, mentre il materiale, il raggio, il bordo
e l'ombra passano al contenitore interno.

`pointer-events-none` sul wrapper e `pointer-events-auto` sulla pillola: ai lati
della barra i tocchi devono raggiungere il contenuto sotto, non una striscia
trasparente larga quanto lo schermo.

Via `bordo-sfumato`: la sfumatura serve a mascherare il taglio netto di una barra
attaccata al bordo, e su una che galleggia non ha più niente da mascherare.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/BottomNav.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx
index 6eb7bfb..01b5815 100644
--- a/src/components/crapp/BottomNav.tsx
+++ b/src/components/crapp/BottomNav.tsx
@@ -13,9 +13,11 @@ export function BottomNav() {
   return (
     <nav
       aria-label="Navigazione principale"
-      // `materiale` + `bordo-sfumato`: la barra è un vetro sotto cui il
-      // contenuto scorre, con una sfumatura al posto della riga netta.
-      className="materiale bordo-sfumato pad-sicura-fondo fixed inset-x-0 bottom-0 z-40"
+      // Barra flottante: il contenitore esterno tiene solo la posizione e
+      // l'inset di sistema, il materiale sta sulla pillola dentro.
+      // `pointer-events-none` perché ai lati della pillola i tocchi devono
+      // arrivare al contenuto sotto.
+      className="pad-sicura-fondo pointer-events-none fixed inset-x-0 bottom-0 z-40 px-3"
     >
       {/*
         Altezza fissa dal token, non dedotta dal contenuto: la striscia
@@ -23,7 +25,7 @@ export function BottomNav() {
         di sistema. Prima l'altezza dipendeva dai padding delle voci e nessuno
         poteva saperla da fuori.
       */}
-      <div className="mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-5 px-1">
+      <div className="materiale pointer-events-auto mx-auto grid h-[var(--altezza-nav)] max-w-md grid-cols-5 overflow-hidden rounded-full border border-border/60 px-1 shadow-lg">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}