feat: Add NcAppNavigationList

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

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -66,7 +66,7 @@ emit('toggle-navigation', {
 			@keydown.esc="handleEsc">
 			<slot />
 			<!-- List for Navigation li-items -->
-			<ul class="app-navigation__list">
+			<ul v-if="hasListSlotItems" class="app-navigation__list">
 				<slot name="list" />
 			</ul>
 
@@ -132,6 +132,12 @@ export default {
 		}
 	},
 
+	computed: {
+		hasListSlotItems() {
+			return this.$scopedSlots.list?.()?.length > 0
+		},
+	},
+
 	watch: {
 		isMobile() {
 			this.open = !this.isMobile

src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue

@@ -98,11 +98,13 @@
 </docs>
 
 <template>
-	<li class="app-navigation-caption">
+	<component :is="wrapperTag"
+		class="app-navigation-caption"
+		:class="{ 'app-navigation-caption--heading': isHeading }">
 		<!-- Name of the caption -->
-		<span class="app-navigation-caption__name">
+		<component :is="captionTag" class="app-navigation-caption__name">
 			{{ name }}
-		</span>
+		</component>
 
 		<!-- Actions -->
 		<div v-if="hasActions"
@@ -116,7 +118,7 @@
 				</template>
 			</NcActions>
 		</div>
-	</li>
+	</component>
 </template>
 
 <script>
@@ -137,6 +139,15 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * Enable when used as a heading
+		 * e.g. Before NcAppNavigationList
+		 */
+		isHeading: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop
 		 */
@@ -146,6 +157,12 @@ export default {
 	},
 
 	computed: {
+		wrapperTag() {
+			return this.isHeading ? 'div' : 'li'
+		},
+		captionTag() {
+			return this.isHeading ? 'h2' : 'span'
+		},
 		// Check if the actions slot is populated
 		hasActions() {
 			return !!this.$slots.actions
@@ -160,6 +177,13 @@ export default {
 	display: flex;
 	justify-content: space-between;
 
+	&--heading {
+		padding: var(--app-navigation-padding);
+		&:not(:first-child):not(:last-child) {
+			padding: 0 var(--app-navigation-padding);
+		}
+	}
+
 	&__name {
 		font-weight: bold;
 		color: var(--color-main-text);

src/components/NcAppNavigationList/NcAppNavigationList.vue

@@ -0,0 +1,79 @@
+<!--
+  - @copyright 2024 Christopher Ng <chrng8@gmail.com>
+  -
+  - @author Christopher Ng <chrng8@gmail.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+-->
+
+<docs>
+### Description
+
+List wrapper for use in NcAppNavigation.
+
+#### Example
+
+Usage with NcAppNavigationCaption as a heading.
+
+```vue
+<NcAppNavigation>
+	<NcAppNavigationList>
+		<NcAppNavigationItem name="First" />
+		<NcAppNavigationItem name="Second" />
+		<NcAppNavigationItem name="Third" />
+	</NcAppNavigationList>
+	<NcAppNavigationCaption name="Sections" is-heading />
+	<NcAppNavigationList>
+		<NcAppNavigationItem name="Foo" />
+		<NcAppNavigationItem name="Bar" />
+		<NcAppNavigationItem name="Baz" />
+	</NcAppNavigationList>
+</NcAppNavigation>
+```
+</docs>
+
+<template>
+	<ul class="app-navigation-list">
+		<slot />
+	</ul>
+</template>
+
+<script>
+export default {
+	name: 'NcAppNavigationList',
+}
+</script>
+
+<style lang="scss" scoped>
+.app-navigation-list {
+	position: relative;
+	height: fit-content !important;
+	width: 100%;
+	overflow: unset !important;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline, 4px);
+	padding: var(--app-navigation-padding);
+
+	&:nth-last-of-type(2) {
+		// Fill remaining space before NcAppNavigation footer
+		height: 100% !important;
+		overflow: auto !important;
+	}
+}
+</style>

src/components/NcAppNavigationList/index.js

@@ -0,0 +1,23 @@
+/**
+ * @copyright 2024 Christopher Ng <chrng8@gmail.com>
+ *
+ * @author Christopher Ng <chrng8@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+export { default } from './NcAppNavigationList.vue'

src/components/index.js

@@ -39,6 +39,7 @@ export { default as NcAppNavigation } from './NcAppNavigation/index.js'
 export { default as NcAppNavigationCaption } from './NcAppNavigationCaption/index.js'
 export { default as NcAppNavigationIconBullet } from './NcAppNavigationIconBullet/index.js'
 export { default as NcAppNavigationItem } from './NcAppNavigationItem/index.js'
+export { default as NcAppNavigationList } from './NcAppNavigationList/index.js'
 export { default as NcAppNavigationNew } from './NcAppNavigationNew/index.js'
 export { default as NcAppNavigationNewItem } from './NcAppNavigationNewItem/index.js'
 export { default as NcAppNavigationSettings } from './NcAppNavigationSettings/index.js'