menu dinamico

Author: Fabio Brasileiro

package-lock.json

@@ -22,6 +22,7 @@
     "@angular/router": "^17.3.0",
     "@fortawesome/angular-fontawesome": "^0.14.1",
     "angular-font-awesome": "^3.1.2",
+    "flowbite": "^2.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

package.json

@@ -14,7 +14,7 @@
         <!-- <a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in</a> -->
         <!-- <a href="https://themesberg.com/product/tailwind-css/landing-page"
           class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 lg:mr-0 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none dark:focus:ring-green-800">Download</a> -->
-        <button data-collapse-toggle="mobile-menu-2" type="button"
+        <button data-collapse-toggle="mobile-menu-2" type="button" (click)="removerHidden()"
           class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
           aria-controls="mobile-menu-2" aria-expanded="false">
           <span class="sr-only">Open main menu</span>

src/app/page/header-landing-page/header-landing-page.component.html

@@ -11,19 +11,42 @@ import { ButtonToggleDarkLightComponent } from '../button-toggle-dark-light/butt
 export class HeaderLandingPageComponent {
   inicio() {
     document.getElementById('inicio')?.scrollIntoView({ behavior: 'smooth' });
+    if (window.innerWidth < 10) {
+      this.removerHidden();
+    }
   }
   porqueJava() {
     document
       .getElementById('porqueJava')
       ?.scrollIntoView({ behavior: 'smooth' });
+    if (window.innerWidth < 1024) {
+      this.removerHidden();
+    }
   }
   sobre() {
     document.getElementById('sobre')?.scrollIntoView({ behavior: 'smooth' });
+    if (window.innerWidth < 1024) {
+      this.removerHidden();
+    }
   }
   evento() {
     document.getElementById('evento')?.scrollIntoView({ behavior: 'smooth' });
+    if (window.innerWidth < 1024) {
+      this.removerHidden();
+    }
   }
   contato() {
     document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth' });
+    if (window.innerWidth < 1024) {
+      this.removerHidden();
+    }
+  }
+
+  // Método para remover a classe 'hidden'
+  removerHidden() {
+    const mobileMenu = document.getElementById('mobile-menu-2');
+    if (mobileMenu) {
+      mobileMenu.classList.toggle('hidden');
+    }
   }
 }

src/app/page/header-landing-page/header-landing-page.component.ts

@@ -7,7 +7,10 @@ module.exports = {
   },
   purge: [
     './src/**/*.html'
-  ]
+  ],
+  plugins: [
+        require('flowbite/plugin')
+    ]
   // plugins: [require("taos/plugin")],
   // safelist: [
   //   "!duration-[0ms]",