enhanced styling and new menu items in Sidebar

odyseja-ui/src/routes/panel/+layout.svelte

@@ -1,19 +1,21 @@
 <!-- src/components/Sidebar.svelte -->
 <script>
   import {logout} from "../../authService";
-  import {AppBar, AppShell, LightSwitch, Toast} from "@skeletonlabs/skeleton";
+  import {AppShell, Toast} from "@skeletonlabs/skeleton";
   import Navigation from "$lib/Navigation/Navigation.svelte";
   import logo from '$lib/assets/logo.png'
+  import Icon from '@iconify/svelte'
 
   const menuItems = [
+    { label: 'Panel główny', route: '/panel', icon: 'ic:round-space-dashboard'},
     { label: 'Harmonogram', route: '/panel/timetable', icon: 'ic:round-calendar-view-month' },
     { label: 'Problemy', route: '/panel/problem', icon: 'ic:round-format-list-bulleted' },
   ];
 </script>
 
 <Toast />
 
-<AppShell slotSidebarLeft="bg-surface-500/5 w-64 p-4">
+<AppShell slotSidebarLeft="bg-surface-500/5 w-64 p-4 mx-4 my-4 outline rounded-lg">
 
   <div class="p-6">
     <slot />
@@ -26,11 +28,18 @@
           <span class="text-2xl font-semibold text-primary-600">Odyseja Umysłu</span>
         </a>
       </div>
+
       <Navigation menuItems={menuItems} />
-      <button type="button" class="btn btn-sm variant-filled-primary" on:click={logout}>
-        Logout
+
+      <hr class="h-px my-4 ">
+      <button on:click={logout} class="py-2 rounded-lg hover:bg-orange-400/20">
+        <div class="flex ml-2 items-center">
+          <div class="bg-orange-400 h-9 w-9 rounded-full mr-3 flex justify-center items-center">
+            <Icon icon="ic:round-log-out" class="text-white text-2xl"/>
+          </div>
+          <span class="text-md font-semibold mb-1">Wyloguj</span>
+        </div>
       </button>
-      <LightSwitch class=""/>
     </div>
   </svelte:fragment>
 </AppShell>

odyseja-ui/src/routes/panel/+page.svelte

@@ -1 +1,6 @@
-panel
+<script>
+import {LightSwitch} from "@skeletonlabs/skeleton";
+</script>
+
+<span class="dark:text-blue-950">widać mnie, nie widać mnie</span>
+<LightSwitch></LightSwitch>