estel/play
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: {
colors: {
primary: "green",
neutral: "zinc"
},
button: {
slots: {
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";
@theme {
--font-Heading: "Montserrat", sans-serif;
--font-heading: "Montserrat", sans-serif;
--font-sans: "Inter", sans-serif;
--color-primary: var(--ui-color-primary-500);
@@ -21,10 +21,10 @@
.flex-center {
@apply flex justify-center items-center;
}
.absolute-center-h: {
.absolute-center-h {
@apply left-1/2 transform -translate-x-1/2;
}
.absolute-center-v{
.absolute-center-v {
@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

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

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

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

@@ -1,49 +1,36 @@
<template>
<Transition
enter-from-class="opacity-0" enter-active-class="ease-in-out duration-500" enter-to-class="opacity-100"
leave-from-class="opacity-100" leave-active-class="ease-in-out duration-500" leave-to-class="opacity-0"
>
<div v-if="showSidebar" class="relative z-20" lg="hidden" role="dialog" aria-modal="true">
<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 class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/25">
<div class="py-6 space-y-2">
<NavLink to="/commands">
Commands
</NavLink>
<NavLink to="/notifications">
Notifications
</NavLink>
<NavLink to="/os">
OS Informations
</NavLink>
<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>
<USlideover :open="showSidebar" @update:open="showSidebar = false">
<template #title>
<div class="flex gap-x-3">
<Icon name="local:logo" class="size-6" />
<span>NUXTOR</span>
</div>
</div>
</Transition>
</template>
<template #description>
<VisuallyHidden>Description</VisuallyHidden>
</template>
<template #body>
<UNavigationMenu
orientation="vertical"
:items="items"
/>
</template>
</USlideover>
</template>
<script lang="ts" setup>
const tauriVersion = await useTauriAppGetTauriVersion();
const { pages } = usePages();
const { showSidebar } = useSidebar();
const tauriVersion = await useTauriAppGetTauriVersion();
const items = ref<any[]>([
pages,
[
{
label: `v${tauriVersion}`,
disabled: true
}
]
]);
</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>
<script lang="ts" setup>
definePageMeta({
name: "Commands",
icon: "lucide:square-terminal"
});
const input = ref("");
const result = ref("");

5
app/pages/file.vue
View File

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

36
app/pages/index.vue
View File

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

5
app/pages/notifications.vue
View File

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

5
app/pages/os.vue
View File

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

5
app/pages/store.vue
View File

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