feat: nicer sidebar buttons

fix: dragging in fullscreen

src/app.css

@@ -14,6 +14,14 @@
     --padding-left: unset !important;
   }
 
+  .draggable {
+    -webkit-app-region: drag;
+  }
+
+  .not-draggable {
+    -webkit-app-region: no-drag;
+  }
+
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;

src/lib/components/ui/menubar/menubar.svelte

@@ -10,13 +10,16 @@
   function tabindex (node: HTMLElement) {
     node.tabIndex = -1
   }
+  let fullscreenElement: HTMLElement | null = null
 </script>
 
+<svelte:document bind:fullscreenElement />
+
 <Wrapper let:platform>
   <div class='w-[calc(100%-3.5rem)] left-[3.5rem] top-0 z-[2000] flex navbar absolute h-8'>
-    <div class='draggable w-full' />
+    <div class='w-full {fullscreenElement ? 'not-draggable' : 'draggable'}' />
     {#if platform !== 'macOS'}
-      <div class='window-controls flex text-white backdrop-blur'>
+      <div class='window-controls not-draggable flex text-white backdrop-blur'>
         <button class='max-button flex items-center justify-center h-8 w-[46px]' use:click={native.minimise} use:tabindex>
           <svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><rect fill='currentColor' height='1' width='10' x='1' y='6' />
         </button>
@@ -43,11 +46,7 @@
     transform-origin: 100% 0;
     transform: translate(-29.3%) rotate(-45deg);
   }
-  .draggable {
-    -webkit-app-region: drag;
-  }
   .window-controls {
-    -webkit-app-region: no-drag;
     background: rgba(24, 24, 24, 0.1);
   }
   .window-controls button:hover {

src/lib/components/ui/sidebar/SidebarButton.svelte

@@ -28,9 +28,9 @@
   $: isActive = href && matchPath(href, $page)
 </script>
 
-<Button variant='ghost' {href} class={cn(className, 'px-2 w-10 relative')} {...$$restProps}>
+<Button variant='ghost' {href} class={cn(className, 'px-2 w-10 relative md:pl-4 md:w-12 md:rounded-l-none')} {...$$restProps}>
   {#if isActive}
-    <div class='bg-white absolute inset-0 rounded-md' in:send={{ key }} out:receive={{ key }} />
+    <div class='bg-white absolute inset-0 rounded-md md:rounded-l-none' in:send={{ key }} out:receive={{ key }} />
   {/if}
   <div class='relative text-white transition-colors duration-300' class:!text-black={isActive}>
     <slot />

src/lib/components/ui/sidebar/sidebar.svelte

@@ -23,7 +23,7 @@
     </div>
   </div>
 {:else}
-  <div class='w-14 p-2 flex flex-col z-10 shrink-0 bg-black gap-2 group-fullscreen/fullscreen:hidden'>
+  <div class='w-14 p-2 md:pl-0 flex flex-col z-10 shrink-0 bg-black gap-2 group-fullscreen/fullscreen:hidden'>
     <slot />
   </div>
 {/if}

src/lib/components/ui/sidebar/sidebarlist.svelte

@@ -34,7 +34,7 @@
 <svelte:document bind:visibilityState />
 
 <BannerImage class='absolute top-0 left-0 w-14 -z-10 hidden md:block' />
-<Logo class='mb-3 h-10 object-contain px-2.5 hidden md:block text-white' />
+<Logo class='mb-3 h-10 object-contain px-2.5 hidden md:block text-white ml-2' />
 <SidebarButton href='/app/home/'>
   <House size={18} />
 </SidebarButton>
@@ -53,7 +53,7 @@
 <SidebarButton href='/app/client/' id='sidebar-client' data-down='#sidebar-donate'>
   <Download size={18} />
 </SidebarButton>
-<Button variant='ghost' id='sidebar-donate' data-up='#sidebar-client' on:click={() => native.openURL('https://github.com/sponsors/ThaUnknown/')} class='px-2 w-full relative mt-auto select:!bg-transparent text-[#fa68b6] select:text-[#fa68b6]'>
+<Button variant='ghost' id='sidebar-donate' data-up='#sidebar-client' on:click={() => native.openURL('https://github.com/sponsors/ThaUnknown/')} class='px-2 w-full relative mt-auto select:!bg-transparent text-[#fa68b6] select:text-[#fa68b6] md:pl-4 md:w-12 md:rounded-l-none'>
   <Heart size={18} fill='currentColor' class={cn('drop-shadow-[0_0_1rem_#fa68b6]', active && 'animate-[hearbeat_1s_ease-in-out_infinite_alternate]')} />
 </Button>
 <SidebarButton href='/app/settings/'>