From f67d2d187e2b76bb9d0948bab27f02cc8991a62d Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Fri, 24 Jan 2025 07:03:06 +0300
Subject: [PATCH] feat: add add showing cart

---
 src/App.vue                   | 5 ++++-
 src/components/Drawer.vue     | 7 +++++--
 src/components/DrawerHead.vue | 8 +++++++-
 src/components/Header.vue     | 8 +++++++-
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 381bad5..8bede03 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,9 +45,12 @@ import { onMounted, provide, reactive, ref, watch } from 'vue'
       console.log('Error', e)
     }
   }
+
+  provide('openDrawer', () => showDrawer.value = true)
+  provide('closeDrawer', () => showDrawer.value = false)
 </script>
 <template>
-  <Drawer v-if="showDrawer"/>
+  <Drawer v-if="showDrawer" />
 
   <div
     class="mt-14 w-4/5 mx-auto bg-white rounded-xl shadow-xl"
diff --git a/src/components/Drawer.vue b/src/components/Drawer.vue
index 5163902..ded6f66 100644
--- a/src/components/Drawer.vue
+++ b/src/components/Drawer.vue
@@ -1,13 +1,16 @@
 <script setup>
   import DrawerHead from './DrawerHead.vue'
   import CartItemList from '@/components/CartItemList.vue'
+  import { inject } from 'vue'
+
+  const closeDrawer = inject('closeDrawer')
 </script>
 
 <template>
-  <div class="fixed top-0 left-0 h-full w-full bg-black z-10 opacity-75">
+  <div @click="closeDrawer" class="fixed top-0 left-0 h-full w-full bg-black z-10 opacity-75">
   </div>
 
-  <div class="bg-white w-96 h-full fixed top-0 right-0 z-20 p-8">
+  <div @click.stop class="bg-white w-96 h-full fixed top-0 right-0 z-20 p-8">
     <DrawerHead/>
 
     <CartItemList />
diff --git a/src/components/DrawerHead.vue b/src/components/DrawerHead.vue
index ff788a6..79f8b37 100644
--- a/src/components/DrawerHead.vue
+++ b/src/components/DrawerHead.vue
@@ -1,6 +1,12 @@
+<script setup>
+  import { inject } from 'vue'
+
+  const closeDrawer = inject('closeDrawer')
+</script>
+
 <template>
   <div class="flex items-center gap-5 mb-5">
-    <svg class="opacity-30 cursor-pointer rotate-180 transition hover:translate-x-1 hover:opacity-100" width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg @click="closeDrawer" class="opacity-30 cursor-pointer rotate-180 transition hover:translate-x-1 hover:opacity-100" width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M1 7H14.7143" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       <path d="M8.71436 1L14.7144 7L8.71436 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 9dd07f6..a1009ce 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,3 +1,9 @@
+<script setup>
+  import { inject } from 'vue'
+
+  const openDrawer = inject('openDrawer')
+</script>
+
 <template>
   <header
     class="flex justify-between border-b border-slate-100 px-11 py-10"
@@ -16,7 +22,7 @@
     </div>
 
     <ul class="flex items-center gap-8">
-      <li class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
+      <li @click="openDrawer" class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
         <img src="/cart.svg" alt="Cart">
         <b>
           1 205 руб.