fix(files): Move settings modal out of NcAppNavigation

Signed-off-by: Christopher Ng <chrng8@gmail.com>

Author: Pytal

apps/files/src/views/Navigation.vue

@@ -20,63 +20,67 @@
   -
   -->
 <template>
-	<NcAppNavigation data-cy-files-navigation
-		:aria-label="t('files', 'Files')">
-		<template #list>
-			<NcAppNavigationItem v-for="view in parentViews"
-				:key="view.id"
-				:allow-collapse="true"
-				:data-cy-files-navigation-item="view.id"
-				:exact="useExactRouteMatching(view)"
-				:icon="view.iconClass"
-				:name="view.name"
-				:open="isExpanded(view)"
-				:pinned="view.sticky"
-				:to="generateToNavigation(view)"
-				@update:open="onToggleExpand(view)">
-				<!-- Sanitized icon as svg if provided -->
-				<NcIconSvgWrapper v-if="view.icon" slot="icon" :svg="view.icon" />
-
-				<!-- Child views if any -->
-				<NcAppNavigationItem v-for="child in childViews[view.id]"
-					:key="child.id"
-					:data-cy-files-navigation-item="child.id"
-					:exact-path="true"
-					:icon="child.iconClass"
-					:name="child.name"
-					:to="generateToNavigation(child)">
+	<Fragment>
+		<NcAppNavigation data-cy-files-navigation
+			:aria-label="t('files', 'Files')">
+			<template #list>
+				<NcAppNavigationItem v-for="view in parentViews"
+					:key="view.id"
+					:allow-collapse="true"
+					:data-cy-files-navigation-item="view.id"
+					:exact="useExactRouteMatching(view)"
+					:icon="view.iconClass"
+					:name="view.name"
+					:open="isExpanded(view)"
+					:pinned="view.sticky"
+					:to="generateToNavigation(view)"
+					@update:open="onToggleExpand(view)">
 					<!-- Sanitized icon as svg if provided -->
-					<NcIconSvgWrapper v-if="child.icon" slot="icon" :svg="child.icon" />
-				</NcAppNavigationItem>
-			</NcAppNavigationItem>
-		</template>
-
-		<!-- Non-scrollable navigation bottom elements -->
-		<template #footer>
-			<ul class="app-navigation-entry__settings">
-				<!-- User storage usage statistics -->
-				<NavigationQuota />
-
-				<!-- Files settings modal toggle-->
-				<NcAppNavigationItem :aria-label="t('files', 'Open the files app settings')"
-					:name="t('files', 'Files settings')"
-					data-cy-files-navigation-settings-button
-					@click.prevent.stop="openSettings">
-					<Cog slot="icon" :size="20" />
+					<NcIconSvgWrapper v-if="view.icon" slot="icon" :svg="view.icon" />
+
+					<!-- Child views if any -->
+					<NcAppNavigationItem v-for="child in childViews[view.id]"
+						:key="child.id"
+						:data-cy-files-navigation-item="child.id"
+						:exact-path="true"
+						:icon="child.iconClass"
+						:name="child.name"
+						:to="generateToNavigation(child)">
+						<!-- Sanitized icon as svg if provided -->
+						<NcIconSvgWrapper v-if="child.icon" slot="icon" :svg="child.icon" />
+					</NcAppNavigationItem>
 				</NcAppNavigationItem>
-			</ul>
-		</template>
+			</template>
+
+			<!-- Non-scrollable navigation bottom elements -->
+			<template #footer>
+				<ul class="app-navigation-entry__settings">
+					<!-- User storage usage statistics -->
+					<NavigationQuota />
+
+					<!-- Files settings modal toggle-->
+					<NcAppNavigationItem :aria-label="t('files', 'Open the files app settings')"
+						:name="t('files', 'Files settings')"
+						data-cy-files-navigation-settings-button
+						@click.prevent.stop="openSettings">
+						<Cog slot="icon" :size="20" />
+					</NcAppNavigationItem>
+				</ul>
+			</template>
+		</NcAppNavigation>
 
 		<!-- Settings modal-->
 		<SettingsModal :open="settingsOpened"
 			data-cy-files-navigation-settings
 			@close="onSettingsClose" />
-	</NcAppNavigation>
+	</Fragment>
 </template>
 
 <script lang="ts">
 import type { View } from '@nextcloud/files'
 
+import { Fragment } from 'vue-frag'
+
 import { emit } from '@nextcloud/event-bus'
 import { translate } from '@nextcloud/l10n'
 import Cog from 'vue-material-design-icons/Cog.vue'
@@ -94,6 +98,7 @@ export default {
 
 	components: {
 		Cog,
+		Fragment,
 		NavigationQuota,
 		NcAppNavigation,
 		NcAppNavigationItem,