fix close btn

paulemacedo · Nov 9, 2024 · 165091e · 165091e
1 parent 1ca5a2f
commit 165091e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 28 deletions.
diff --git a/Styles.css b/Styles.css
@@ -6,6 +6,35 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+/* Estilo do navbar-toggler */
+.navbar-toggler {
+    padding: 0.25rem 0.75rem;
+    font-size: 1.25rem;
+    line-height: 1;
+    background-color: transparent;
+    border: 1px solid rgba(255, 254, 254, 0.1);
+    border-radius: 0.25rem;
+    transition: box-shadow 0.15s ease-in-out;
+}
+
+/* Estilo do close-button */
+.close-button {
+    padding: 0.25rem 0.75rem;
+    font-size: 1.25rem;
+    line-height: 1;
+    background-color: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.1); /* Same border as navbar-toggler */
+    border-radius: 0.25rem;
+    cursor: pointer;
+    z-index: 1001; /* Ensure it stays on top of other elements */
+    transition: box-shadow 0.15s ease-in-out;
+}
+
+.close-button i {
+    font-size: 2.00rem; /* Match the font size of navbar-toggler */
+    color: #f8f7f7; /* Change to desired color */
+}
+
 /* Menu Container */
 .menu-container {
     position: fixed;
@@ -29,28 +58,15 @@ body {
     display: flex;
     justify-content: flex-end;
 }
-.close-button {
-    background: none;
-    border: none;
-    color: white;
-    font-size: 1.5rem;
-    padding: 8px;
-    cursor: pointer;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.1);
-}
+
 /* Menu Navigation */
 .menu-nav {
     padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 15px;
 }
+
 .menu-item {
     display: flex;
     justify-content: space-between;
@@ -63,6 +79,7 @@ body {
     transition: background-color 0.2s;
     background-color: rgba(255, 255, 255, 0.05);
 }
+
 .menu-item:hover {
     background-color: rgba(255, 255, 255, 0.1);
     color: white;
@@ -97,6 +114,8 @@ body {
     font-weight: bold;
 }
 
+
+
 /* Navigation */
 .nav-pills .nav-link {
     padding: 8px 16px;

diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Byte de Sabor</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css">
     <link href="styles.css" rel="stylesheet">
 </head>
 <body>
@@ -17,13 +18,14 @@
         </div>
     </nav>
 
-    <div id="sidebar" class="menu-container">
+    <div class="menu-container">
         <div class="menu-header">
-            <button class="close-button">
-                <i class="fas fa-times"></i>
+            <button class="close-button" type="button">
+                <i class="bi bi-x"></i>
             </button>
         </div>
 
+
         <nav class="menu-nav">
             <a href="index.html" class="menu-item">
                 Cardápio

diff --git a/menu-script.js b/menu-script.js
@@ -1,19 +1,22 @@
-// Menu functionality
 document.addEventListener('DOMContentLoaded', function() {
     const closeButton = document.querySelector('.close-button');
     const menuContainer = document.querySelector('.menu-container');
     const navbarToggler = document.getElementById('navbar-toggler');
 
-    closeButton.addEventListener('click', function() {
-        menuContainer.style.animation = 'slideOut 0.3s ease-out forwards';
-        setTimeout(() => {
-            menuContainer.classList.remove('active');
-        }, 300);
-    });
+    if (closeButton) {
+        closeButton.addEventListener('click', function() {
+            menuContainer.style.animation = 'slideOut 0.3s ease-out forwards';
+            setTimeout(() => {
+                menuContainer.classList.remove('active');
+            }, 300);
+        });
+    }
 
-    navbarToggler.addEventListener('click', function() {
-        menuContainer.classList.toggle('active');
-    });
+    if (navbarToggler) {
+        navbarToggler.addEventListener('click', function() {
+            menuContainer.classList.toggle('active');
+        });
+    }
 });
 
 // Add slideOut animation to CSS