add categories orderer

move the admin menu to the left

src/pages/AdminSettings.vue

@@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     v-if="config"
     app-name="side_menu"
   >
-    <NcAppContent>
+    <NcAppContent class="side-menu-setting-app">
       <div class="side-menu-setting">
         <NcButton
           v-for="item in menu"
@@ -31,6 +31,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <TableContainer :class="sectionClass('panel')">
+        <SectionTitle label="Panel" />
+
         <TableRow>
           <TableLabel label="Display" />
           <TableValue>
@@ -101,6 +103,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </TableContainer>
 
       <TableContainer :class="sectionClass('topMenu')">
+        <SectionTitle label="Top menu" />
+
         <TableRow>
           <TableLabel
             label="Applications kept in the top menu"
@@ -142,6 +146,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </TableContainer>
 
       <TableContainer :class="sectionClass('apps')">
+        <SectionTitle label="Applications" />
+
         <TableRow>
           <TableLabel
             label="Apps that should not be displayed in the menu"
@@ -171,7 +177,39 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         </TableRow>
       </TableContainer>
 
+      <TableContainer :class="sectionClass('cats')">
+        <SectionTitle label="Categories" />
+
+        <TableRow>
+          <TableLabel
+            label="Order by"
+            :middle="true"
+          />
+          <TableValue>
+            <FormSelect
+              v-model="config['categories-order-type']"
+              :options="[
+                { id: 'default', label: 'Name' },
+                { id: 'custom', label: 'Customed' },
+              ]"
+            />
+          </TableValue>
+        </TableRow>
+
+        <TableRow>
+          <TableLabel
+            label="Customize sorting"
+            :middle="true"
+          />
+          <TableValue>
+            <FormCatSort v-model="config['categories-order']" />
+          </TableValue>
+        </TableRow>
+      </TableContainer>
+
       <TableContainer :class="sectionClass('opener')">
+        <SectionTitle label="Opener" />
+
         <TableRow>
           <TableLabel
             label="Opener"
@@ -363,6 +401,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </TableContainer>
 
       <TableContainer :class="sectionClass('global')">
+        <SectionTitle label="Global" />
+
         <TableRow>
           <TableLabel
             label="The menu is enabled by default for users"
@@ -396,6 +436,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </TableContainer>
 
       <TableContainer :class="sectionClass('support')">
+        <SectionTitle label="Support" />
+
         <TableRow>
           <TableLabel
             label="You like this app and you want to support me?"
@@ -521,6 +563,7 @@ import FormYesNo from '../components/settings/form/FormYesNo'
 import FormSize from '../components/settings/form/FormSize'
 import FormAppPicker from '../components/settings/form/FormAppPicker'
 import FormAppSort from '../components/settings/form/FormAppSort'
+import FormCatSort from '../components/settings/form/FormCatSort'
 import FormDisplayPicker from '../components/settings/form/FormDisplayPicker'
 
 const menu = [
@@ -530,6 +573,7 @@ const menu = [
   { label: 'Colors', section: 'colors' },
   { label: 'Opener', section: 'opener' },
   { label: 'Applications', section: 'apps' },
+  { label: 'Categories', section: 'cats' },
   { label: 'Support', section: 'support' },
 ]
 
@@ -537,7 +581,7 @@ const config = ref(null)
 const showConfig = ref(false)
 const configCopied = ref(false)
 const configStore = useConfigStore()
-const section = ref('apps' /*menu[0].section*/)
+const section = ref(menu[0].section)
 
 const setSection = (value) => {
   section.value = value