Skip to content

Commit 38f8ed9

Browse files
committed
fix(NcHeaderMenu): mouse in now pointer
Signed-off-by: Eduardo Morales <emoral435@gmail.com>
1 parent b570762 commit 38f8ed9

1 file changed

Lines changed: 19 additions & 15 deletions

File tree

src/components/NcHeaderMenu/NcHeaderMenu.vue

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -73,18 +73,21 @@ export default {
7373
class="header-menu"
7474
v-on="listeners">
7575
<!-- Trigger -->
76-
<button :id="isNav ? triggerId : null"
76+
<NcButton :id="isNav ? triggerId : null"
7777
ref="trigger"
78-
class="header-menu__trigger button-vue"
78+
type="tertiary-no-background"
79+
class="header-menu__trigger"
7980
:aria-label="ariaLabel"
8081
:aria-describedby="description ? descriptionId : null"
8182
:aria-controls="`header-menu-${id}`"
8283
:aria-expanded="opened.toString()"
8384
@click.prevent="toggleMenu">
84-
<!-- @slot Icon trigger slot. Make sure the svg path
85+
<template #icon>
86+
<!-- @slot Icon trigger slot. Make sure the svg path
8587
is at least 16px. Usually mdi icon works at 20px -->
86-
<slot name="trigger" />
87-
</button>
88+
<slot name="trigger" />
89+
</template>
90+
</NcButton>
8891

8992
<span v-if="description"
9093
:id="descriptionId"
@@ -115,9 +118,15 @@ import GenRandomId from '../../utils/GenRandomId.js'
115118
import { clickOutsideOptions } from '../../mixins/index.js'
116119
import { getTrapStack } from '../../utils/focusTrap.js'
117120
121+
import NcButton from '../NcButton/index.js'
122+
118123
export default {
119124
name: 'NcHeaderMenu',
120125
126+
components: {
127+
NcButton,
128+
},
129+
121130
directives: {
122131
ClickOutside,
123132
},
@@ -339,17 +348,9 @@ $externalMargin: 8px;
339348
height: var(--header-height);
340349
341350
&__trigger {
342-
display: flex;
343-
align-items: center;
344-
justify-content: center;
345351
width: var(--header-height);
346352
height: var(--header-height);
347-
margin: 0;
348-
padding: 0;
349-
cursor: pointer;
350353
opacity: .85;
351-
background-color: transparent;
352-
border: none;
353354
354355
// header is filled with primary or image background
355356
filter: none !important;
@@ -363,8 +364,11 @@ $externalMargin: 8px;
363364
opacity: 1;
364365
}
365366
366-
&__trigger:focus-visible {
367-
outline: none;
367+
:deep .button-vue {
368+
&:focus-visible {
369+
outline: none !important;
370+
box-shadow: none !important;
371+
}
368372
}
369373
370374
&__wrapper {

0 commit comments

Comments
 (0)