feat: nav parent - expand by default option

backend/api/navigation.ts

@@ -10,6 +10,11 @@ const navigationItem = {
     icon: { type: 'string' },
     target: { type: 'string' },
     openInNewWindow: { type: 'boolean' },
+    expandByDefault: {
+      type: 'boolean',
+      description:
+        'Whether a link holding children is shown expanded on load. Meaningless on any other item.'
+    },
     visibilityGroups: {
       type: 'array',
       items: { type: 'string' },

backend/locales/en.json

@@ -2161,6 +2161,8 @@
   "navEdit.clearItems": "Clear All Items",
   "navEdit.editMenuItems": "Edit Menu Items",
   "navEdit.emptyMenuText": "Click the Add button to add your first menu item.",
+  "navEdit.expandByDefault": "Expand by Default",
+  "navEdit.expandByDefaultHint": "Whether the submenu is already expanded when the page loads.",
   "navEdit.groupsFailed": "Failed to load the list of groups. Per-group visibility cannot be changed.",
   "navEdit.header": "Header",
   "navEdit.icon": "Icon",

backend/models/navigation.ts

@@ -18,6 +18,8 @@ export interface NavigationItem {
   icon?: string
   target?: string
   openInNewWindow?: boolean
+  /** A link with children only: whether the sidebar shows its submenu already open. */
+  expandByDefault?: boolean
   visibilityGroups?: string[]
   children?: NavigationItem[]
 }

frontend/src/components/NavEditOverlay.vue

@@ -288,6 +288,30 @@
               </w-item-section>
             </w-item>
             <w-separator class="my-2" inset />
+            <!--
+              A parent is a row that opens a submenu rather than a row that goes anywhere: the sidebar
+              renders it as an expansion item and never reads its target, so both fields below are
+              hidden rather than shown doing nothing. Hidden, not cleared -- unnesting the last child
+              turns the row back into an ordinary link, and it comes back with the address it had.
+            -->
+            <template v-if="currentIsParent">
+              <w-item tag="label">
+                <blueprint-icon icon="chevron-right" />
+                <w-item-section>
+                  <w-item-label>{{ t(`navEdit.expandByDefault`) }}</w-item-label>
+                  <w-item-label caption>{{ t(`navEdit.expandByDefaultHint`) }}</w-item-label>
+                </w-item-section>
+                <w-item-section avatar>
+                  <w-toggle
+                    v-model="state.current.expandByDefault"
+                    color="primary"
+                    checked-icon="la:check"
+                    unchecked-icon="la:times"
+                    :aria-label="t(`navEdit.expandByDefault`)" />
+                </w-item-section>
+              </w-item>
+            </template>
+            <template v-else>
               <w-item>
                 <blueprint-icon icon="link" />
                 <w-item-section>
@@ -338,6 +362,7 @@
                     :aria-label="t(`navEdit.openInNewWindow`)" />
                 </w-item-section>
               </w-item>
+            </template>
             <w-separator class="my-2" inset />
             <w-item>
               <blueprint-icon icon="user-groups" />
@@ -497,6 +522,7 @@ const state = reactive({
     icon: '',
     target: '/',
     openInNewWindow: false,
+    expandByDefault: false,
     visibilityGroups: [],
     visibilityLimited: false,
     isNested: false
@@ -534,6 +560,23 @@ const visibilityOptions = [
  */
 const navId = computed(() => (pageStore.isHome ? pageStore.navigationId : pageStore.id))
 
+/**
+ * Whether the link being edited is a parent — one the sidebar draws as a submenu.
+ *
+ * Parenthood is not a property of the item: this list is flat, and `isNested` says an item belongs to
+ * whatever link comes before it, so what makes a link a parent is the item that FOLLOWS it. Which is why
+ * this is asked of the list rather than read off `state.current`, and why it answers again the moment a
+ * child is nested, unnested or dragged away.
+ */
+const currentIsParent = computed(() => {
+  const item = state.current
+  if (item?.type !== 'link' || item.isNested) {
+    return false
+  }
+  const idx = state.items.findIndex((it) => it.id === item.id)
+  return idx >= 0 && Boolean(state.items[idx + 1]?.isNested)
+})
+
 const thumbStyle = {
   right: '2px',
   borderRadius: '5px',
@@ -595,6 +638,7 @@ function addItem(type) {
       newItem.icon = DEFAULT_LINK_ICON
       newItem.target = '/'
       newItem.openInNewWindow = false
+      newItem.expandByDefault = false
       newItem.isNested = false
       break
     }
@@ -659,6 +703,7 @@ async function loadMenuItems() {
           'icon',
           'target',
           'openInNewWindow',
+          'expandByDefault',
           'visibilityGroups'
         ]),
         visibilityLimited: item.visibilityGroups?.length > 0
@@ -702,7 +747,9 @@ function cleanMenuItem(item, isNested = false) {
       return {
         ...pick(item, ['id', 'type', 'label', 'icon', 'target', 'openInNewWindow']),
         visibilityGroups: item.visibilityLimited ? item.visibilityGroups : [],
-        ...(!isNested && { children: [] })
+        // -> Only a top-level link can hold children, so only one of those can be a parent — a nested
+        //    item carrying an expand flag would be a setting nothing ever reads
+        ...(!isNested && { children: [], expandByDefault: Boolean(item.expandByDefault) })
       }
     }
     case 'separator': {

frontend/src/components/NavSidebar.vue

@@ -15,12 +15,13 @@
           >{{ item.label }}</w-item-label
         >
         <!-- -> Open from the start when the page being read is one of its children, so a reader arriving
-                by URL sees where they are in the tree. Not `v-model`: after that first render the group
+                by URL sees where they are in the tree -- or when the menu says this group opens that way
-                is the reader's to open and close, and a bound value would fight them -->
+                whatever is being read. Not `v-model`: after that first render the group is the reader's
+                to open and close, and a bound value would fight them -->
         <w-expansion-item
           v-else-if="item.type === `link` && item.children?.length > 0"
           dense
-          :default-opened="containsCurrent(item)">
+          :default-opened="item.expandByDefault || containsCurrent(item)">
           <!-- The icon goes through a header slot rather than the `icon` prop, so that an Iconify -->
           <!-- reference is drawn by w-icon like everywhere else -->
           <template #header>