@@ -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'
115118import { clickOutsideOptions } from ' ../../mixins/index.js'
116119import { getTrapStack } from ' ../../utils/focusTrap.js'
117120
121+ import NcButton from ' ../NcButton/index.js'
122+
118123export 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