education/youtube-archakov-vue-sneakers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add add showing cart

Browse Source
This commit is contained in:
Sergey Krylov 2025-01-24 07:03:06 +03:00
parent 25d1fa25dd
commit f67d2d187e
4 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@ -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"

7
src/components/Drawer.vue
View File

@ -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 />

8
src/components/DrawerHead.vue
View File

@ -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>

8
src/components/Header.vue
View File

@ -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 руб.