better_ui 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f8b92fdba76f5e84f09fb6a3bf9879b209e0e7dfd8f864186784db24b808c59
-  data.tar.gz: 4d21e971baeecb10c7a3c5952041ac7e6911342e0efe4d0015efb92f9f214652
+  metadata.gz: 2242792aeee217a121cb73ec14ccc317d8f9c7af9e3dcdcf52629d05eca55731
+  data.tar.gz: 86015104cb387605208eaa8f9ffbdeb3764542fd089e09cf2dd011cecc37640b
 SHA512:
-  metadata.gz: 778ee8d067130b37947a227ccf1322e8cf5b82d19c9b3f7a0371cc16b62071daaeb5eb6a191898ef2b06419486fe656bc22bea4314fbf98884fdf16259ac8409
-  data.tar.gz: 1df545b428bdb281fb6f78b7be2e58e455bd6bd67f0202684f51b9e756c9ccc3e928a283f97d98a924185e1bb859b63f8cf2a91857ef49478cf6bfc3f254629d
+  metadata.gz: df1b73b3f9c3782a562ef7b585fd9bbac50c45fc8cc9661fe6ff8aa335c53f988c65ce4ab430c7c6dc82d74419b9dd80e026ad50c4533742b7940153fba2e653
+  data.tar.gz: 1010406d6a425b0ca48e1acf0af262634a7f5babf54edd34dfd6c7b6943dbdb1a18c250d800f68b9e41ec7bc94d095a8ed9d3e3ca7efb540bbb3ddbe4d310105

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright Umberto Peserico
+Copyright alessiobussolari
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -1,301 +1,259 @@
-# BetterUI
+# BetterUI 🎨
 
-Una libreria completa di componenti UI per applicazioni Rails costruita con ViewComponent e Tailwind CSS. Include 26 componenti con un sistema di design unificato e documentazione interattiva.
+[![Gem Version](https://badge.fury.io/rb/better_ui.svg)](https://badge.fury.io/rb/better_ui)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
-- 🎨 **Componenti Eleganti**: Componenti UI pre-costruiti con styling Tailwind CSS
-- 📖 **Documentazione Interattiva**: Preview Lookbook integrate per tutti i componenti
-- 🔧 **Altamente Personalizzabile**: Opzioni di configurazione flessibili per ogni componente
-- 🚀 **Production Ready**: Componenti testati che seguono le best practices
-- 📱 **Responsive**: Tutti i componenti sono mobile-first e responsive
-- ♿ **Accessibile**: Costruiti pensando all'accessibilità
+> Componenti UI eleganti, coerenti e facilmente integrabili per le tue applicazioni Rails
 
-## Panoramica
+BetterUI è una gemma Rails che fornisce componenti UI riutilizzabili con documentazione integrata. Progettata per essere leggera, personalizzabile e facile da usare, ti aiuta a costruire interfacce belle e consistenti senza JavaScript.
 
-Better UI è una gem Rails che fornisce una collezione di componenti UI riutilizzabili costruiti con ViewComponent e Tailwind CSS. Include un sistema di design unificato con tematizzazione consistente e gestione completa dei form.
+## ✨ Caratteristiche principali
 
-### Caratteristiche Principali
+- **Design puro** - Componenti UI eleganti e completamente CSS, senza JavaScript
+- **Facile integrazione** - Engine Rails montabile che si integra perfettamente con la tua app
+- **Documentazione integrata** - Visualizza esempi e documentazione direttamente nel browser
+- **Altamente personalizzabile** - Adatta facilmente lo stile al tuo brand
+- **Componenti modulari** - Usa solo ciò di cui hai bisogno
+- **Preview dei componenti** - Visualizza e interagisci con i componenti usando Lookbook
 
-- **Solo TailwindCSS**: Approccio puro Tailwind senza file CSS/SCSS personalizzati
-- **26 Componenti**: Libreria completa organizzata per scopo
-- **Sistema Input Unificato**: Componenti input supportano 14+ tipi (text, email, password, number, date, time, etc.)
-- **Documentazione Interattiva**: Integrazione Lookbook con preview live
-- **Sistema Helper**: Helper Rails-friendly con integrazione form builder
-- **Tematizzazione Consistente**: 9 temi standard (default, white, red, rose, orange, green, blue, yellow, violet)
-- **Dimensionamento Flessibile**: 3 dimensioni standard (small, medium, large) con 5 opzioni border radius
-- **Accessibilità**: Componenti progettati seguendo le best practices di accessibilità
+## 📦 Componenti disponibili
 
-## Installazione
+| Componente | Descrizione |
+|------------|-------------|
+| **Button** | Pulsanti stilizzati con varianti primary, secondary, success, danger |
+| **Alert** | Messaggi informativi, successi, avvisi ed errori |
+| **Card** | Contenitori flessibili con header, body e footer |
+| **Modal** | Finestre di dialogo modali |
+| **Tabs** | Navigazione a schede |
+| **Navbar** | Barra di navigazione responsive con supporto per menu dropdown |
+| **Sidebar** | Menu laterale con supporto per navigazione gerarchica |
+| **Toast** | Notifiche temporanee con timer e animazioni |
+| **Header** | Intestazioni di pagina con titolo, sottotitolo, breadcrumb e azioni |
+| **Form Elements** | Campi di input stilizzati (in arrivo) |
 
-Aggiungi questa riga al Gemfile della tua applicazione:
-
-```ruby
-gem "better_ui"
-```
+## 🚀 Installazione
 
-Per lo sviluppo con documentazione Lookbook:
+Aggiungi questa riga al Gemfile della tua applicazione:
 
 ```ruby
-gem "better_ui"
-gem "lookbook", group: :development
+gem 'better_ui', '~> 0.1.0'
 ```
 
-Quindi esegui:
+E poi esegui:
 
 ```bash
 $ bundle install
 ```
 
-## Setup
+## ⚙️ Configurazione
 
-### 1. Mount Engine (Opzionale)
+### Monta l'engine
 
-Se vuoi accedere alle route interne di BetterUI, monta l'engine in `config/routes.rb`:
+Aggiungi questo al tuo file `config/routes.rb`:
 
 ```ruby
 Rails.application.routes.draw do
-  mount BetterUi::Engine => "/better_ui"
-  # le tue altre route...
+  mount BetterUi::Engine => '/better_ui'
+  
+  # ... altre tue route
 end
 ```
 
-### 2. Setup Lookbook (Raccomandato per Development)
-
-Per accedere alla documentazione interattiva dei componenti durante lo sviluppo, monta Lookbook in `config/routes.rb`:
+### Includi gli assets
 
-```ruby
-Rails.application.routes.draw do
-  # Monta Lookbook solo in development
-  mount Lookbook::Engine => "/lookbook" if Rails.env.development?
+In `app/assets/stylesheets/application.css`:
 
-  # le tue altre route...
-end
+```css
+/*
+ *= require better_ui/application
+ */
 ```
 
-**Fatto!** I componenti BetterUI e le loro preview sono automaticamente disponibili in Lookbook.
-
-### 3. Includi Tailwind CSS
-
-Assicurati che la tua applicazione includa Tailwind CSS, dato che i componenti BetterUI si basano sulle classi Tailwind. Se non hai Tailwind CSS installato, segui la [guida ufficiale di installazione Tailwind CSS](https://tailwindcss.com/docs/guides/ruby-on-rails).
-
-## Utilizzo
+## 🎮 Utilizzo
 
-I componenti Better UI possono essere utilizzati in due modi: istanziazione diretta o metodi helper.
-
-### Metodi Helper (Raccomandato)
+Una volta installato, puoi iniziare ad usare i componenti:
 
 ```erb
-<%# Input di testo con validazione %>
-<%= bui_input_text(
-  name: 'email',
-  value: @user.email,
-  type: :email,
-  theme: :blue,
-  size: :large,
-  required: true
-) %>
+<%# Button %>
+<%= better_ui_button("Salva", type: "primary") %>
+
+<%# Alert %>
+<%= better_ui_alert("Operazione completata", type: "success") %>
+
+<%# Card %>
+<%= better_ui_card do %>
+  <%= better_ui_card_header("Titolo Card") %>
+  <%= better_ui_card_body do %>
+    <p>Contenuto della card...</p>
+  <% end %>
+<% end %>
 
-<%# Button con theme e size %>
-<%= bui_button(
-  'Invia Form',
-  theme: :green,
-  size: :large,
-  type: :submit
+<%# Header con breadcrumb %>
+<%= render BetterUi::Application::HeaderComponent.new(
+  title: "Dashboard",
+  subtitle: "Gestisci tutto da qui",
+  breadcrumbs: [
+    { text: "Home", url: "/" },
+    { text: "Dashboard" }
+  ],
+  actions: [
+    { content: button_html("Nuovo", "primary") }
+  ]
 ) %>
+```
 
-<%# Card con blocco di contenuto %>
-<%= bui_card(title: 'Profilo Utente', theme: :white) do %>
-  <p>Contenuto informazioni utente qui</p>
-<% end %>
+Visita `/better_ui` nella tua applicazione per vedere la documentazione completa e gli esempi.
 
-<%# Integrazione con form %>
-<%= form_with model: @user do |form| %>
-  <%= bui_input_text(name: 'name', form: form, required: true) %>
-  <%= bui_input_text(name: 'email', type: :email, form: form) %>
-  <%= bui_button('Salva', type: :submit, theme: :blue) %>
-<% end %>
-```
+### Il componente Header
 
-### Istanziazione Diretta
+Il componente Header è progettato per creare intestazioni di pagina complete con numerose funzionalità:
 
 ```erb
-<%# Rendering diretto del componente %>
-<%= render BetterUi::General::Input::Text::Component.new(
-  name: 'username',
-  type: :text,
-  theme: :default,
-  size: :medium
-) %>
-
-<%# Componente button %>
-<%= render BetterUi::General::Button::Component.new(
-  'Cliccami',
-  theme: :blue,
-  size: :large
+<%= render BetterUi::Application::HeaderComponent.new(
+  title: {
+    text: "Impostazioni",
+    icon: "settings"
+  },
+  subtitle: "Configura le preferenze del sistema",
+  breadcrumbs: [
+    { text: "Home", url: "/" },
+    { text: "Admin", url: "/admin" },
+    { text: "Impostazioni" }
+  ],
+  variant: :modern,
+  fixed: :top,
+  show_breadcrumbs: true,
+  actions: [
+    { content: button_html("Salva", "primary") },
+    { content: button_html("Annulla", "secondary") }
+  ]
 ) %>
 ```
 
-### Sistema di Tematizzazione
-
-Tutti i componenti supportano tematizzazione consistente:
-
-- **9 Temi Standard**: default, white, red, rose, orange, green, blue, yellow, violet
-- **3 Dimensioni Standard**: small, medium, large
-- **5 Opzioni Border Radius**: none, small, medium, large, full
-
-### Approccio Styling
+Il componente supporta:
+- Titolo con opzionale icona integrata
+- Sottotitolo descrittivo
+- Breadcrumbs completi con link di navigazione
+- Azioni contestuali (pulsanti, menu, ecc.)
+- Varianti di stile: modern, light, dark, primary, transparent
+- Posizionamento fisso (in alto o in basso)
+- Controllo della visibilità dei breadcrumb
 
-Better UI usa un approccio TailwindCSS puro con costanti per styling manutenibile:
+### Preview dei componenti con Lookbook
 
-```ruby
-# Le costanti del componente definiscono le opzioni di styling
-BUTTON_THEME_CLASSES = {
-  default: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
-  blue: 'bg-blue-600 text-white hover:bg-blue-700',
-  green: 'bg-green-600 text-white hover:bg-green-700'
-}.freeze
-
-BUTTON_SIZE_CLASSES = {
-  small: 'px-3 py-1.5 text-sm',
-  medium: 'px-4 py-2 text-base',
-  large: 'px-6 py-3 text-lg'
-}.freeze
-```
-
-## Componenti Disponibili
+BetterUI integra [Lookbook](https://github.com/allmarkedup/lookbook) per visualizzare in anteprima i componenti UI:
 
-Better UI include 26 componenti organizzati in tre categorie:
+1. Accedi a `/better_ui/lookbook` nella tua applicazione per visualizzare il catalogo componenti
+2. Esplora le varianti e le configurazioni disponibili per ogni componente
+3. Visualizza il codice sorgente e il markup generato
+4. Interagisci con i componenti in tempo reale
 
-### Componenti Application (4)
+Lookbook è disponibile solo negli ambienti di sviluppo e test.
 
-Componenti di layout e navigazione per interfacce applicative:
+## 🎮 Personalizzazione
 
-- **Card**: Container di contenuto con supporto header e azioni
-- **Main**: Area contenuto principale dell'applicazione con layout responsive
-- **Navbar**: Barra di navigazione superiore con supporto contenuto flessibile
-- **Sidebar**: Navigazione laterale collassabile
+### Usa l'inizializzatore
 
-### Componenti General (22)
+Crea un file `config/initializers/better_ui.rb`:
 
-Elementi UI core per costruire interfacce:
+```ruby
+BetterUi.configure do |config|
+  config.button_defaults = {
+    class: 'rounded-lg text-sm'
+  }
+  
+  config.alert_defaults = {
+    dismissible: true
+  }
+end
+```
 
-**Display & Feedback**
+### Personalizza gli stili
 
-- **Alert**: Messaggi di notifica con temi multipli e opzioni dismissible
-- **Avatar**: Immagini profilo utente con supporto fallback
-- **Badge**: Indicatori di stato e etichette
-- **Progress**: Barre di progresso e indicatori di caricamento
-- **Spinner**: Animazioni di caricamento
-- **Tooltip**: Overlay di aiuto contestuale e informazioni
+Sovrascrivi gli stili CSS nel tuo foglio di stile:
 
-**Navigazione & Struttura**
+```css
+.better-ui-button-primary {
+  background-color: #8b5cf6; /* Viola personalizzato */
+  border-color: #8b5cf6;
+}
+```
 
-- **Breadcrumb**: Indicatori di percorso di navigazione
-- **Divider**: Separatori di contenuto visivi
-- **Heading**: Intestazioni con tipografia consistente
-- **Icon**: Sistema icone SVG con libreria estesa
-- **Link**: Elementi anchor potenziati con supporto theme
-- **Panel**: Sezioni di contenuto organizzate
-- **Table**: Tabelle dati con sorting e funzionalità responsive
-- **Tag**: Elementi di categorizzazione ed etichettatura
+## 🛠 Sviluppo
 
-**Form & Input**
+BetterUI utilizza una app dummy integrata per lo sviluppo e i test. Ecco come iniziare:
 
-- **Button**: Button azione con varianti multiple e stati
-- **Field**: Wrapper campo form con supporto label e validazione
-- **Input**: Sistema input unificato che supporta 14+ tipi:
-  - **Text**: text, email, password, search, url, tel
-  - **Number**: number, range
-  - **Date/Time**: date, datetime-local, time, month, week
-  - **File**: upload file
-  - **Color**: color picker
-  - **Checkbox**: Opzioni multi-selezione
-  - **Radio**: Opzioni selezione singola
-  - **Select**: Selezioni dropdown
-  - **Textarea**: Input testo multi-riga
+### Setup iniziale
 
-### Componenti Form (0)
+```bash
+# Clona il repository
+git clone https://github.com/alessiobussolari/better_ui.git
+cd better_ui
 
-Riservati per futuri componenti form specializzati e widget form complessi.
+# Installa le dipendenze
+bin/setup
+```
 
-## Personalizzazione e Styling
+### Avvia l'applicazione di test
 
-I componenti BetterUI usano classi Tailwind CSS. Puoi:
+Per vedere i componenti in azione e lavorare sulla documentazione:
 
-1. **Sovrascrivere classi**: Passa classi personalizzate tramite il parametro `classes`
-2. **Estendere componenti**: Crea i tuoi componenti che ereditano da BetterUI
-3. **Personalizzazione theme**: Modifica la configurazione Tailwind per tematizzazione consistente
+```bash
+# Avvia il server di test
+cd test/dummy
+bin/rails server
 
-```erb
-<!-- Aggiungi classi personalizzate -->
-<%= render BetterUi::General::Button::Component.new(
-  label: "Button Personalizzato",
-  classes: "my-custom-class hover:scale-105"
-) %>
+# Oppure dalla directory principale
+bin/rails server -b 0.0.0.0
 ```
 
-Better UI è progettato per essere altamente personalizzabile mantenendo consistenza:
+Visita `http://localhost:3000/better_ui` nel tuo browser per vedere la documentazione e testare i componenti.
 
-1. **Personalizzazione Theme**: Modifica le costanti dei componenti per cambiare lo styling di default
-2. **Configurazione Componenti**: Configura opzioni di default in `config/initializers/better_ui.rb`
-3. **Integrazione TailwindCSS**: Tutto lo styling usa classi TailwindCSS per massima flessibilità
-4. **Estensioni Componenti**: Estendi componenti esistenti o crea i tuoi seguendo i pattern stabiliti
+### Flusso di sviluppo
 
-## Testing
+1. **Crea un branch**: `git checkout -b feature/nuovo-componente`
+2. **Implementa il componente**: Aggiungi helper in `app/helpers/better_ui/application_helper.rb`
+3. **Aggiungi CSS**: Inserisci gli stili in `app/assets/stylesheets/better_ui/application.css`
+4. **Documenta**: Crea file Markdown in `docs/components/`
+5. **Testa**: Verifica nell'app dummy che tutto funzioni correttamente
+6. **Esegui i test**: `rake test`
 
-I componenti Better UI sono testati completamente. Puoi eseguire la test suite con:
+### Build e rilascio
+
+Per buildare la gemma localmente:
 
 ```bash
-bin/rails test
+bundle exec rake build
 ```
 
-## Supporto Browser
-
-I componenti BetterUI supportano tutti i browser moderni che supportano:
-
-- CSS Grid e Flexbox
-- Funzionalità JavaScript ES6+
-- Tailwind CSS
-
-## Contributing
-
-1. Forka il repository
-2. Crea il tuo branch feature (`git checkout -b feature/componente-fantastico`)
-3. Aggiungi il tuo componente con test e preview Lookbook
-4. Committa le tue modifiche (`git commit -am 'Aggiungi componente fantastico'`)
-5. Pusha al branch (`git push origin feature/componente-fantastico`)
-6. Crea una Pull Request
-
-### Setup Development
+Per installare la versione in sviluppo:
 
 ```bash
-git clone https://github.com/alessiobussolari/better_ui.git
-cd better_ui
-bundle install
-cd test/dummy
-bundle exec rails server
+bundle exec rake install
 ```
 
-Visita `http://localhost:3000/lookbook` per vedere la documentazione dei componenti.
+## 🤝 Contribuire
 
-## Roadmap
+I contributi sono benvenuti e apprezzati! Ecco come puoi aiutare:
 
-- 🎯 Componenti form avanzati (input complessi, validazioni)
-- 📊 Componenti chart e visualizzazione dati
-- 🎭 Componenti animazione e transizione
-- 🌙 Supporto dark mode
-- 📱 Componenti specifici mobile
-- 🔧 Tool di configurazione e generatori
+1. **Fork** il repository su GitHub
+2. **Clona** il tuo fork: `git clone https://github.com/TUO-USERNAME/better_ui.git`
+3. **Crea** un branch per la tua feature: `git checkout -b feature/incredibile-miglioramento`
+4. **Committa** i tuoi cambiamenti: `git commit -am 'Aggiunge una funzionalità incredibile'`
+5. **Pusha** al branch: `git push origin feature/incredibile-miglioramento`
+6. Invia una **Pull Request**
 
-## License
+### Linee guida
 
-La gem è disponibile come open source sotto i termini della [MIT License](https://opensource.org/licenses/MIT).
+- Segui lo stile di codice esistente
+- Scrivi test per le nuove funzionalità
+- Aggiorna la documentazione
+- Crea componenti che funzionano senza JavaScript
 
-## Support
+## 📄 Licenza
 
-- 📖 [Documentazione](https://github.com/alessiobussolari/better_ui)
-- 🐛 [Issue Tracker](https://github.com/alessiobussolari/better_ui/issues)
-- 💬 [Discussioni](https://github.com/alessiobussolari/better_ui/discussions)
+BetterUI è disponibile come open source sotto i termini della [Licenza MIT](https://opensource.org/licenses/MIT).
 
 ---
 
-Costruito con ❤️ da [PanDev](https://github.com/alessiobussolari)
+Realizzato con ❤️ da [Alessio Bussolari](https://github.com/alessiobussolari)

data/app/assets/javascripts/better_ui/controllers/navbar_controller.js

@@ -0,0 +1,138 @@
+// Navbar controller per gestire il comportamento del menu mobile e dei dropdown
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "dropdown", "submenu"]
+  
+  connect() {
+    // Verifica se siamo su mobile e aggiorna lo stato del menu
+    this.updateMenuState();
+    
+    // Aggiungi un event listener per il resize della finestra
+    window.addEventListener("resize", this.updateMenuState.bind(this));
+    
+    // Chiudi menu quando si clicca su un link (solo su mobile)
+    if (this.hasMenuTarget) {
+      const links = this.menuTarget.querySelectorAll("a");
+      links.forEach(link => {
+        link.addEventListener("click", () => {
+          // Se siamo su mobile, chiudi il menu
+          if (window.innerWidth < 768) {
+            this.closeMenu();
+          }
+        });
+      });
+    }
+
+    // Aggiungi listener per i click all'esterno del menu
+    document.addEventListener("click", this.handleClickOutside.bind(this))
+  }
+  
+  disconnect() {
+    // Rimuovi event listener per il resize della finestra
+    window.removeEventListener("resize", this.updateMenuState.bind(this));
+
+    // Rimuovi listener al disconnette
+    document.removeEventListener("click", this.handleClickOutside.bind(this))
+  }
+  
+  // Metodo per alternare l'apertura/chiusura del menu
+  toggleMenu(event) {
+    event.stopPropagation()
+    const isExpanded = this.menuTarget.classList.contains("hidden") === false
+    
+    if (isExpanded) {
+      this.closeMenu()
+    } else {
+      this.openMenu()
+    }
+  }
+  
+  // Metodo per chiudere il menu
+  closeMenu() {
+    this.menuTarget.classList.add("hidden")
+    
+    // Aggiorna l'attributo aria-expanded
+    const button = this.element.querySelector("[aria-controls='navbar-menu']")
+    if (button) {
+      button.setAttribute("aria-expanded", "false")
+    }
+  }
+  
+  // Metodo per aggiornare lo stato del menu in base alla dimensione della finestra
+  updateMenuState() {
+    if (this.hasMenuTarget) {
+      // Se siamo su desktop (md breakpoint - 768px)
+      if (window.innerWidth >= 768) {
+        // Assicurati che il menu sia visibile su desktop
+        this.menuTarget.classList.remove("hidden");
+        this.menuTarget.classList.add("md:block");
+      } else {
+        // Su mobile, nascondi il menu di default
+        this.menuTarget.classList.add("hidden");
+      }
+      
+      // Aggiorna l'attributo aria-expanded
+      const button = this.element.querySelector("[aria-controls='navbar-menu']");
+      if (button) {
+        const isExpanded = window.innerWidth >= 768 ? "true" : "false";
+        button.setAttribute("aria-expanded", isExpanded);
+      }
+    }
+  }
+
+  openMenu() {
+    this.menuTarget.classList.remove("hidden")
+    
+    // Chiudi tutti i dropdown nel menu mobile
+    if (this.hasSubmenuTarget) {
+      this.submenuTargets.forEach(submenu => {
+        submenu.classList.add("hidden")
+      })
+    }
+
+    // Aggiorna stato del pulsante
+    event.currentTarget.setAttribute("aria-expanded", "true")
+  }
+
+  toggleDropdown(event) {
+    event.stopPropagation()
+    const button = event.currentTarget
+    const dropdownId = button.getAttribute("aria-controls")
+    const dropdown = document.getElementById(dropdownId)
+    
+    if (dropdown) {
+      const isExpanded = button.getAttribute("aria-expanded") === "true"
+      
+      if (isExpanded) {
+        dropdown.classList.add("hidden")
+        button.setAttribute("aria-expanded", "false")
+      } else {
+        // Chiudi tutti gli altri dropdown prima di aprire quello corrente
+        if (this.hasSubmenuTarget) {
+          this.submenuTargets.forEach(submenu => {
+            if (submenu.id !== dropdownId) {
+              submenu.classList.add("hidden")
+              
+              // Trova e aggiorna il pulsante associato
+              const associatedButton = this.element.querySelector(`[aria-controls='${submenu.id}']`)
+              if (associatedButton) {
+                associatedButton.setAttribute("aria-expanded", "false")
+              }
+            }
+          })
+        }
+        
+        dropdown.classList.remove("hidden")
+        button.setAttribute("aria-expanded", "true")
+      }
+    }
+  }
+
+  handleClickOutside(event) {
+    // Chiudi il menu se si fa clic all'esterno
+    if (this.element.contains(event.target) === false) {
+      this.closeMenu()
+    }
+  }
+}