From fc2c346fe34a1aa85e535a9180514a58b2767aba Mon Sep 17 00:00:00 2001
From: hsangrento <hasan_sangrento@hotmail.com>
Date: Tue, 22 Jun 2021 03:40:53 +0300
Subject: [PATCH] chore: location created, location icon added

---
 src/assets/scss/_icons.scss               |  7 ++++
 src/components/Layout/Header.vue          |  7 +++-
 src/components/Layout/Header/Location.vue | 41 +++++++++++++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Layout/Header/Location.vue

diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index 03e5fd4..66c7f5f 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -55,6 +55,13 @@
       background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='26' stroke='%23484848' fill='none'%3E%3Cg stroke-linecap='round' stroke-linejoin='round' stroke-width='2' transform='translate(1 1)'%3E%3Crect width='21' height='16.5' x='.5' y='6.75' rx='1.5'/%3E%3Cpath d='M21.3 7.5l-2.4-5.859A1.5 1.5 0 0017.526.75H4.475a1.5 1.5 0 00-1.375.891L.7 7.5M11 6.75v-6m2.25 18h4.5'/%3E%3C/g%3E%3C/svg%3E");
       width: 22px;
     }
+    &-location {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23484848'%3E%3Cpath d='M12-.058c4.837 0 9.3 4.922 9.3 9.474a9.13 9.13 0 01-.23 1.986c-.55 2.443-1.997 4.96-4.205 7.754-.32.405-.844 1.03-1.392 1.674l-.3.352a285.365 285.365 0 01-1.88 2.178c-.307.373-.79.582-1.293.582-.503 0-.986-.209-1.293-.582.003.004-.928-1.063-1.88-2.178l-.3-.352a71.78 71.78 0 01-1.392-1.674c-2.208-2.794-3.655-5.311-4.204-7.754A9.072 9.072 0 012.7 9.416C2.7 4.864 7.163-.058 12-.058zm0 1.493c-3.972 0-7.8 4.221-7.8 7.98 0 .533.066 1.087.195 1.66.49 2.179 1.838 4.524 3.92 7.158.904 1.144 3.536 4.16 3.553 4.181.01.013.062.035.132.035s.122-.022.132-.035c.017-.02 2.65-3.037 3.554-4.18 2.081-2.635 3.43-4.98 3.92-7.158a7.634 7.634 0 00.194-1.66c0-3.76-3.828-7.981-7.8-7.981zm0 3.79c2.282 0 4.125 1.88 4.125 4.19 0 2.311-1.843 4.192-4.125 4.192s-4.125-1.88-4.125-4.191S9.718 5.224 12 5.224zm0 1.492c-1.445 0-2.625 1.204-2.625 2.699 0 1.494 1.18 2.698 2.625 2.698s2.625-1.204 2.625-2.698c0-1.495-1.18-2.699-2.625-2.699z' fill-rule='evenodd'/%3E%3C/svg%3E");
+      width: 22px;
+    }
+    &-arrow {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ff6000'%3E%3Cpath d='M5.99 8.5a.767.767 0 01-.576-.26l-3.27-3.71a.612.612 0 01.076-.864.617.617 0 01.848.054l2.86 3.244c.03.035.083.038.118.008l.007-.008 2.86-3.244a.616.616 0 01.943.79l-.019.022-3.27 3.708a.768.768 0 01-.576.261z' fill-rule='evenodd'/%3E%3C/svg%3E");
+    }
     &-cart {
       background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' stroke='%23484848' fill='none'%3E%3Cg stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M19.545 20.773H8.723c-.799 0-1.48-.576-1.614-1.363L4.232 2.501A1.637 1.637 0 002.62 1.14H1.545M17.5 23.227a.41.41 0 100 .818.41.41 0 000-.818m-8.182 0a.41.41 0 100 .818.41.41 0 000-.818'/%3E%3Cpath d='M6.506 15.864h13.168a3.273 3.273 0 003.175-2.479l1.582-6.327a.818.818 0 00-.795-1.017h-18.8'/%3E%3C/g%3E%3C/svg%3E");
       width: 22px;
diff --git a/src/components/Layout/Header.vue b/src/components/Layout/Header.vue
index 4b5314c..91693c9 100644
--- a/src/components/Layout/Header.vue
+++ b/src/components/Layout/Header.vue
@@ -10,6 +10,9 @@
       <!-- Search -->
       <Search class="flex-auto lg:flex-1 order-last lg:order-none"/>
 
+      <!-- Location -->
+      <Location class="ml-2 lg:ml-0 z-30"/>
+
       <!-- Actions -->
       <Actions class="hidden lg:flex"/>
 
@@ -33,6 +36,7 @@
   import Member from "@/components/Layout/Header/Member";
   import Actions from "@/components/Layout/Header/Actions";
   import Category from "@/components/Layout/Header/Category";
+  import Location from "@/components/Layout/Header/Location";
 
   export default {
     components: {
@@ -40,7 +44,8 @@
       Category,
       Search,
       Actions,
-      Member
+      Member,
+      Location
     },
     props: {
       bar: {
diff --git a/src/components/Layout/Header/Location.vue b/src/components/Layout/Header/Location.vue
new file mode 100644
index 0000000..7952a8e
--- /dev/null
+++ b/src/components/Layout/Header/Location.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="h-10 lg:h-12 flex items-center px-2 lg:px-4 rounded-full hover:bg-gray-100 transition-all cursor-pointer" v-on:click="toggleMenu">
+        <i class="icon icon-location w-6 h-6 mr-3"></i>
+        <div class="flex flex-col">
+            <div class="text-sm font-semibold">Konum</div>
+            <div class="text-xs font-normal text-orange-500 flex items-center capitalize">
+                <div class="locationChooseText">Konum Seç</div>
+                <div class="h-2 w-2 ml-2 bg-no-repeat bg-contain icon icon-arrow" v-if="menu.isOpen"></div>
+                <div class="h-2 w-2 ml-2 bg-no-repeat bg-contain icon icon-arrow transform rotate-180" v-else></div>
+                </div>
+            </div>
+        <div v-if="menu.isOpen">
+            <!-- location select menu -->
+        </div>
+    </div>
+</template>
+
+<script>
+    // export default {}
+    export default {
+        data() {
+            return {
+                menu: {
+                    isOpen: false
+                }
+            }
+        },
+        methods: {
+            toggleMenu() {
+                this.menu.isOpen = !this.menu.isOpen;
+                console.log(this.menu.isOpen);
+            },
+            closeMenu() {
+                this.menu.isOpen = false;
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+</style>
\ No newline at end of file