fix: app-navigation-toggle remains on screen on small viewports

Signed-off-by: Eduardo Morales <[email protected]>

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 only screen and (max-width: $breakpoint-small-mobile) {
+	// Positions the navigation toggle button on the smallers screens to still be visible
+	button.app-navigation-toggle {
+		right: -6px !important;
+	}
+}
 </style>