@axium/client 0.18.3 → 0.18.4

package/dist/requests.js

@@ -31,11 +31,6 @@ export async function fetchAPI(method, endpoint, data, ...params) {
         catch (e) {
             throw prettifyError(e);
         }
-    if (method !== 'GET' && method !== 'HEAD')
-        options.body = JSON.stringify(data);
-    const search = method != 'GET' || typeof data != 'object' || data == null || !Object.keys(data).length
-        ? ''
-        : '?' + new URLSearchParams(JSON.parse(JSON.stringify(data))).toString();
     if (token)
         options.headers.Authorization = 'Bearer ' + token;
     if (userAgent)
@@ -51,7 +46,17 @@ export async function fetchAPI(method, endpoint, data, ...params) {
             throw new Error(`Missing parameter "${part.slice(1)}"`);
         parts.push(value);
     }
-    const response = await fetch(prefix + parts.join('/') + search, options);
+    let url = prefix + parts.join('/');
+    if (method !== 'GET' && method !== 'HEAD')
+        options.body = JSON.stringify(data);
+    if (method == 'GET' && typeof data == 'object' && data != null && Object.keys(data).length) {
+        const search = new URLSearchParams();
+        for (const [key, value] of Object.entries(data)) {
+            search.set(key, JSON.stringify(value));
+        }
+        url += '?' + search.toString();
+    }
+    const response = await fetch(url, options);
     if (!response.headers.get('Content-Type')?.includes('application/json')) {
         throw new Error(`Unexpected response type: ${response.headers.get('Content-Type')}`);
     }

package/lib/SidebarLayout.svelte

@@ -1,21 +1,31 @@
 <script lang="ts">
 	import Icon from './Icon.svelte';
-	import { capitalize } from 'utilium';
 
 	interface Tab {
 		href: string;
 		name: string;
 		icon: string;
 		active: boolean;
+		mobile?: false;
 	}
 
-	let { children, tabs, bottom }: { children(): any; tabs: Tab[]; bottom?(): any } = $props();
+	interface MobileTab {
+		href: string;
+		icon: string;
+		active: boolean;
+		mobile: true;
+	}
+
+	let { children, tabs, bottom }: { children(): any; tabs: (Tab | MobileTab)[]; bottom?(): any } = $props();
 </script>
 
 <div class="sidebar-container">
 	<div class="sidebar">
-		{#each tabs as { href, name, icon: i, active }}
-			<a {href} class={['item', 'icon-text', active && 'active']}><Icon {i} /> <span class="sidebar-text">{name}</span></a>
+		{#each tabs as tab}
+			<a href={tab.href} class={['item', 'icon-text', tab.active && 'active', tab.mobile && 'mobile-only']}>
+				<Icon i={tab.icon} />
+				{#if !tab.mobile}<span class="sidebar-text">{tab.name}</span>{/if}
+			</a>
 		{/each}
 
 		{#if bottom}
@@ -105,5 +115,10 @@
 
 	.sidebar-bottom {
 		margin-top: auto;
+		margin-left: 1em;
+
+		@media (width < 700px) {
+			display: none;
+		}
 	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.18.3",
+	"version": "0.18.4",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",

package/styles/list.css

@@ -1,23 +1,30 @@
-.list-container {
-	overflow-x: hidden;
-	overflow-y: scroll;
+div:has(> .list) {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow-y: hidden;
 
-	.list {
-		height: 100%;
+	> :where(button),
+	> .Popover > :where(button) {
+		align-self: flex-start;
 	}
 }
 
 .list {
 	display: flex;
 	flex-direction: column;
-	padding: 0.5em;
+	min-height: 0;
+	overflow-x: hidden;
+	overflow-y: scroll;
 }
 
 div.list-header {
 	font-weight: bold;
 	border-bottom: 1.5px solid var(--fg-accent);
 	position: sticky;
+	background-color: var(--bg-normal);
 	top: 0em;
+	z-index: 1;
 
 	@media (width < 700px) {
 		display: none !important;
@@ -36,6 +43,7 @@ div.list-header {
 	padding: 0.5em;
 	overflow: hidden;
 	text-wrap: nowrap;
+	flex: 0 0 auto;
 }
 
 .list-item:not(.list-header, :first-child) {