estel/playtool-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle home and common components

Browse Source
This commit is contained in:
Nicola Spadari
2025-02-08 14:27:49 +01:00
parent aa3fcc3960
commit 120e756b8d
13 changed files with 173 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/app.config.ts
View File

@@ -9,12 +9,25 @@ export default defineAppConfig({
}, },
ui: { ui: {
colors: { colors: {
primary: "green",
neutral: "zinc" neutral: "zinc"
}, },
button: { button: {
slots: { slots: {
base: "cursor-pointer" base: "cursor-pointer"
} }
},
navigationMenu: {
slots: {
link: "cursor-pointer",
},
variants: {
disabled: {
true: {
link: "cursor-text"
}
}
}
} }
} }
}); });

6
app/assets/css/main.css
View File

@@ -2,7 +2,7 @@
@import "@nuxt/ui"; @import "@nuxt/ui";
@theme { @theme {
--font-Heading: "Montserrat", sans-serif; --font-heading: "Montserrat", sans-serif;
--font-sans: "Inter", sans-serif; --font-sans: "Inter", sans-serif;
--color-primary: var(--ui-color-primary-500); --color-primary: var(--ui-color-primary-500);
@@ -21,10 +21,10 @@
.flex-center { .flex-center {
@apply flex justify-center items-center; @apply flex justify-center items-center;
} }
.absolute-center-h: { .absolute-center-h {
@apply left-1/2 transform -translate-x-1/2; @apply left-1/2 transform -translate-x-1/2;
} }
.absolute-center-v{ .absolute-center-v {
@apply top-1/2 transform -translate-y-1/2; @apply top-1/2 transform -translate-y-1/2;
} }
} }

4
app/assets/icons/logo.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.018652355298399925 149.6599884033203 150.74864196777344">
<path d="M74.59 150.73H4.11c-4 0-4.08-.08-4.08-4.15Q0 88.14 0 29.69c0-2.5.7-4.09 2.9-5.32 8.55-4.8 17-9.71 25.51-14.61 1.69-1 2.53-.64 2.52 1.38v2.28c0 27.38 0 54.77-.05 82.15a5.59 5.59 0 0 0 3.24 5.6Q53.3 112 72.3 123.2a4.62 4.62 0 0 0 5.18 0Q95 113 112.51 102.84a.92.92 0 0 1 .21-.13c6.06-1.78 6.63-6.17 6.57-11.77-.28-25.77-.12-51.56-.11-77.34v-2.28c0-1.83.8-2.29 2.38-1.4 2.65 1.48 5.31 3 7.93 4.49 6.06 3.52 12.08 7.11 18.17 10.58 1.79 1 2 2.49 2 4.27v117.15c0 4-.28 4.3-4.34 4.3H74.59z" />
<path d="M51.79 43.09V3.82C51.8.28 52 .07 55.5.05c2.87 0 5.74.09 8.61 0 2.23-.09 3 .84 2.93 3-.11 13 .56 26 .44 39-.15 16.21 0 32.43 0 48.64 0 3.66-.5 3.9-3.74 2-3.07-1.76-6.12-3.57-9.28-5.18a4.54 4.54 0 0 1-2.69-4.63c.08-13.26 0-26.52 0-39.77zM97.91 43.09v39.55a4.89 4.89 0 0 1-2.94 5c-3.22 1.66-6.25 3.69-9.42 5.45-2.51 1.39-3.41.87-3.33-2 .74-29.39.29-58.79.38-88.18 0-2.24.88-3 3-2.92 3 .11 6.08.16 9.12 0C97.31-.13 98 1 97.93 3.3c-.07 13.26 0 26.53 0 39.79z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

93
app/components/Site/Navbar.vue
View File

@@ -1,57 +1,70 @@
<template> <template>
<header class="top-0 z-10"> <header class="top-0 z-10">
<nav crate class="flex items-center justify-between py-6"> <UContainer class="md:py-6">
<div class="flex" lg="flex-1"> <UNavigationMenu
<NuxtLink to="/" class="home p-1.5 -m-1.5"> :items="mobileItems"
<SvgoLogo :font-controlled="false" class="size-8" /> variant="link"
</NuxtLink> :ui="{
</div> root: 'md:hidden'
<div class="flex" lg="hidden"> }"
<button type="button" class="inline-flex items-center justify-center rounded-md p-2.5 text-neutral-300 -m-2.5" @click="showSidebar = true"> />
<Icon name="heroicons-solid:bars-3" class="size-6" /> <UNavigationMenu
</button> :items="desktopItems"
</div> variant="link"
:ui="{
<UNavigationMenu :items="items" class="w-full justify-center" /> root: 'hidden md:flex'
}"
<div class="hidden" lg="flex flex-1 justify-end"> />
<p class="text-sm text-white font-semibold leading-6"> </UContainer>
v{{ tauriVersion }}
</p>
</div>
</nav>
</header> </header>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const { pages } = usePages();
const { showSidebar } = useSidebar(); const { showSidebar } = useSidebar();
const tauriVersion = await useTauriAppGetTauriVersion(); const tauriVersion = await useTauriAppGetTauriVersion();
const items = ref([ const mobileItems = ref<any[]>([
[
{ {
label: "Commands", avatar: {
to: "/commands", icon: "local:logo",
icon: "lucide:square-terminal" size: "xl",
ui: {
root: "bg-transparent"
}
}, },
to: "/"
}
],
[
{ {
label: "Notifications", icon: "lucide:menu",
to: "/notifications", onSelect: () => showSidebar.value = true
icon: "lucide:message-square-more" }
}, ]
]);
const desktopItems = ref<any[]>([
[
{ {
label: "OS Informations", avatar: {
to: "/os", icon: "local:logo",
icon: "lucide:info" size: "3xl",
ui: {
root: "group bg-transparent",
icon: "opacity-70 group-hover:opacity-100"
}
}, },
to: "/"
}
],
pages,
[
{ {
label: "Files", label: `v${tauriVersion}`,
to: "/notifications", disabled: true
icon: "lucide:file" }
}, ]
{
label: "Store",
to: "/store",
icon: "lucide:database"
},
]); ]);
</script> </script>

71
app/components/Site/Sidebar.vue
View File

@@ -1,49 +1,36 @@
<template> <template>
<Transition <USlideover :open="showSidebar" @update:open="showSidebar = false">
enter-from-class="opacity-0" enter-active-class="ease-in-out duration-500" enter-to-class="opacity-100" <template #title>
leave-from-class="opacity-100" leave-active-class="ease-in-out duration-500" leave-to-class="opacity-0" <div class="flex gap-x-3">
> <Icon name="local:logo" class="size-6" />
<div v-if="showSidebar" class="relative z-20" lg="hidden" role="dialog" aria-modal="true"> <span>NUXTOR</span>
<div class="fixed inset-0 overflow-hidden">
<div crate class="h-full flex flex-col overflow-y-auto bg-neutral-800/70 py-6 backdrop-blur-md">
<div class="flex items-center justify-between">
<NuxtLink to="/" class="p-1.5 -m-1.5">
<SvgoLogo :filled="true" :font-controlled="false" class="size-8" />
</NuxtLink>
<button type="button" class="m-2.5 rounded-md p-2.5 text-neutral-300" @click="showSidebar = false">
<Icon name="heroicons-solid:x-mark" class="size-6" />
</button>
</div> </div>
<div class="mt-6 flow-root"> </template>
<div class="-my-6 divide-y divide-gray-500/25"> <template #description>
<div class="py-6 space-y-2"> <VisuallyHidden>Description</VisuallyHidden>
<NavLink to="/commands"> </template>
Commands
</NavLink> <template #body>
<NavLink to="/notifications"> <UNavigationMenu
Notifications orientation="vertical"
</NavLink> :items="items"
<NavLink to="/os"> />
OS Informations </template>
</NavLink> </USlideover>
<NavLink to="/foo">
404
</NavLink>
</div>
<div class="py-6">
<p class="px-3 text-base text-white font-semibold leading-7 -mx-3">
v{{ tauriVersion }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</Transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const tauriVersion = await useTauriAppGetTauriVersion(); const { pages } = usePages();
const { showSidebar } = useSidebar(); const { showSidebar } = useSidebar();
const tauriVersion = await useTauriAppGetTauriVersion();
const items = ref<any[]>([
pages,
[
{
label: `v${tauriVersion}`,
disabled: true
}
]
]);
</script> </script>

15
app/composables/pages.ts Normal file
View File

@@ -0,0 +1,15 @@
export const usePages = () => {
const router = useRouter();
const pages = router.getRoutes().filter((route) => route.name !== "index" && route.name !== "all").map((route) => {
return {
label: route.meta.name,
to: route.path,
icon: route.meta.icon
};
});
return {
pages
};
};

5
app/pages/commands.vue
View File

@@ -30,6 +30,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
definePageMeta({
name: "Commands",
icon: "lucide:square-terminal"
});
const input = ref(""); const input = ref("");
const result = ref(""); const result = ref("");

5
app/pages/file.vue
View File

@@ -41,6 +41,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
definePageMeta({
name: "Files",
icon: "lucide:file"
});
const fileName = ref(""); const fileName = ref("");
const fileContent = ref(""); const fileContent = ref("");
const done = ref(false); const done = ref(false);

34
app/pages/index.vue
View File

@@ -1,40 +1,38 @@
<template> <template>
<div class="relative overflow-hidden px-6" lg="px-8"> <UContainer class="relative overflow-hidden h-screen">
<div class="grid mx-auto h-screen max-w-2xl place-content-center"> <div class="grid size-full place-content-center gap-y-8">
<SvgoLogo :filled="true" :font-controlled="false" class="mx-auto mb-8 size-40" /> <SvgoLogo :filled="true" :font-controlled="false" class="mx-auto size-40" />
<div class="text-center"> <div class="flex flex-col items-center gap-y-5 md:gap-y-7">
<h1 class="animate-pulse text-4xl text-light-300 font-bold tracking-wider font-heading" sm="text-6xl"> <h1 class="animate-pulse text-3xl sm:text-4xl text-pretty font-bold text-(--ui-text-highlighted) font-heading">
{{ app.name.toUpperCase() }} {{ app.name.toUpperCase() }}
</h1> </h1>
<p class="mt-5 flex gap-1 text-neutral-300 leading-8"> <p class="leading-7 text-pretty">
Powered by Powered by
<NuxtLink :to="app.nuxtSite" target="_blank" class="text-accent underline"> <ULink :to="app.nuxtSite" target="_blank" :external="true">
Nuxt 3 Nuxt 3
</NuxtLink> </ULink>
- -
<NuxtLink :to="app.tauriSite" target="_blank" class="text-accent underline"> <ULink :to="app.tauriSite" target="_blank" :external="true">
Tauri 2 Tauri 2
</NuxtLink> </ULink>
- -
<NuxtLink :to="app.NuxtUiSite" target="_blank" class="text-accent underline"> <ULink :to="app.nuxtUiSite" target="_blank" :external="true">
NuxtUI 3 NuxtUI 3
</NuxtLink> </ULink>
</p> </p>
<div class="mt-15"> <UButton :to="app.repo">
<Hyperlink :to="app.repo">
Star on GitHub Star on GitHub
</Hyperlink> </UButton>
</div>
</div> </div>
</div> </div>
<div class="fixed bottom-6 text-sm absolute-center-h"> <div class="fixed bottom-6 text-sm absolute-center-h">
<p class="text-sm text-neutral-500"> <p class="text-sm text-(--ui-text-muted)">
Made by {{ app.author }} Made by {{ app.author }}
</p> </p>
</div> </div>
</div> </UContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

5
app/pages/notifications.vue
View File

@@ -35,6 +35,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
definePageMeta({
name: "Notifications",
icon: "lucide:message-square-more"
});
const notificationTitle = ref(""); const notificationTitle = ref("");
const notificationBody = ref(""); const notificationBody = ref("");
const permissionError = ref(false); const permissionError = ref(false);

5
app/pages/os.vue
View File

@@ -14,6 +14,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
definePageMeta({
name: "OS Informations",
icon: "lucide:info"
});
const currentPlatform = await useTauriOsPlatform(); const currentPlatform = await useTauriOsPlatform();
const currentArch = await useTauriOsArch(); const currentArch = await useTauriOsArch();
const currentVersion = await useTauriOsVersion(); const currentVersion = await useTauriOsVersion();

5
app/pages/store.vue
View File

@@ -30,6 +30,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
definePageMeta({
name: "Store",
icon: "lucide:database"
});
const input = ref(""); const input = ref("");
const result = ref(""); const result = ref("");
const autosave = ref(false); const autosave = ref(false);

8
nuxt.config.ts
View File

@@ -27,6 +27,14 @@ export default defineNuxtConfig({
css: [ css: [
"@/assets/css/main.css" "@/assets/css/main.css"
], ],
icon: {
customCollections: [
{
prefix: "local",
dir: "./app/assets/icons"
}
]
},
svgo: { svgo: {
autoImportPath: "@/assets/" autoImportPath: "@/assets/"
}, },