2018-12-06 18:45:40 +00:00
< template >
< div class = "layout-topbar" >
2018-12-26 09:36:00 +00:00
< a class = "menu-button" @click ="$emit('menubutton-click')" >
< i class = "pi pi-bars" > < / i >
< / a >
2021-04-09 13:22:52 +00:00
< router -link to = "/" class = "logo" >
< img alt = "logo" src = "./assets/images/primevue-logo.png" >
< / r o u t e r - l i n k >
2020-07-01 19:35:12 +00:00
< div class = "app-theme" v -tooltip .bottom = " theme " >
< img : src = "'demo/images/themes/' + logoMap[theme]" / >
< / div >
2020-01-08 08:06:24 +00:00
< ul ref = "topbarMenu" class = "topbar-menu" >
2018-12-06 18:45:40 +00:00
< li > < router -link to = "/setup" > Get Started < / r o u t e r - l i n k > < / l i >
2019-12-11 09:35:13 +00:00
< li class = "topbar-submenu" >
2021-02-03 12:14:50 +00:00
< a tabindex = "0" @ click = "toggleMenu($event, 0)" >
< span v -badge .danger > Themes < / span >
< / a >
2020-06-27 14:31:52 +00:00
< transition name = "p-connected-overlay" @enter ="onMenuEnter" >
2020-01-08 08:06:24 +00:00
< ul v-show ="activeMenuIndex === 0" >
2019-05-21 12:54:05 +00:00
< li class = "topbar-submenu-header" > THEMING < / li >
2020-01-08 08:06:24 +00:00
< li > < router -link to = "/theming" > < i class = "pi pi-fw pi-file" / > < span > Guide < / span > < / r o u t e r - l i n k > < / l i >
2019-12-09 11:48:49 +00:00
< li > < a href = "https://www.primefaces.org/designer/primevue" > < i class = "pi pi-fw pi-palette" / > < span > Designer < / span > < / a > < / li >
2020-07-12 20:21:17 +00:00
< li > < a href = "https://www.primefaces.org/designer-vue" > < i class = "pi pi-fw pi-desktop" / > < span > Visual Editor < / span > < / a > < / li >
2020-01-08 08:06:24 +00:00
< li > < router -link to = "/icons" > < i class = "pi pi-fw pi-info-circle" / > < span > Icons < / span > < / r o u t e r - l i n k > < / l i >
2020-09-24 15:10:41 +00:00
< li > < a href = "https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library" > < i class = "pi pi-fw pi-pencil" / > < span > Figma UI Kit < / span > < / a > < / li >
2020-06-26 13:37:03 +00:00
< li class = "topbar-submenu-header" > BOOTSTRAP < / li >
2020-06-26 16:05:42 +00:00
< li > < a @ click = "changeTheme($event, 'bootstrap4-light-blue')" > < img src = "demo/images/themes/bootstrap4-light-blue.svg" alt = "Blue Light" / > < span > Blue Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'bootstrap4-light-purple')" > < img src = "demo/images/themes/bootstrap4-light-purple.svg" alt = "Purple Light" / > < span > Purple Light < / span > < / a > < / li >
2020-07-23 08:31:34 +00:00
< li > < a @ click = "changeTheme($event, 'bootstrap4-dark-blue', true)" > < img src = "demo/images/themes/bootstrap4-dark-blue.svg" alt = "Blue Dark" / > < span > Blue Dark < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'bootstrap4-dark-purple', true)" > < img src = "demo/images/themes/bootstrap4-dark-purple.svg" alt = "Purple Dark" / > < span > Purple Dark < / span > < / a > < / li >
2020-06-26 15:58:49 +00:00
2020-06-26 13:37:03 +00:00
< li class = "topbar-submenu-header" > MATERIAL DESIGN < / li >
2020-06-26 16:05:42 +00:00
< li > < a @ click = "changeTheme($event, 'md-light-indigo')" > < img src = "demo/images/themes/md-light-indigo.svg" alt = "Indigo Light" / > < span > Indigo Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'md-light-deeppurple')" > < img src = "demo/images/themes/md-light-deeppurple.svg" alt = "Deep Purple Light" / > < span > Deep Purple Light < / span > < / a > < / li >
2020-07-23 08:31:34 +00:00
< li > < a @ click = "changeTheme($event, 'md-dark-indigo', true)" > < img src = "demo/images/themes/md-dark-indigo.svg" alt = "Indigo Dark" / > < span > Indigo Dark < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'md-dark-deeppurple', true)" > < img src = "demo/images/themes/md-dark-deeppurple.svg" alt = "Deep Purple Dark" / > < span > Deep Purple Dark < / span > < / a > < / li >
2020-06-26 13:37:03 +00:00
< li class = "topbar-submenu-header" > MATERIAL DESIGN COMPACT < / li >
2020-06-26 16:05:42 +00:00
< li > < a @ click = "changeTheme($event, 'mdc-light-indigo')" > < img src = "demo/images/themes/md-light-indigo.svg" alt = "Indigo Light" / > < span > Indigo Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'mdc-light-deeppurple')" > < img src = "demo/images/themes/md-light-deeppurple.svg" alt = "Deep Purple Light" / > < span > Deep Purple Light < / span > < / a > < / li >
2020-07-23 08:31:34 +00:00
< li > < a @ click = "changeTheme($event, 'mdc-dark-indigo', true)" > < img src = "demo/images/themes/md-dark-indigo.svg" alt = "Indigo Dark" / > < span > Indigo Dark < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'mdc-dark-deeppurple', true)" > < img src = "demo/images/themes/md-dark-deeppurple.svg" alt = "Deep Purple Dark" / > < span > Deep Purple Dark < / span > < / a > < / li >
2020-06-26 15:58:49 +00:00
2021-09-06 08:54:28 +00:00
< li class = "topbar-submenu-header" > TAILWIND < / li >
< li > < a @ click = "changeTheme($event, 'tailwind-light')" > < img src = "demo/images/themes/tailwind-light.png" alt = "Tailwind Light" / > < span > Tailwind Light < / span > < / a > < / li >
2020-10-10 10:20:25 +00:00
< li class = "topbar-submenu-header" > FLUENT UI < / li >
< li > < a @ click = "changeTheme($event, 'fluent-light')" > < img src = "demo/images/themes/fluent-light.png" alt = "Fluent Light" / > < span > Fluent Light < / span > < / a > < / li >
2022-01-13 11:03:59 +00:00
< li class = "topbar-submenu-header flex align-items-center" > PRIMEONE 2022 < Tag class = "ml-3" value = "NEW" rounded severity = "success" > < / Tag > < / li >
2021-11-15 09:07:43 +00:00
< li > < a @ click = "changeTheme($event, 'lara-light-indigo')" > < img src = "demo/images/themes/lara-light-indigo.png" alt = "Lara Light Indigo" / > < span > Lara Light Indigo < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'lara-light-blue')" > < img src = "demo/images/themes/lara-light-blue.png" alt = "Lara Light Blue" / > < span > Lara Light Blue < / span > < / a > < / li >
2021-11-16 07:06:27 +00:00
< li > < a @ click = "changeTheme($event, 'lara-light-purple')" > < img src = "demo/images/themes/lara-light-purple.png" alt = "Lara Light Purple" / > < span > Lara Light Purple < / span > < / a > < / li >
2021-11-15 09:07:43 +00:00
< li > < a @ click = "changeTheme($event, 'lara-light-teal')" > < img src = "demo/images/themes/lara-light-teal.png" alt = "Lara Light Teal" / > < span > Lara Light Teal < / span > < / a > < / li >
2021-11-16 07:06:27 +00:00
< li > < a @ click = "changeTheme($event, 'lara-dark-blue')" > < img src = "demo/images/themes/lara-dark-blue.png" alt = "Lara Dark Blue" / > < span > Lara Dark Blue < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'lara-dark-indigo')" > < img src = "demo/images/themes/lara-dark-indigo.png" alt = "Lara Dark Indigo" / > < span > Lara Dark Indigo < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'lara-dark-purple')" > < img src = "demo/images/themes/lara-dark-purple.png" alt = "Lara Dark Purple" / > < span > Lara Dark Purple < / span > < / a > < / li >
2021-11-15 09:07:43 +00:00
< li > < a @ click = "changeTheme($event, 'lara-dark-teal')" > < img src = "demo/images/themes/lara-dark-teal.png" alt = "Lara Dark Teal" / > < span > Lara Dark Teal < / span > < / a > < / li >
2021-11-15 07:55:18 +00:00
< li class = "topbar-submenu-header" > PRIMEONE 2021 < / li >
2020-06-26 16:05:42 +00:00
< li > < a @ click = "changeTheme($event, 'saga-blue')" > < img src = "demo/images/themes/saga-blue.png" alt = "Saga Blue" / > < span > Saga Blue < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'saga-green')" > < img src = "demo/images/themes/saga-green.png" alt = "Saga Green" / > < span > Saga Green < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'saga-orange')" > < img src = "demo/images/themes/saga-orange.png" alt = "Saga Orange" / > < span > Saga Orange < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'saga-purple')" > < img src = "demo/images/themes/saga-purple.png" alt = "Saga Purple" / > < span > Saga Purple < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'vela-blue', true)" > < img src = "demo/images/themes/vela-blue.png" alt = "Vela Blue" / > < span > Vela Blue < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'vela-green', true)" > < img src = "demo/images/themes/vela-green.png" alt = "Vela Green" / > < span > Vela Green < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'vela-orange', true)" > < img src = "demo/images/themes/vela-orange.png" alt = "Vela Orange" / > < span > Vela Orange < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'vela-purple', true)" > < img src = "demo/images/themes/vela-purple.png" alt = "Vela Purple" / > < span > Vela Purple < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'arya-blue', true)" > < img src = "demo/images/themes/arya-blue.png" alt = "Arya Blue" / > < span > Arya Blue < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'arya-green', true)" > < img src = "demo/images/themes/arya-green.png" alt = "Arya Green" / > < span > Arya Green < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'arya-orange', true)" > < img src = "demo/images/themes/arya-orange.png" alt = "Arya Orange" / > < span > Arya Orange < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'arya-purple', true)" > < img src = "demo/images/themes/arya-purple.png" alt = "Arya Purple" / > < span > Arya Purple < / span > < / a > < / li >
2020-06-26 13:37:03 +00:00
2020-10-10 10:20:25 +00:00
< li class = "topbar-submenu-header" > PREMIUM < / li >
< li > < a @ click = "changeTheme($event, 'soho-light')" > < img src = "demo/images/themes/soho-light.png" alt = "Soho Light" / > < span > Soho Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'soho-dark', true)" > < img src = "demo/images/themes/soho-dark.png" alt = "Soho Dark" / > < span > Soho Dark < / span > < / a > < / li >
2021-01-13 09:24:57 +00:00
< li > < a @ click = "changeTheme($event, 'viva-light')" > < img src = "demo/images/themes/viva-light.svg" alt = "Viva Light" / > < span > Viva Light < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'viva-dark', true)" > < img src = "demo/images/themes/viva-dark.svg" alt = "Viva Dark" / > < span > Viva Dark < / span > < / a > < / li >
2020-11-26 08:53:02 +00:00
< li > < a @ click = "changeTheme($event, 'mira')" > < img src = "demo/images/themes/mira.jpg" alt = "Mira" / > < span > Mira < / span > < / a > < / li >
< li > < a @ click = "changeTheme($event, 'nano')" > < img src = "demo/images/themes/nano.jpg" alt = "Nano" / > < span > Nano < / span > < / a > < / li >
2019-05-21 12:54:05 +00:00
< / ul >
< / transition >
2018-12-06 18:45:40 +00:00
< / li >
2019-12-11 09:35:13 +00:00
< li class = "topbar-submenu" >
2020-06-18 09:17:14 +00:00
< a tabindex = "0" @ click = "toggleMenu($event, 1)" > Templates < / a >
2020-06-27 14:31:52 +00:00
< transition name = "p-connected-overlay" @enter ="onMenuEnter" >
2020-01-08 08:06:24 +00:00
< ul v-show ="activeMenuIndex === 1" >
2019-12-10 08:05:47 +00:00
< li class = "topbar-submenu-header" > FREE ADMIN TEMPLATE < / li >
2021-09-13 16:05:18 +00:00
< li > < a href = "https://www.primefaces.org/sakai-vue" > < img src = "./assets/images/layouts/themeswitcher-sakai.svg" alt = "Sakai" / > < span > Sakai < / span > < / a > < / li >
2019-12-10 08:05:47 +00:00
< li class = "topbar-submenu-header" > PREMIUM ADMIN TEMPLATES < / li >
2021-09-21 07:05:08 +00:00
< li > < a href = "https://www.primefaces.org/layouts/atlantis-vue" > < img src = "./assets/images/layouts/themeswitcher-atlantis.svg" alt = "Atlantis" / > < span > Atlantis < / span > < / a > < / li >
2021-05-06 13:12:18 +00:00
< li > < a href = "https://www.primefaces.org/layouts/freya-vue" > < img src = "./assets/images/layouts/themeswitcher-freya.png" alt = "Freya" / > < span > Freya < / span > < / a > < / li >
2020-10-22 10:45:59 +00:00
< li > < a href = "https://www.primefaces.org/layouts/diamond-vue" > < img src = "./assets/images/layouts/themeswitcher-diamond.png" alt = "Diamond" / > < span > Diamond < / span > < / a > < / li >
2020-03-23 12:05:02 +00:00
< li > < a href = "https://www.primefaces.org/layouts/sapphire-vue" > < img src = "./assets/images/layouts/themeswitcher-sapphire.png" alt = "Sapphire" / > < span > Sapphire < / span > < span class = "theme-badge material" > material < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/serenity-vue" > < img src = "./assets/images/layouts/themeswitcher-serenity.png" alt = "Serenity" / > < span > Serenity < / span > < span class = "theme-badge material" > material < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/ultima-vue" > < img src = "./assets/images/layouts/themeswitcher-ultima.png" alt = "Ultima" / > < span > Ultima < / span > < span class = "theme-badge material" > material < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/avalon-vue" > < img src = "./assets/images/layouts/themeswitcher-avalon.png" alt = "Avalon" / > < span > Avalon < / span > < span class = "theme-badge bootstrap" > bootstrap < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/babylon-vue" > < img src = "./assets/images/layouts/themeswitcher-babylon.png" alt = "Babylon" / > < span > Babylon < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/apollo-vue" > < img src = "./assets/images/layouts/themeswitcher-apollo.png" alt = "Apollo" / > < span > Apollo < / span > < span class = "theme-badge darkmode" > dark mode < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/layouts/roma-vue" > < img src = "./assets/images/layouts/themeswitcher-roma.jpg" alt = "Roma" / > < span > Roma < / span > < / a > < / li >
2020-04-20 21:38:03 +00:00
< li > < a href = "https://www.primefaces.org/layouts/prestige-vue" > < img src = "./assets/images/layouts/themeswitcher-prestige.png" alt = "Prestige" / > < span > Prestige < / span > < / a > < / li >
2019-12-10 08:05:47 +00:00
< / ul >
< / transition >
< / li >
2019-12-11 09:35:13 +00:00
< li class = "topbar-submenu topbar-resources-submenu" >
2020-06-18 09:17:14 +00:00
< a tabindex = "0" @ click = "toggleMenu($event, 2)" > Resources < / a >
2020-06-27 14:31:52 +00:00
< transition name = "p-connected-overlay" @enter ="onMenuEnter" >
2020-01-08 08:06:24 +00:00
< ul v-show ="activeMenuIndex === 2" >
< li > < router -link to = "/support" > < span > Support < / span > < / r o u t e r - l i n k > < / l i >
2020-05-15 08:53:11 +00:00
< li > < a href = "https://forum.primefaces.org/viewforum.php?f=110" > < span > Forum < / span > < / a > < / li >
2020-12-24 14:37:30 +00:00
< li > < a href = "https://discord.gg/gzKFYnpmCY" target = "_blank" > < span > Discord Chat < / span > < / a > < / li >
2019-12-11 09:35:13 +00:00
< li > < a href = "https://github.com/primefaces/primevue" target = "_blank" > < span > Source Code < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/store" target = "_blank" > < span > PrimeStore < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/category/primevue/" target = "_blank" > < span > Blog < / span > < / a > < / li >
2021-02-25 13:47:27 +00:00
< li > < a href = "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw/featured" target = "_blank" > < span > PrimeTV < / span > < / a > < / li >
2019-12-11 09:35:13 +00:00
< li > < a href = "https://twitter.com/primevue?lang=en" target = "_blank" > < span > Twitter < / span > < / a > < / li >
2020-02-12 13:59:07 +00:00
< li > < a href = "https://www.primefaces.org/whouses" target = "_blank" > < span > Who Uses < / span > < / a > < / li >
< li > < a href = "https://www.primefaces.org/newsletter" target = "_blank" > < span > Newsletter < / span > < / a > < / li >
2021-11-08 13:19:50 +00:00
< li > < a href = "https://gear.primefaces.org" target = "_blank" > < span > Gear Store < / span > < / a > < / li >
2019-12-11 09:35:13 +00:00
< li > < a href = "https://www.primetek.com.tr" target = "_blank" > < span > About PrimeTek < / span > < / a > < / li >
< / ul >
< / transition >
< / li >
2018-12-06 18:45:40 +00:00
< / ul >
< / div >
2019-05-21 12:54:05 +00:00
< / template >
< script >
export default {
2020-01-08 08:06:24 +00:00
outsideClickListener : null ,
2019-05-21 12:54:05 +00:00
darkDemoStyle : null ,
2020-01-08 08:06:24 +00:00
watch : {
$route ( ) {
this . activeMenuIndex = null ;
}
} ,
2020-07-01 19:35:12 +00:00
props : {
theme : null
} ,
2019-05-21 12:54:05 +00:00
data ( ) {
return {
2020-07-01 19:35:12 +00:00
activeMenuIndex : null ,
logoMap : {
'bootstrap4-light-blue' : 'bootstrap4-light-blue.svg' ,
'bootstrap4-light-purple' : 'bootstrap4-light-purple.svg' ,
'bootstrap4-dark-blue' : 'bootstrap4-dark-blue.svg' ,
'bootstrap4-dark-purple' : 'bootstrap4-dark-purple.svg' ,
'md-light-indigo' : 'md-light-indigo.svg' ,
'md-light-deeppurple' : 'md-light-deeppurple.svg' ,
'md-dark-indigo' : 'md-dark-indigo.svg' ,
'md-dark-deeppurple' : 'md-dark-deeppurple.svg' ,
'mdc-light-indigo' : 'md-light-indigo.svg' ,
'mdc-light-deeppurple' : 'md-light-deeppurple.svg' ,
'mdc-dark-indigo' : 'md-dark-indigo.svg' ,
'mdc-dark-deeppurple' : 'md-dark-deeppurple.svg' ,
'saga-blue' : 'saga-blue.png' ,
'saga-green' : 'saga-green.png' ,
'saga-orange' : 'saga-orange.png' ,
'saga-purple' : 'saga-purple.png' ,
'vela-blue' : 'vela-blue.png' ,
'vela-green' : 'vela-green.png' ,
'vela-orange' : 'vela-orange.png' ,
'vela-purple' : 'vela-purple.png' ,
'arya-blue' : 'arya-blue.png' ,
'arya-green' : 'arya-green.png' ,
'arya-orange' : 'arya-orange.png' ,
'arya-purple' : 'arya-purple.png' ,
'nova' : 'nova.png' ,
'nova-alt' : 'nova-alt.png' ,
'nova-accent' : 'nova-accent.png' ,
'nova-vue' : 'nova-vue.png' ,
'luna-blue' : 'luna-blue.png' ,
'luna-green' : 'luna-green.png' ,
'luna-pink' : 'luna-pink.png' ,
'luna-amber' : 'luna-amber.png' ,
2020-10-10 10:20:25 +00:00
'rhea' : 'rhea.png' ,
'fluent-light' : 'fluent-light.png' ,
'soho-light' : 'soho-light.png' ,
2020-11-28 19:55:09 +00:00
'soho-dark' : 'soho-dark.png' ,
2021-01-13 09:24:57 +00:00
'viva-light' : 'viva-light.svg' ,
'viva-dark' : 'viva-dark.svg' ,
2020-11-28 19:55:09 +00:00
'mira' : 'mira.jpg' ,
'nano' : 'nano.jpg' ,
2021-09-06 09:17:44 +00:00
'tailwind-light' : 'tailwind-light.png' ,
2021-11-15 09:07:43 +00:00
'lara-dark-indigo' : 'lara-dark-indigo.png' ,
'lara-dark-purple' : 'lara-dark-purple.png' ,
'lara-light-indigo' : 'lara-light-indigo.png' ,
'lara-light-purple' : 'lara-light-purple.png' ,
'lara-dark-teal' : 'lara-dark-indigo.png' ,
'lara-dark-blue' : 'lara-dark-blue.png' ,
'lara-light-teal' : 'lara-light-teal.png' ,
'lara-light-blue' : 'lara-light-blue.png'
2020-07-01 19:35:12 +00:00
}
2019-05-21 12:54:05 +00:00
}
} ,
methods : {
2020-05-13 12:25:03 +00:00
changeTheme ( event , theme , dark ) {
this . $emit ( 'change-theme' , { theme : theme , dark : dark } ) ;
2020-05-09 19:23:23 +00:00
this . activeMenuIndex = null ;
2019-05-21 12:54:05 +00:00
event . preventDefault ( ) ;
} ,
2020-01-08 08:06:24 +00:00
toggleMenu ( event , index ) {
this . activeMenuIndex = ( this . activeMenuIndex === index ) ? null : index ;
2019-12-10 08:05:47 +00:00
event . preventDefault ( ) ;
} ,
2020-01-08 08:06:24 +00:00
onMenuEnter ( ) {
this . bindOutsideClickListener ( ) ;
2019-12-10 08:05:47 +00:00
} ,
2020-01-08 08:06:24 +00:00
bindOutsideClickListener ( ) {
if ( ! this . outsideClickListener ) {
this . outsideClickListener = ( event ) => {
if ( ( this . activeMenuIndex != null && this . isOutsideTopbarMenuClicked ( event ) ) ) {
this . activeMenuIndex = null ;
2020-06-18 09:17:14 +00:00
this . unbindOutsideClickListener ( ) ;
2019-05-21 12:54:05 +00:00
}
} ;
2020-01-08 08:06:24 +00:00
document . addEventListener ( 'click' , this . outsideClickListener ) ;
2019-05-21 12:54:05 +00:00
}
} ,
2020-01-08 08:06:24 +00:00
unbindOutsideClickListener ( ) {
if ( this . outsideClickListener ) {
document . removeEventListener ( 'click' , this . outsideClickListener ) ;
this . outsideClickListener = null ;
2019-05-21 12:54:05 +00:00
}
} ,
2020-01-08 08:07:46 +00:00
isOutsideTopbarMenuClicked ( event ) {
2020-01-08 08:06:24 +00:00
return ! ( this . $refs . topbarMenu . isSameNode ( event . target ) || this . $refs . topbarMenu . contains ( event . target ) ) ;
2019-05-21 15:42:06 +00:00
}
2019-05-21 12:54:05 +00:00
}
}
2019-12-20 14:22:50 +00:00
< / script >
