Frontend/src/components/sidebar/SidebarComponent.vue

@@ -23,7 +23,7 @@ onMounted( () => {
 </script>
 
 <template>
-    <aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
+    <aside class="relative flex-shrink-0 top-0 left-0 z-40 w-48 h-screen" >
         <div class="h-full px-3 pt-2 pb-4 overflow-y-auto">
             <a href="https://release11.com/">
                 <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>

Frontend/src/components/sidebar/SidebarMenuElementComponent.vue

@@ -17,7 +17,7 @@ const props = defineProps(
 
 
 <template>
-    <div class="w-full mb-4 p-2 rounded-xl shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-600 dark:to-blue-900">
+    <div class="w-full mb-4 p-2 rounded-xl shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-sky-700 dark:to-sky-900">
         <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>

Frontend/src/style.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 .tool-button {
-    @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-blue-700 dark:to-indigo-800 hover:bg-blue-400
+    @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }