bruno robota

assets/script.js

@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const toggleBtn = document.getElementById('toggle_btn');
+    const toggleBtnIcon = document.getElementById('toggle_btn_icon');
+    const dropDownMenu = document.getElementById('dropdown_menu');
+
+    toggleBtn.addEventListener('click', function() {
+        dropDownMenu.classList.toggle('open');
+        const isOpen = dropDownMenu.classList.contains('open');
+
+        toggleBtnIcon.classList = isOpen
+        ? 'ri-close-line'
+        : 'ri-menu-line';
+    }, false);
+}, false);

assets/style.css

@@ -133,4 +133,60 @@ main {
 
 h1, h2, h3, h4, h5, h6 {
     text-align: center;
+}
+
+#dropdown_menu {
+    top: 0;
+    width: fit-content;
+    display: flex;
+    left: auto;
+    gap: 2rem;
+}
+
+#dropdown_menu li {
+    padding: 0.7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#dropdown_menu .action_btn {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.navbar #toggle_btn {
+    display: none;
+    color: #fff;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+/* RESPONSIVE DESIGN */
+@media(max-width: 992px) {
+
+    .navbar #toggle_btn {
+        display: block;
+    }
+
+    #dropdown_menu {
+        gap: unset;
+        position: absolute;
+        height: 0;
+        right: 2rem;
+        top: 60px;
+        width: 300px;
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(15px);
+        border-radius: 10px;
+        overflow: hidden;
+        flex-direction: column;
+        transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        z-index: 100;
+    }
+
+    #dropdown_menu.open {
+        height: fit-content;
+    }
 }