Change Admin Panel "Attachment Settings" and "Cron Settings" options to be tabs, not submenu.

Thanks to xet7 !

client/00-startup.js

@@ -15,3 +15,6 @@ import '/client/components/migrationProgress';
 
 // Import cron settings
 import '/client/components/settings/cronSettings';
+
+// Import settings tabs CSS
+import '/client/components/settings/settingsTabs.css';

client/components/settings/attachmentSettings.jade

@@ -1,5 +1,21 @@
 template(name="attachmentSettings")
   .attachment-settings-content
+    .settings-tabs
+      ul.tab-nav
+        li(class="{{#if showStorageSettings.get}}active{{/if}}")
+          a.js-attachment-storage-settings(data-id="storage-settings")
+            i.fa.fa-cog
+            | {{_ 'attachment-storage-settings'}}
+        li(class="{{#if showMigration.get}}active{{/if}}")
+          a.js-attachment-migration(data-id="attachment-migration")
+            i.fa.fa-arrow-right
+            | {{_ 'attachment-migration'}}
+        li(class="{{#if showMonitoring.get}}active{{/if}}")
+          a.js-attachment-monitoring(data-id="attachment-monitoring")
+            i.fa.fa-chart-line
+            | {{_ 'attachment-monitoring'}}
+    
+    .tab-content
       if loading.get
         +spinner
       else if showStorageSettings.get

client/components/settings/cronSettings.jade

@@ -1,5 +1,25 @@
 template(name="cronSettings")
   .cron-settings-content
+    .settings-tabs
+      ul.tab-nav
+        li(class="{{#if showMigrations.get}}active{{/if}}")
+          a.js-cron-migrations(data-id="cron-migrations")
+            i.fa.fa-database
+            | {{_ 'cron-migrations'}}
+        li(class="{{#if showBoardOperations.get}}active{{/if}}")
+          a.js-cron-board-operations(data-id="cron-board-operations")
+            i.fa.fa-tasks
+            | {{_ 'board-operations'}}
+        li(class="{{#if showJobs.get}}active{{/if}}")
+          a.js-cron-jobs(data-id="cron-jobs")
+            i.fa.fa-clock-o
+            | {{_ 'cron-jobs'}}
+        li(class="{{#if showAddJob.get}}active{{/if}}")
+          a.js-cron-add(data-id="cron-add")
+            i.fa.fa-plus
+            | {{_ 'add-cron-job'}}
+    
+    .tab-content
       if loading.get
         +spinner
       else if showMigrations.get

client/components/settings/cronSettings.js

@@ -141,6 +141,27 @@ Template.cronSettings.helpers({
   }
 });
 
+Template.cronSettings.switchMenu = function(event, targetID) {
+  const instance = Template.instance();
+  
+  // Reset all tabs
+  instance.showMigrations.set(false);
+  instance.showBoardOperations.set(false);
+  instance.showJobs.set(false);
+  instance.showAddJob.set(false);
+  
+  // Set the selected tab
+  if (targetID === 'cron-migrations') {
+    instance.showMigrations.set(true);
+  } else if (targetID === 'cron-board-operations') {
+    instance.showBoardOperations.set(true);
+  } else if (targetID === 'cron-jobs') {
+    instance.showJobs.set(true);
+  } else if (targetID === 'cron-add') {
+    instance.showAddJob.set(true);
+  }
+};
+
 Template.cronSettings.events({
   'click .js-cron-migrations'(event) {
     event.preventDefault();

client/components/settings/settingBody.jade

@@ -8,86 +8,45 @@ template(name="setting")
         span {{_ 'settings'}}
       .content-body
         .side-menu
-          if attachmentSettings.get
           ul
-              li
+            li(class="{{#if generalSetting.get}}active{{/if}}")
-                a.js-back-to-main-settings
-                  i.fa.fa-arrow-left
-                  | {{_ 'back-to-settings'}}
-              li
-                a.js-attachment-storage-settings(data-id="storage-settings")
-                  i.fa.fa-cog
-                  | {{_ 'attachment-storage-settings'}}
-              li
-                a.js-attachment-migration(data-id="attachment-migration")
-                  i.fa.fa-arrow-right
-                  | {{_ 'attachment-migration'}}
-              li
-                a.js-attachment-monitoring(data-id="attachment-monitoring")
-                  i.fa.fa-chart-line
-                  | {{_ 'attachment-monitoring'}}
-          else if cronSettings.get
-            ul
-              li
-                a.js-back-to-main-settings
-                  i.fa.fa-arrow-left
-                  | {{_ 'back-to-settings'}}
-              li
-                a.js-cron-migrations(data-id="cron-migrations")
-                  i.fa.fa-database
-                  | {{_ 'cron-migrations'}}
-              li
-                a.js-cron-board-operations(data-id="cron-board-operations")
-                  i.fa.fa-tasks
-                  | {{_ 'board-operations'}}
-              li
-                a.js-cron-jobs(data-id="cron-jobs")
-                  i.fa.fa-clock-o
-                  | {{_ 'cron-jobs'}}
-              li
-                a.js-cron-add(data-id="cron-add")
-                  i.fa.fa-plus
-                  | {{_ 'add-cron-job'}}
-          else
-            ul
-              li.active
               a.js-setting-menu(data-id="registration-setting")
                 i.fa.fa-sign-in
                 | {{_ 'registration'}}
             unless isSandstorm
-                li
+              li(class="{{#if emailSetting.get}}active{{/if}}")
                 a.js-setting-menu(data-id="email-setting")
                   i.fa.fa-envelope
                   | {{_ 'email'}}
-              li
+            li(class="{{#if accountSetting.get}}active{{/if}}")
               a.js-setting-menu(data-id="account-setting")
                 i.fa.fa-users
                 | {{_ 'accounts'}}
-              li
+            li(class="{{#if tableVisibilityModeSetting.get}}active{{/if}}")
               a.js-setting-menu(data-id="tableVisibilityMode-setting")
                 i.fa.fa-eye
                 | {{_ 'tableVisibilityMode'}}
-              li
+            li(class="{{#if announcementSetting.get}}active{{/if}}")
               a.js-setting-menu(data-id="announcement-setting")
                 i.fa.fa-bullhorn
                 | {{_ 'admin-announcement'}}
-              li
+            li(class="{{#if accessibilitySetting.get}}active{{/if}}")
               a.js-setting-menu(data-id="accessibility-setting")
                 i.fa.fa-universal-access
                 | {{_ 'accessibility'}}
-              li
+            li(class="{{#if layoutSetting.get}}active{{/if}}")
               a.js-setting-menu(data-id="layout-setting")
                 i.fa.fa-object-group
                 | {{_ 'layout'}}
-              li
+            li(class="{{#if webhookSetting.get}}active{{/if}}")
               a.js-setting-menu(data-id="webhook-setting")
                 i.fa.fa-globe
                 | {{_ 'global-webhook'}}
-              li
+            li(class="{{#if attachmentSettings.get}}active{{/if}}")
               a.js-setting-menu(data-id="attachment-settings")
                 i.fa.fa-paperclip
                 | {{_ 'attachment-settings'}}
-              li
+            li(class="{{#if cronSettings.get}}active{{/if}}")
               a.js-setting-menu(data-id="cron-settings")
                 i.fa.fa-clock-o
                 | {{_ 'cron-settings'}}

client/components/settings/settingBody.js

@@ -102,33 +102,13 @@ BlazeComponent.extendComponent({
     $('#display-authentication-method').toggleClass('is-checked');
   },
 
-  backToMainSettings(event) {
+  switchAttachmentTab(event) {
-    event.preventDefault();
-    // Reset all settings to false
-    this.forgotPasswordSetting.set(false);
-    this.generalSetting.set(true); // Set registration as default
-    this.emailSetting.set(false);
-    this.accountSetting.set(false);
-    this.announcementSetting.set(false);
-    this.accessibilitySetting.set(false);
-    this.layoutSetting.set(false);
-    this.webhookSetting.set(false);
-    this.attachmentSettings.set(false);
-    this.cronSettings.set(false);
-    this.tableVisibilityModeSetting.set(false);
-    
-    // Update active menu item
-    $('.side-menu li.active').removeClass('active');
-    $('.side-menu li:first-child').addClass('active');
-  },
-
-  switchAttachmentMenu(event) {
     event.preventDefault();
     const target = $(event.target);
     const targetID = target.data('id');
     
-    // Update active menu item
+    // Update active tab
-    $('.side-menu li.active').removeClass('active');
+    $('.tab-nav li.active').removeClass('active');
     target.parent().addClass('active');
     
     // Call the attachment settings component method if available
@@ -137,13 +117,13 @@ BlazeComponent.extendComponent({
     }
   },
 
-  switchCronMenu(event) {
+  switchCronTab(event) {
     event.preventDefault();
     const target = $(event.target);
     const targetID = target.data('id');
     
-    // Update active menu item
+    // Update active tab
-    $('.side-menu li.active').removeClass('active');
+    $('.tab-nav li.active').removeClass('active');
     target.parent().addClass('active');
     
     // Call the cron settings template method if available
@@ -355,14 +335,13 @@ BlazeComponent.extendComponent({
         'click button.js-save-layout': this.saveLayout,
         'click a.js-toggle-display-authentication-method': this
           .toggleDisplayAuthenticationMethod,
-        'click a.js-back-to-main-settings': this.backToMainSettings,
+        'click a.js-attachment-storage-settings': this.switchAttachmentTab,
-        'click a.js-attachment-storage-settings': this.switchAttachmentMenu,
+        'click a.js-attachment-migration': this.switchAttachmentTab,
-        'click a.js-attachment-migration': this.switchAttachmentMenu,
+        'click a.js-attachment-monitoring': this.switchAttachmentTab,
-        'click a.js-attachment-monitoring': this.switchAttachmentMenu,
+        'click a.js-cron-migrations': this.switchCronTab,
-        'click a.js-cron-migrations': this.switchCronMenu,
+        'click a.js-cron-board-operations': this.switchCronTab,
-        'click a.js-cron-board-operations': this.switchCronMenu,
+        'click a.js-cron-jobs': this.switchCronTab,
-        'click a.js-cron-jobs': this.switchCronMenu,
+        'click a.js-cron-add': this.switchCronTab,
-        'click a.js-cron-add': this.switchCronMenu,
       },
     ];
   },

client/components/settings/settingsTabs.css

@@ -0,0 +1,67 @@
+/* Settings Tabs Styles */
+.settings-tabs {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.tab-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tab-nav li {
+  margin: 0;
+  padding: 0;
+}
+
+.tab-nav li a {
+  display: block;
+  padding: 12px 20px;
+  text-decoration: none;
+  color: #666;
+  border-bottom: 3px solid transparent;
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.tab-nav li a:hover {
+  color: #333;
+  background-color: #f5f5f5;
+}
+
+.tab-nav li.active a {
+  color: #2196F3;
+  border-bottom-color: #2196F3;
+  background-color: #f8f9fa;
+}
+
+.tab-nav li a i {
+  margin-right: 8px;
+  width: 16px;
+  text-align: center;
+}
+
+.tab-content {
+  padding: 20px 0;
+  min-height: 400px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .tab-nav {
+    flex-direction: column;
+  }
+  
+  .tab-nav li a {
+    border-bottom: 1px solid #e0e0e0;
+    border-right: none;
+  }
+  
+  .tab-nav li.active a {
+    border-bottom-color: #2196F3;
+    border-right: 3px solid #2196F3;
+  }
+}