wind-explorer/friendolls-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iconified app menu tab UI

Browse Source
This commit is contained in:
Adam C
2026-03-22 02:33:27 +08:00
parent aa9d1f54a1
commit 4093b0eb0c
4 changed files with 82 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/assets/icons/blocks.svelte Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-blocks-icon lucide-blocks"
><path
d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"
/><rect x="14" y="2" width="8" height="8" rx="1" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 419 B

15
src/assets/icons/settings.svelte Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-settings-icon lucide-settings"
><path
d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
/><circle cx="12" cy="12" r="3" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 642 B

15
src/assets/icons/users.svelte Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-users-icon lucide-users"
><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path
d="M16 3.128a4 4 0 0 1 0 7.744"
/><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" /></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 427 B

52
src/routes/app-menu/+page.svelte
View File

@@ -5,6 +5,10 @@
import YourDolls from "./tabs/your-dolls/index.svelte";
import { events } from "$lib/bindings";
import { onMount } from "svelte";
import PawPrint from "../../assets/icons/paw-print.svelte";
import Users from "../../assets/icons/users.svelte";
import Settings from "../../assets/icons/settings.svelte";
import Blocks from "../../assets/icons/blocks.svelte";
let showInteractionOverlay = false;
@@ -38,46 +42,50 @@
<div class="flex flex-col gap-2 h-full max-h-full">
<div class="size-full flex flex-col max-h-full gap-2 h-full">
<div class="tabs tabs-lift h-full flex-1">
<label class="tab">
<input
type="radio"
name="app_menu_tabs"
class="tab"
aria-label="Your Nekos"
checked
/>
<div class="*:size-4">
<PawPrint />
</div>
</label>
<div class="tab-content bg-base-100 border-base-300 p-4">
<YourDolls />
</div>
<input
type="radio"
name="app_menu_tabs"
class="tab"
aria-label="Friends"
/>
<label class="tab">
<input type="radio" name="app_menu_tabs" aria-label="Friends" />
<div class="*:size-4">
<Users />
</div>
</label>
<div class="tab-content bg-base-100 border-base-300 p-4">
<Friends />
</div>
<input
type="radio"
name="app_menu_tabs"
class="tab"
aria-label="Preferences"
/>
<div class="tab-content bg-base-100 border-base-300 p-4">
<Preferences />
<label class="tab">
<input type="radio" name="app_menu_tabs" aria-label="Modules" />
<div class="*:size-4">
<Blocks />
</div>
<input
type="radio"
name="app_menu_tabs"
class="tab"
aria-label="Modules"
/>
</label>
<div class="tab-content bg-base-100 border-base-300 p-4">
<Modules />
</div>
<label class="tab">
<input type="radio" name="app_menu_tabs" aria-label="Preferences" />
<div class="*:size-4">
<Settings />
</div>
</label>
<div class="tab-content bg-base-100 border-base-300 p-4">
<Preferences />
</div>
</div>
</div>
</div>