codecheck

1
<script setup lang="ts">
2
interface dropdownItem {
3
  name: String;
4
  to: String;
5
}
6

7
interface Props {
8
  items: dropdownItem[];
9
}
10

11
const props = defineProps<Props>();
12
const dropdown = ref();
13
const open = ref(false);
14

15
const handleOpen = () => {
16
  const closeListerner = (e: Event) => {
17
    if (!(e.target === dropdown.value || dropdown.value?.contains(e.target)))
18
      window.removeEventListener("click", closeListerner), (open.value = false);
19
  };
20
  window.addEventListener("click", closeListerner);
21
  open.value = !open.value;
22
};
23

24
const logout = async () => {
25
  await useFetch("/api/auth/logout", {
26
    method: "POST",
27
  });
28
  const user = useUser();
29
  user.value = null;
30
  // console.log(user.value, userAuth.value);
31
  await navigateTo("/login");
32
};
33
</script>
34

35
<template>
36
  <div
37
    ref="dropdown"
38
    @click="handleOpen()"
39
    class="nav__item_dropdown"
40
    :aria-expanded="open"
41
  >
42
    <button class="nav__btn">
43
      <span> <slot /> </span>
44

45
      <svg
46
        xmlns="http://www.w3.org/2000/svg"
47
        viewBox="0 0 20 20"
48
        fill="currentColor"
49
        class="nav__icon"
50
      >
51
        <path
52
          fill-rule="evenodd"
53
          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
54
          clip-rule="evenodd"
55
        />
56
      </svg>
57
    </button>
58

59
    <div class="dropdown">
60
      <NuxtLink
61
        v-for="item in props.items"
62
        :to="item.to"
63
        class="dropdown__item"
64
        >{{ item.name }}</NuxtLink
65
      >
66
      <button class="dropdown__item" @click="logout">Выйти</button>
67
    </div>
68
  </div>
69
</template>
70

71
<style scoped lang="scss">
72
.nav {
73
  &__btn {
74
    padding: 1rem 0;
75
    display: flex;
76
    align-items: center;
77
    position: relative;
78
    text-decoration: none;
79
    color: var(--color-text-link);
80
    // &:hover {
81
    //   color: var(--color-primary);
82
    // }
83

84
    // .dropdown & {
85
    //   padding: 1rem 2rem;
86
    //   min-width: 100%;
87
    // }
88
  }
89
  &__item_dropdown {
90
    font-size: 1rem;
91
    position: relative;
92
    cursor: pointer;
93
    &[aria-expanded="true"] .dropdown {
94
      display: flex;
95
      opacity: 1;
96
      visibility: visible;
97
    }
98
  }
99
  &__icon {
100
    width: 1.5rem;
101
    height: 1.5rem;
102
  }
103
}
104
.dropdown {
105
  position: absolute;
106
  background: white;
107
  // display: none;
108
  opacity: 0;
109
  visibility: hidden;
110
  flex-direction: column;
111
  // align-items: flex-start;
112
  top: 100%;
113
  right: 0;
114
  left: 0;
115
  min-width: fit-content;
116
  overflow: hidden;
117
  transition: all 0.3s ease 0s;
118
  &__item {
119
    white-space: nowrap;
120
    padding: 0.5rem;
121
    display: flex;
122
    align-items: center;
123
    position: relative;
124
    background: none;
125
    // font-size: 1rem;
126
    // font-weight: 600;
127
    text-decoration: none;
128
    color: var(--color-text-link);
129
    // width: 100%;
130
    &:hover {
131
      background: rgba(128, 128, 128, 0.057);
132
    }
133
  }
134
}
135
</style>
136