spestexnika

2025-10-04 11:41:38 +05:00
parent cb78857a3a
commit 398269b49b
180 changed files with 1174 additions and 113 deletions
--- a/components/nav_foot/navbar.css
+++ b/components/nav_foot/navbar.css
@@ -0,0 +1,103 @@
+.nav_link_group_phone {
+    display: none;
+  }
+  
+  .toggler {
+    display: none;
+  }
+  
+  .Navbar_btn {
+    display: none;
+  }
+  
+  .toggler div {
+    width: 1.5rem;
+    height: 0.15rem;
+    margin: 0.5rem;
+    background: rgb(10, 131, 26);
+    background-color: rgb(10, 131, 26);
+    transition: 0.4s ease-in-out;
+  }
+  
+  .toggler .toggle_item2 {
+    width: 1rem;
+  }
+  
+  .overflow{
+    position: absolute;
+    display: none;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    background-color: rgba(66, 64, 64, 0.199);
+  }
+  
+  .overflow.active{
+    display: block;
+  }
+  
+  @media (max-width: 768px) {
+    .nav_link_group {
+      display: none;
+    }
+  
+    .toggler {
+      display: block;
+      width: 100%;
+    }
+  
+    .toggler.toggle {
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+    }
+  
+    /* animation toggle icon */
+    .toggler.toggle .toggle_item1 {
+      transform: rotate(-45deg) translate(-20px, 5px);
+    }
+    .toggler.toggle .toggle_item2 {
+      opacity: 0;
+    }
+    .toggler.toggle .toggle_item3 {
+      transform: rotate(45deg) translate(-20px, -5px);
+    }
+  
+    .nav_link_group_phone {
+      position: absolute;
+      z-index: 1;
+      top: 0vh;
+      right: 0;
+      bottom: 0;
+      height: 100vh;
+      width: calc(50% + 100px);
+      max-width: 100%;
+      background-color: white;
+      background: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      align-items: start;
+      gap: 20px;
+      padding: 0 10px 10px 10px;
+      transform: translate(100%);
+      transition: 0.4s ease-in-out;
+    }
+  
+   .overflow{
+    position: absolute;
+    display: none;
+    width: 100vh;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100vh;
+    background-color: rgba(66, 64, 64, 0.199);
+  }}
+  
+  .active {
+    transform: translate(0);
+  }