AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

2022-07-07 21:06:35 +03:00
parent 9ac4883bd3
commit 1beb1e8711
7 changed files with 289 additions and 33 deletions
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,11 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="LanguageDetectionInspection" enabled="true" level="TYPO" enabled_by_default="true" />
+    <inspection_tool class="SpellCheckingInspection" enabled="true" level="INFORMATION" enabled_by_default="true">
+      <option name="processCode" value="true" />
+      <option name="processLiterals" value="true" />
+      <option name="processComments" value="true" />
+    </inspection_tool>
+  </profile>
+</component>
--- a/index.html
+++ b/index.html
@@ -1,9 +1,11 @@
+
 <!DOCTYPE html>
 <html lang="tr">
 <head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="description" content="Uğur Galeri">
+    <script src="resources/scripts/main.js" defer></script>
    <script src="resources/scripts/index.js" defer></script>
    <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
    <title>Uğur Galeri</title>
@@ -18,8 +20,24 @@
            <a class="nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
            <a class="nav-item" href="iletisim.html">İletişim</a>
        </nav>
-        <a class="menu"><img alt="Menu" src="resources/img/menu-white.png"></a>
+
+        <input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()">
+        <label for="toggle" id="toggle-label">
+            <div class="dropdown-toggle">
+                <span class="bar bar1"></span>
+                <span class="bar bar2"></span>
+                <span class="bar bar3"></span>
+                <span class="bar bar4"></span>
+            </div>
+        </label>
    </header>
+    <nav class="dropdown hidden dropdown-navbar">
+        <a class="dropdown-nav-item" href="index.html">Ana sayfa</a>
+        <a class="dropdown-nav-item" href="hakkimizda.html">Hakkımızda</a>
+        <a class="dropdown-nav-item" href="#brands">Markalar</a>
+        <a class="dropdown-nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
+        <a class="dropdown-nav-item" href="iletisim.html">İletişim</a>
+    </nav>
    <div id="container">
        <div id="content">
            <div class="showcase content-spacing">
@@ -29,17 +47,17 @@
                <div class="table-item square">
                    <img src="resources/img/ugurgaleri-utek.png">
                    <div class="vertical-separator"></div>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequuntur debitis deleniti dolore dolorum eligendi expedita harum impedit inventore itaque iusto neque odio odit quia recusandae, repudiandae saepe voluptas voluptates. Accusantium atque cum, debitis, delectus dignissimos ea error fuga fugit labore maiores nam nulla numquam soluta, suscipit vel veritatis voluptatibus!</p>
                </div>
                <div class="table-item reverse">
                    <img src="resources/img/UKT/UKT.png">
                    <div class="vertical-separator"></div>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aut, consectetur consequuntur culpa dolorum ducimus eaque eligendi enim eveniet fugiat illum laborum maiores mollitia obcaecati odio perspiciatis, quae tempora! Ex nemo nulla similique sint!</p>
                </div>
                <div class="table-item">
-                    <img src="resources/img/ugurgaleri-utek.png">
+                    <img src="resources/img/galericilerden.com/galericilerden.jpg">
                    <div class="vertical-separator"></div>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, dolor dolorem earum enim est et libero minima ratione, recusandae repellat temporibus tenetur totam unde voluptatem voluptatum? Asperiores atque consectetur distinctio eum fugit nisi non officiis, praesentium recusandae tempora veniam voluptate.</p>
                </div>
            </div>
            <div id="social" class="social content-spacing">
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -30,6 +30,14 @@ html, body {
  padding-bottom: 0;
 }

+.hidden {
+  display: none;
+}
+
+.flex {
+  display: flex;
+}
+
 #header {
  // Layout, details and children is set in partials/header.scss
  height: 10vh;
@@ -39,6 +47,27 @@ html, body {
  }
 }

+.dropdown {
+  position: fixed;
+  z-index: 2;
+  background-color: #706fff;
+  width: 100vw;
+  height: 90vh;
+  animation: slide-in-right 550ms;
+  flex-direction: column;
+  align-items: center;
+
+  .dropdown-nav-item {
+    color: white;
+    font: 600 28px "Montserrat", sans-serif;
+    text-decoration: none;
+  }
+}
+
+.dropdown_close_animation {
+  animation: 550ms slide-in-left;
+}
+
 #container {
  height: 90vh;
  display: grid;
--- a/resources/css/partials/header.scss
+++ b/resources/css/partials/header.scss
@@ -1,5 +1,17 @@
@use "../variables.scss";
@use "../mixins.scss";
+@use "sass:math";
+
+$dropdown-toggle_l_width_no_unit: 36;
+$dropdown-toggle_s_width_no_unit: 28;
+
+$dropdown-toggle_l_width: $dropdown-toggle_l_width_no_unit * 1px;
+$dropdown-toggle_l_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_l_width_no_unit, 2))) * 1px;
+$dropdown-toggle_l_second_bar: math.div($dropdown-toggle_l_width - 4, 2);
+$dropdown-toggle_s_width: $dropdown-toggle_s_width_no_unit * 1px;
+$dropdown-toggle_s_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_s_width_no_unit, 2))) * 1px;
+$dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
+

 #header {
  // Height is set in main.scss
@@ -47,23 +59,100 @@
    }
  }

-  .menu {
+  #toggle {
    display: none;
-    filter: invert(1);
-    height: 56px;
-    width: auto;
+  }

-    img {
-      height: 56px;
-      width: auto;
+  .dropdown-toggle {
+    margin: 0 auto 0;
+    width: $dropdown-toggle_l_width;
+    height: $dropdown-toggle_l_width;
+    position: relative;
+
+    .bar {
+      padding: 0;
+      width: $dropdown-toggle_l_width;
+      height: 4px;
+      background-color: variables.$clr_brand;
+      display: block;
+      border-radius: 4px;
+      transition: all 0.4s ease-in-out;
+      position: absolute;
+    }
+
+    .bar1 {
+      transform-origin: 5%;
+    }
+
+    .bar4 {
+      transform-origin: 5%;
    }

    @include mixins.header_overflow2 {
-      img {
-        height: 36px;
+      width: $dropdown-toggle_s_width;
+      height: $dropdown-toggle_s_width;
+
+      .bar {
+        width: $dropdown-toggle_s_width;
      }
-      height: 36px;
    }
+  }
+
+  .bar1 {
+    top: 0;
+  }
+
+  .bar2,
+  .bar3 {
+    top: $dropdown-toggle_l_second_bar;
+
+    @include mixins.header_overflow2 {
+      top: $dropdown-toggle_s_second_bar;
+    }
+  }
+
+  .bar3 {
+    right: 0;
+  }
+
+  .bar4 {
+    bottom: 0;
+  }
+
+  .toggle:checked + label > .dropdown-toggle > .bar1{
+    transform: rotate(45deg);
+    height: 3px;
+    width: $dropdown-toggle_l_cross_width;
+
+    @include mixins.header_overflow2 {
+      width: $dropdown-toggle_s_cross_width;
+    }
+  }
+
+  .toggle:checked + label > .dropdown-toggle > .bar3{
+    transform: rotate(45deg);
+    height: 3px;
+    background-color: transparent;
+  }
+
+  .toggle:checked + label > .dropdown-toggle > .bar2{
+    transform: rotate(-45deg);
+    height: 3px;
+    background-color: transparent;
+  }
+
+  .toggle:checked + label > .dropdown-toggle > .bar4{
+    transform: rotate(-45deg);
+    height: 3px;
+    width: $dropdown-toggle_l_cross_width;
+
+    @include mixins.header_overflow2 {
+      width: $dropdown-toggle_s_cross_width;
+    }
+  }
+
+  #toggle-label {
+    display: none;

    @include mixins.header_overflow {
      display: block;
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -67,7 +67,7 @@ $social-button_inner_margin: 10px;
    }

    @include mixins.mx_index_brands_fix2 {
-      margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
+      margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
    }
  }

@@ -86,7 +86,7 @@ $social-button_inner_margin: 10px;
      }

      @include mixins.mx_index_brands_fix2 {
-        margin-left: math.div(variables.$px_horizontalPadding2, 10);
+        margin-left: math.div(variables.$px_horizontalPadding3, 10);
      }
    }

@@ -103,7 +103,7 @@ $social-button_inner_margin: 10px;
      }

      @include mixins.mx_index_brands_fix2 {
-        margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
+        margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
      }
    }
  }
--- a/resources/scripts/main.js
+++ b/resources/scripts/main.js
@@ -0,0 +1,13 @@
+function toggleDropdown() {
+    let target = document.getElementsByClassName('dropdown')[0];
+    if (target.classList.contains('hidden')) {
+        target.classList.remove('hidden');
+        target.classList.add('flex');
+        //document.getElementById('container').style.display = 'none';
+    }
+    else {
+        target.classList.add('dropdown_close_animation');
+        target.classList.add('hidden');
+        target.classList.remove('flex');
+    }
+}
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -58,7 +58,7 @@
 }
@media screen and (max-width: 850px) {
  .table .vertical-separator {
-    margin-right: 90px;
+    margin-right: 18px;
  }
 }
 .table .reverse {
@@ -75,7 +75,7 @@
 }
@media screen and (max-width: 850px) {
  .table .reverse img {
-    margin-left: 10px;
+    margin-left: 2px;
  }
 }
 .table .reverse p {
@@ -92,7 +92,7 @@
 }
@media screen and (max-width: 850px) {
  .table .reverse .vertical-separator {
-    margin-left: 90px;
+    margin-left: 18px;
  }
 }
 .table .square img {
@@ -198,26 +198,94 @@
    display: none;
  }
 }
-#header .menu {
+#header #toggle {
  display: none;
-  filter: invert(1);
-  height: 56px;
-  width: auto;
 }
-#header .menu img {
-  height: 56px;
-  width: auto;
+#header .dropdown-toggle {
+  margin: 0 auto 0;
+  width: 36px;
+  height: 36px;
+  position: relative;
+}
+#header .dropdown-toggle .bar {
+  padding: 0;
+  width: 36px;
+  height: 4px;
+  background-color: #1d60b5;
+  display: block;
+  border-radius: 4px;
+  transition: all 0.4s ease-in-out;
+  position: absolute;
+}
+#header .dropdown-toggle .bar1 {
+  transform-origin: 5%;
+}
+#header .dropdown-toggle .bar4 {
+  transform-origin: 5%;
 }
@media screen and (max-width: 850px) {
-  #header .menu {
-    height: 36px;
+  #header .dropdown-toggle {
+    width: 28px;
+    height: 28px;
  }
-  #header .menu img {
-    height: 36px;
+  #header .dropdown-toggle .bar {
+    width: 28px;
  }
 }
+#header .bar1 {
+  top: 0;
+}
+#header .bar2,
+#header .bar3 {
+  top: 16px;
+}
+@media screen and (max-width: 850px) {
+  #header .bar2,
+#header .bar3 {
+    top: 12px;
+  }
+}
+#header .bar3 {
+  right: 0;
+}
+#header .bar4 {
+  bottom: 0;
+}
+#header .toggle:checked + label > .dropdown-toggle > .bar1 {
+  transform: rotate(45deg);
+  height: 3px;
+  width: 50px;
+}
+@media screen and (max-width: 850px) {
+  #header .toggle:checked + label > .dropdown-toggle > .bar1 {
+    width: 39px;
+  }
+}
+#header .toggle:checked + label > .dropdown-toggle > .bar3 {
+  transform: rotate(45deg);
+  height: 3px;
+  background-color: transparent;
+}
+#header .toggle:checked + label > .dropdown-toggle > .bar2 {
+  transform: rotate(-45deg);
+  height: 3px;
+  background-color: transparent;
+}
+#header .toggle:checked + label > .dropdown-toggle > .bar4 {
+  transform: rotate(-45deg);
+  height: 3px;
+  width: 50px;
+}
+@media screen and (max-width: 850px) {
+  #header .toggle:checked + label > .dropdown-toggle > .bar4 {
+    width: 39px;
+  }
+}
+#header #toggle-label {
+  display: none;
+}
@media screen and (max-width: 1200px) {
-  #header .menu {
+  #header #toggle-label {
    display: block;
  }
 }
@@ -302,6 +370,14 @@ html, body {
  padding-bottom: 0;
 }

+.hidden {
+  display: none;
+}
+
+.flex {
+  display: flex;
+}
+
 #header {
  height: 10vh;
 }
@@ -311,6 +387,26 @@ html, body {
  }
 }

+.dropdown {
+  position: fixed;
+  z-index: 2;
+  background-color: #706fff;
+  width: 100vw;
+  height: 90vh;
+  animation: slide-in-right 550ms;
+  flex-direction: column;
+  align-items: center;
+}
+.dropdown .dropdown-nav-item {
+  color: white;
+  font: 600 28px "Montserrat", sans-serif;
+  text-decoration: none;
+}
+
+.dropdown_close_animation {
+  animation: 550ms slide-in-left;
+}
+
 #container {
  height: 90vh;
  display: grid;