mirror of
https://github.com/Drop-OSS/drop-app.git
synced 2025-11-13 08:12:44 +10:00
02f8591a60
* Create debug.rs * Update settings.vue to add tab for debug * Update main.scss to add light theme * Update interface.vue to add light mode * Create debug.vue * Update debug.vue too add open log button * Update lib.rs * Update debug.rs * Update debug.rs * Update lib.rs * Update lib.rs * Update debug.rs * Update debug.vue * fix(debug): refactor and cleanup * revert(theme): revert light theming --------- Co-authored-by: DecDuck <declanahofmeyr@gmail.com>
84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
<template>
|
|
<div class="mx-auto max-w-7xl px-8">
|
|
<div class="border-b border-zinc-700 py-5">
|
|
<h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
|
|
Settings
|
|
</h3>
|
|
</div>
|
|
<div class="mt-5 flex flex-row gap-12">
|
|
<nav class="flex flex-col" aria-label="Sidebar">
|
|
<ul role="list" class="-mx-2 space-y-1">
|
|
<li v-for="(item, itemIdx) in navigation" :key="item.prefix">
|
|
<NuxtLink :href="item.route" :class="[
|
|
itemIdx === currentPageIndex
|
|
? 'bg-zinc-800/50 text-zinc-100'
|
|
: 'text-zinc-400 hover:bg-zinc-800/30 hover:text-zinc-200',
|
|
'transition group flex gap-x-3 rounded-md p-2 pr-12 text-sm font-semibold leading-6',
|
|
]">
|
|
<component :is="item.icon" :class="[
|
|
itemIdx === currentPageIndex
|
|
? 'text-zinc-100'
|
|
: 'text-zinc-400 group-hover:text-zinc-200',
|
|
'transition h-6 w-6 shrink-0',
|
|
]" aria-hidden="true" />
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="grow">
|
|
<NuxtPage />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
ArrowDownTrayIcon,
|
|
CubeIcon,
|
|
HomeIcon,
|
|
RectangleGroupIcon,
|
|
BugAntIcon,
|
|
} from "@heroicons/vue/16/solid";
|
|
import type { Component } from "vue";
|
|
import type { NavigationItem } from "~/types";
|
|
import { platform } from '@tauri-apps/plugin-os';
|
|
|
|
const navigation: Array<NavigationItem & { icon: Component }> = [
|
|
{
|
|
label: "Home",
|
|
route: "/settings",
|
|
prefix: "/settings",
|
|
icon: HomeIcon,
|
|
},
|
|
{
|
|
label: "Interface",
|
|
route: "/settings/interface",
|
|
prefix: "/settings/interface",
|
|
icon: RectangleGroupIcon,
|
|
},
|
|
{
|
|
label: "Downloads",
|
|
route: "/settings/downloads",
|
|
prefix: "/settings/downloads",
|
|
icon: ArrowDownTrayIcon,
|
|
},
|
|
{
|
|
label: "Debug Info",
|
|
route: "/settings/debug",
|
|
prefix: "/settings/debug",
|
|
icon: BugAntIcon,
|
|
},
|
|
];
|
|
|
|
const currentPlatform = platform();
|
|
switch (currentPlatform) {
|
|
case "linux":
|
|
navigation.splice(2, 0, { label: "Compatibility", route: "/settings/compatibility", prefix: "/settings/compatibility", icon: CubeIcon });
|
|
break;
|
|
}
|
|
|
|
const currentPageIndex = useCurrentNavigationIndex(navigation);
|
|
</script>
|