Frontend/src/components/sidebar/SidebarComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref , onMounted } from 'vue'
+import { ref , onMounted, watch } from 'vue'
 import SidebarToolLinkComponent from './SidebarToolLinkComponent.vue';
 import SidebarMenuElementComponent from './SidebarMenuElementComponent.vue';
 import logoDark from '@assets/logo_biale.svg';
@@ -7,6 +7,11 @@ import logoWhite from '@assets/logo_czarne.svg';
 
 const logoR11 = ref( logoDark );
 
+
+function changeLogoForTheme(){
+    logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
+}
+
 function isDarkModeSet(){
     return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 }
@@ -15,12 +20,6 @@ onMounted( () => {
     changeLogoForTheme();
 } )
 
-function changeLogoForTheme(){
-    logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
-}
-
-
-
 </script>
 
 <template>

Frontend/src/components/sidebar/SidebarMenuElementComponent.vue

@@ -17,11 +17,12 @@ const props = defineProps(
 
 
 <template>
-
+    <div class="mb-4 w-full">
         <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-t-lg bg-white dark:bg-gray-700' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-gray-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <div class="flex flex-col w-full mb-4 py-2 bg-white dark:bg-gray-700 rounded-b-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full py-2 bg-white dark:bg-gray-700 rounded-b-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </div>
+    </div>
 </template>