📱 Halfway to responsive

This commit is contained in:
LittleSheep 2025-03-20 22:07:26 +08:00
parent 95e0d3fb29
commit f97310c01d
5 changed files with 58 additions and 12 deletions

View File

@ -22,8 +22,8 @@ const { t } = useI18n()
const projects: { [id: string]: [string, string] } = {
"solar-network": ["Solar Network", "https://solsynth.dev/products/solar-network"],
"capital": ["Capital", "https://git.solsynth.dev/Goatworks/Capital"],
"passport": ["Hydrogen.Passport", "https://git.solsynth.dev/Hydrogen/Passport"],
"paperclip": ["Hydrogen.Paperclip", "https://git.solsynth.dev/Hydrogen/Paperclip"],
"passport": ["HyperNet.Passport", "https://git.solsynth.dev/HyperNet/Passport"],
"paperclip": ["HyperNet.Paperclip", "https://git.solsynth.dev/HyperNet/Paperclip"],
"roadsign": ["RoadSign", "https://git.solsynth.dev/Goatworks/RoadSign"],
}
</script>

View File

@ -1,18 +1,34 @@
<template>
<v-app-bar app flat color="surface" class="app-bar-blur">
<v-container fluid class="mx-auto d-flex align-center justify-center pr-8">
<v-container fluid class="mx-auto d-flex align-center justify-center pr-8 relative">
<v-app-bar-nav-icon @click="openDrawer = !openDrawer" />
<nuxt-link to="/" exact>
<h2>Solsynth LLC</h2>
<h2 v-if="isLargeScreen">Solsynth LLC</h2>
<v-icon v-else icon="mdi-home" />
</nuxt-link>
<v-spacer></v-spacer>
<div class="flex gap-2">
<v-btn to="/products" exact prepend-icon="mdi-shape">{{ t("navProducts") }}</v-btn>
<v-btn to="/posts" exact prepend-icon="mdi-note-text">{{ t("navPosts") }}</v-btn>
<v-btn to="/gallery" exact prepend-icon="mdi-image-multiple">{{ t("navGallery") }}</v-btn>
<div class="absolute left-0 right-0 flex justify-center gap-2 w-screen">
<v-btn
v-if="isLargeScreen"
v-for="item in navItems"
:to="item.to"
exact
:prepend-icon="item.icon"
>{{ t(item.title) }}</v-btn
>
<v-menu location="bottom center" v-else>
<template v-slot:activator="{ props }">
<v-btn v-bind="props" icon="mdi-dots-horizontal-circle" slim size="small" />
</template>
<v-list nav slim class="w-[280px]">
<v-list-item v-for="item in navItems" :to="item.to" :prepend-icon="item.icon">
<v-list-item-title>{{ t(item.title) }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
<v-spacer></v-spacer>
@ -47,9 +63,38 @@
</template>
<script setup lang="ts">
import { useBreakpoints, breakpointsVuetifyV3 } from "@vueuse/core"
const { t } = useI18n()
const openDrawer = ref(false)
const breakpoints = useBreakpoints(breakpointsVuetifyV3)
const isLargeScreen = computed(() => breakpoints.isGreaterOrEqual("md").valueOf())
interface NavItem {
icon: string
title: string
to: string
}
const navItems: NavItem[] = [
{
icon: "mdi-shape",
title: "navProducts",
to: "/products",
},
{
icon: "mdi-note-text",
title: "navPosts",
to: "/posts",
},
{
icon: "mdi-image-multiple",
title: "navGallery",
to: "/gallery",
},
]
</script>
<style lang="css" scoped>

View File

@ -18,6 +18,7 @@
"@nuxtjs/sitemap": "^6.1.5",
"@octokit/rest": "^21.1.1",
"@pinia/nuxt": "^0.5.5",
"@vueuse/core": "^13.0.0",
"@vueuse/motion": "^3.0.3",
"feed": "^4.2.2",
"nuxt": "^3.16.0",

View File

@ -46,8 +46,8 @@
<span>Solar Network Attachment Web Preview</span>
<span
>Powered by
<a class="underline" target="_blank" href="https://git.solsynth.dev/Hydrogen/Paperclip"
>Hydrogen.Paperclip</a
<a class="underline" target="_blank" href="https://git.solsynth.dev/HyperNet/Paperclip"
>HyperNet.Paperclip</a
></span
>
</div>

View File

@ -7,7 +7,7 @@
<v-avatar :image="urlOfAvatar" />
<div class="flex flex-col">
<span>{{ auth.userinfo?.nick }} <span class="text-xs">@{{ auth.userinfo?.name }}</span></span>
<span class="text-sm">{{ auth.userinfo?.description }}</span>
<span class="text-sm">{{ auth.userinfo?.profile?.description }}</span>
</div>
</div>
@ -39,7 +39,7 @@
</v-card-text>
</v-card>
<v-card class="w-28 aspect-square" to="/docs">
<v-card class="w-28 aspect-square" href="https://kb.solsynth.dev" target="_blank">
<v-card-text class="flex flex-col justify-center items-center text-center h-full">
<v-icon icon="mdi-library" size="32" />
<span class="text-sm mt-1.75">Knowledge Base</span>