📱 Halfway to responsive
This commit is contained in:
parent
95e0d3fb29
commit
f97310c01d
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user