Frontend/src/App.vue

@@ -13,9 +13,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div id="layout" class="flex dark:bg-gray-700">
+  <div id="layout" class="flex dark:bg-gray-800">
     <SidebarComponent />
-    <div class="relative p-12 w-11/12">
+    <div class="relative p-6 w-11/12 m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl">
       <RouterView></RouterView>
     </div>
   </div>

Frontend/src/components/sidebar/SidebarComponent.vue

@@ -28,8 +28,8 @@ function changeLogoForTheme(){
 </script>
 
 <template>
-    <aside class="relative top-0 left-0 z-40 w-1/12 h-screen transition-transform -translate-x-full sm:translate-x-0" >
+    <aside class="relative top-0 left-0 z-40 w-48 h-screen transition-transform -translate-x-full sm:translate-x-0" >
-        <div class="h-full px-3 py-4 overflow-y-auto bg-gray-100 dark:bg-gray-800">
+        <div class="h-full px-3 py-4 overflow-y-auto bg-indigo-50 dark:bg-gray-800">
             <a href="https://release11.com/">
                 <img :src="logoR11" class="w-72 h-16 p-2 dark:bg-gray-800"/>
             </a>
@@ -47,7 +47,10 @@ function changeLogoForTheme(){
                     <li><SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" /></li>
                 </sidebar-menu-element-component>
 
-                <li><SidebarToolLinkComponent class="text-left" path-to="/rest/mock" element-content="REST Mock" /></li>
+
+                <sidebar-menu-element-component category-name="REST">
+                    <li><SidebarToolLinkComponent path-to="/rest/mock" element-content="Mock" /></li>
+                </sidebar-menu-element-component>
 
             </ul>
         </div>

Frontend/src/components/sidebar/SidebarMenuElementComponent.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const hiddenOrActive = ref('hidden');
+const isActive = ref(false);
 
 function switchHiddenElement(){
-    if(hiddenOrActive.value == 'hidden'){
+    isActive.value = !isActive.value;
-        hiddenOrActive.value = "active";
-    } else{
-        hiddenOrActive.value = "hidden"
-    }
 }
 
 const props = defineProps(
@@ -22,10 +18,10 @@ const props = defineProps(
 
 <template>
     <li>
-        <button @click="switchHiddenElement()" type="button" class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="flex items-center w-full p-2 text-lg font-bold text-gray-900 transition duration-75 group hover:bg-blue-100 dark:text-white dark:hover:bg-gray-700">
-            <span class="flex-1 ml-3 text-left whitespace-nowrap">{{props.categoryName}}</span>
+            <span class="flex-1 text-center items-center whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <ul class='py-2 space-y-2 bg-gray-50 dark:bg-gray-700 rounded-xl' :class="hiddenOrActive">
+        <ul class="py-2 space-y-2 bg-white dark:bg-gray-700 rounded-b-xl" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </ul>
     </li>

Frontend/src/components/sidebar/SidebarToolLinkComponent.vue

@@ -10,5 +10,5 @@ const props = defineProps(
 </script>
 
 <template>
-    <RouterLink class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
+    <RouterLink class="flex w-full py-2 px-4 text-center text-gray-800 font-thin transition duration-75 group hover:bg-blue-100 dark:text-white dark:hover:bg-gray-700" :to="props.pathTo">{{ props.elementContent }}</RouterLink>
 </template>