From 94071de5cd46a7df20b0bdbe887b659de816a412 Mon Sep 17 00:00:00 2001 From: Eduardo Morales Date: Fri, 26 Jan 2024 09:10:12 -0600 Subject: [PATCH] fix: app-navigation-toggle remains on screen on small viewports Signed-off-by: Eduardo Morales --- .../NcAppNavigationToggle.vue | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue index e9b8b0c370..ee427a02ac 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) }, @@ -87,4 +101,11 @@ export default { button.app-navigation-toggle { background-color: var(--color-main-background); } + +@media (max-width: 420px) { + // Positions the navigation toggle button on the smallers screens to still be visible + button.app-navigation-toggle { + right: -6px !important; + } +}