feat: refactor navbar btn toggle

leon-rdo · Aug 16, 2024 · 211096e · 211096e
1 parent 3d89ab5
commit 211096e
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 17 deletions.
diff --git a/static/themes/MyResume/assets/css/style.css b/static/themes/MyResume/assets/css/style.css
@@ -118,7 +118,7 @@ h6 {
 #offcanvasHeader {
   z-index: 9997;
   transition: all 0.5s;
-  width: 220px;
+  width: 175px;
   background: 0;
   border: 0
 }
@@ -223,8 +223,8 @@ h6 {
 
 .nav-toggle-button {
   position: fixed;
-  left: 10px;
-  bottom: 10px;
+  left: 1.5rem;
+  bottom: 1.5rem;
   z-index: 9998;
   border: 0;
   font-size: 28px;
@@ -234,14 +234,16 @@ h6 {
   cursor: pointer;
   padding: 5px;
   background-color: #0563bb;
+  width: 56px;
+  height: 56px;
 }
 
-@media (min-width: 992px) {
+@media (min-width: 768px) {
   .nav-toggle-button {
-    left: unset;
+    left: 1.5rem;
     bottom: unset;
-    right: 10px;
-    top: 10px;
+    right: unset;
+    top: 1.5rem;
   }
 }
 

diff --git a/static/themes/MyResume/assets/js/main.js b/static/themes/MyResume/assets/js/main.js
@@ -270,20 +270,50 @@
 })()
 
 document.addEventListener('DOMContentLoaded', function () {
+  // Seleciona os elementos do offcanvas e do botão de alternância
   var offcanvasElement = document.querySelector('#offcanvasHeader');
   var toggleButtonIcon = document.querySelector('.nav-toggle-button i');
+  var manuallyShown = window.innerWidth >= 992 ? false : true;
 
+  // Inicializa o tooltip para o botão de alternância
+  var tooltip = new bootstrap.Tooltip(toggleButtonIcon, {
+    boundary: document.body
+  });
+
+  // Função para atualizar o texto do tooltip
+  function updateTooltipText(newText) {
+    toggleButtonIcon.setAttribute('data-bs-original-title', newText);
+    tooltip.dispose(); // Destroi o tooltip existente
+    tooltip = new bootstrap.Tooltip(toggleButtonIcon, { // Recria o tooltip
+      boundary: document.body
+    });
+  }
+
+  // Adiciona evento para quando o offcanvas for mostrado
   offcanvasElement.addEventListener('show.bs.offcanvas', function () {
-    toggleButtonIcon.classList.remove('bi-eye');
-    toggleButtonIcon.classList.add('bi-eye-slash');
+    updateTooltipText('Ocultar menu');
   });
 
+  // Adiciona evento para quando o offcanvas for ocultado
   offcanvasElement.addEventListener('hide.bs.offcanvas', function () {
-    toggleButtonIcon.classList.remove('bi-eye-slash');
-    toggleButtonIcon.classList.add('bi-eye');
+    updateTooltipText('Exibir menu');
+    manuallyShown = true;
   });
 
-  var offcanvasElement = document.querySelector('#offcanvasHeader');
+  // Função para mostrar e ocultar o tooltip
+  function showAndHideTooltip() {
+    tooltip.show(); // Mostra o tooltip
+    setTimeout(function () {
+      tooltip.hide(); // Oculta o tooltip após 3 segundos
+    }, 3000);
+  }
+
+  // Exibe o tooltip inicialmente ao carregar o site com um pequeno atraso
+  setTimeout(showAndHideTooltip, 500);
+
+  // Configura o intervalo para mostrar o tooltip a cada 20 segundos
+  setInterval(showAndHideTooltip, 20000);
+
   var offcanvasBootstrap = new bootstrap.Offcanvas(offcanvasElement);
 
   // Verifica o tamanho da janela
@@ -300,4 +330,18 @@ document.addEventListener('DOMContentLoaded', function () {
       offcanvasBootstrap.hide();
     }
   });
-});
+
+  // Função para verificar a posição de rolagem
+  function checkScrollPosition() {
+    var scrollPosition = window.scrollY;
+    var pageHeight = document.documentElement.scrollHeight;
+    var scrollThreshold = pageHeight * 0.3;
+
+    if (scrollPosition > scrollThreshold && !manuallyShown) {
+      offcanvasBootstrap.hide();
+    }
+  }
+
+  // Adiciona evento de scroll para verificar a posição de rolagem
+  window.addEventListener('scroll', checkScrollPosition);
+});
diff --git a/templates/base.html b/templates/base.html
@@ -39,16 +39,16 @@
 
 <body>
   <!-- ======= nav toggle button ======= -->
-  <button class="nav-toggle-button rounded-circle" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasHeader" aria-controls="offcanvasHeader">
-    <i class="bi bi-eye"></i>
+  <button class="nav-toggle-button rounded-circle" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasHeader" aria-controls="offcanvasHeader" >
+    <i class="bi bi-list"></i>
   </button>
 
   <!-- ======= Header ======= -->
   <header id="offcanvasHeader" class="d-flex flex-column justify-content-center offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" aria-labelledby="offcanvasHeaderLabel">
 
-    <nav id="navbar" class="navbar nav-menu mx-4">
+    <nav id="navbar" class="navbar nav-menu ms-4">
     <ul>
-        <li><a href="{% url "home:index" %}#hero" class="nav-link scrollto active"><i class="bi bi-house"></i> <span>Início</span></a></li>
+        <li><a href="{% url 'home:index' %}#hero" class="nav-link scrollto active"><i class="bi bi-house"></i> <span>Início</span></a></li>
         <li><a href="#about" class="nav-link scrollto"><i class="bi bi-person"></i> <span>Sobre</span></a></li>
         <li><a href="#resume" class="nav-link scrollto"><i class="bi bi-file-earmark-text"></i> <span>Resumo</span></a></li>
         <li><a href="#portfolio" class="nav-link scrollto"><i class="bi bi-journal-code"></i> <span>Portfólio</span></a></li>
@@ -106,6 +106,9 @@
 
   <!-- Bootstrap JS -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
+
 
   <!-- Extra -->
   {% block extra_script %}{% endblock extra_script %}