From cc41a2126369f5e783135885e8425d2ac08d4665 Mon Sep 17 00:00:00 2001 From: Eduardo Morales Date: Fri, 26 Jan 2024 09:10:12 -0600 Subject: [PATCH] enh: added comments on NcHeaderMenu for NcVue documentation Signed-off-by: Eduardo Morales --- .../NcAppNavigationToggle.vue | 14 ++++++++++++++ src/components/NcHeaderMenu/NcHeaderMenu.vue | 4 ++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue index e9b8b0c370..f11d148ab8 100644 --- a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue +++ b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue @@ -45,6 +45,11 @@ import { t } from '../../l10n.js' import MenuIcon from 'vue-material-design-icons/Menu.vue' import MenuOpenIcon from 'vue-material-design-icons/MenuOpen.vue' +/** + * The NcAppNavigationToggle component is used typically alongside another header navigation component. + * It emits the status of whether the button has been clicked or not. + * + */ export default { name: 'NcAppNavigationToggle', @@ -55,6 +60,11 @@ export default { }, props: { + /** + * Tracks whether the toggle has been clicked or not. + * If it has been clicked, switches between the different MenuIcons + * and emits a boolean indicating its opened status + */ open: { type: Boolean, required: true, @@ -69,6 +79,10 @@ export default { }, }, methods: { + /** + * Once the toggle has been clicked, emits the toggle status + * so parent components can gauge the status of the navigation button + */ toggleNavigation() { this.$emit('update:open', !this.open) }, diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue index 0be3c0432d..87fe40ab70 100644 --- a/src/components/NcHeaderMenu/NcHeaderMenu.vue +++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue @@ -347,8 +347,8 @@ $externalMargin: 8px; width: var(--header-height); height: var(--header-height); - #{&}__trigger { - width: var(--header-height) !important; + &__trigger { + width: var(--header-height); height: var(--header-height); opacity: .85;