added server styling settings

client/components/app/ConfigSideNav.vue

@@ -7,7 +7,7 @@
 
       <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-3 h-12 border-b border-primary/30 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary/70' : 'hover:bg-primary/30'">
         <p class="leading-4">{{ route.title }}</p>
-        <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+        <div v-show="routeName === route.id" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       </nuxt-link>
 
       <modals-changelog-view-modal v-model="showChangelogModal" :versionData="versionData" />
@@ -109,6 +109,11 @@ export default {
           id: 'config-authentication',
           title: this.$strings.HeaderAuthentication,
           path: '/config/authentication'
+        },
+        {
+          id: 'styling',
+          title: this.$strings.HeaderStyling,
+          path: '/config/styling'
         }
       ]
 

client/components/app/GlobalStyling.vue

@@ -0,0 +1,53 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'GlobalStyling',
+  computed: {
+    ...mapGetters(['getServerStyling'])
+  },
+  methods: {
+    applyColors() {
+      const styling = this.getServerStyling
+      if (!styling) return
+
+      // Create a style element if it doesn't exist
+      let styleEl = document.getElementById('custom-colors')
+      if (!styleEl) {
+        styleEl = document.createElement('style')
+        styleEl.id = 'custom-colors'
+        document.head.appendChild(styleEl)
+      }
+
+      // Update CSS variables
+      const css = `
+        :root {
+          --color-primary: ${styling.primary};
+          --color-primary-dark: ${styling.primaryDark};
+          --color-success: ${styling.success};
+          --color-warning: ${styling.warning};
+          --color-error: ${styling.error};
+          --color-info: ${styling.info};
+          --color-bg: ${styling.background};
+        }
+      `
+      styleEl.innerHTML = css
+    }
+  },
+  mounted() {
+    this.applyColors()
+  },
+  watch: {
+    getServerStyling: {
+      handler() {
+        this.applyColors()
+      },
+      deep: true
+    }
+  }
+}
+</script> 

client/components/app/ServerSettingsTab.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="w-full">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <nuxt-link v-for="setting in serverSettings" :key="setting.path" :to="setting.path" class="p-4 bg-primary hover:bg-primary-600 rounded-lg transition-colors duration-200">
+        <div class="flex items-center">
+          <span class="material-symbols text-2xl mr-3">{{ setting.icon }}</span>
+          <div>
+            <h3 class="text-lg font-semibold">{{ setting.title }}</h3>
+            <p class="text-sm text-gray-300">{{ setting.description }}</p>
+          </div>
+        </div>
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      serverSettings: [
+        {
+          title: this.$strings.HeaderAuthentication || 'Authentication',
+          description: this.$strings.DescriptionAuthentication || 'Configure authentication methods and settings',
+          path: '/config/authentication',
+          icon: 'security'
+        },
+        {
+          title: this.$strings.HeaderLibraries || 'Libraries',
+          description: this.$strings.DescriptionLibraries || 'Manage your libraries',
+          path: '/config/libraries',
+          icon: 'library_books'
+        },
+        {
+          title: this.$strings.HeaderBackups || 'Backups',
+          description: this.$strings.DescriptionBackups || 'Configure server backups',
+          path: '/config/backups',
+          icon: 'backup'
+        },
+        {
+          title: this.$strings.HeaderEmail || 'Email',
+          description: this.$strings.DescriptionEmail || 'Configure email settings',
+          path: '/config/email',
+          icon: 'mail'
+        },
+        {
+          title: this.$strings.HeaderNotifications || 'Notifications',
+          description: this.$strings.DescriptionNotifications || 'Configure notification settings',
+          path: '/config/notifications',
+          icon: 'notifications'
+        },
+        {
+          title: this.$strings.HeaderServerLogs || 'Server Logs',
+          description: this.$strings.DescriptionServerLogs || 'View server logs',
+          path: '/config/log',
+          icon: 'article'
+        },
+        {
+          title: this.$strings.HeaderServerStyling || 'Server Styling',
+          description: this.$strings.DescriptionServerStyling || 'Customize server appearance',
+          path: '/config/styling',
+          icon: 'palette'
+        }
+      ]
+    }
+  }
+}
+</script>