📱 Halfway to responsive

components/Copyright.vue

@@ -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>

layouts/default.vue

@@ -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>

package.json

@@ -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",

pages/gallery/[id].vue

@@ -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>

pages/index.vue

@@ -12,7 +12,7 @@
           enter: {
             y: 0,
             opacity: 1,
-            transition: { duration: 0.8 }
+            transition: { duration: 0.8 },
           },
         }"
         :src="Logo"
@@ -107,11 +107,13 @@ const { data: products } = await useAsyncData("products", () => {
 const canvasRef = ref(null)
 
 onMounted(() => {
+  const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+
   const canvas: HTMLCanvasElement = canvasRef.value!
   const ctx = canvas.getContext("2d")!
-  const dpr = window.devicePixelRatio || 1;
-  canvas.width = window.innerWidth * dpr;
-  canvas.height = window.innerHeight * dpr;
+  const dpr = window.devicePixelRatio || 1
+  canvas.width = window.innerWidth * dpr
+  canvas.height = window.innerHeight * dpr
 
   let particles: Particle[] = []
   const numParticles = 100
@@ -139,10 +141,10 @@ onMounted(() => {
     }
 
     draw() {
-      ctx.beginPath();
-      ctx.arc(this.x * dpr, this.y * dpr, this.size * dpr, 0, Math.PI * 2);
-      ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
-      ctx.fill();
+      ctx.beginPath()
+      ctx.arc(this.x * dpr, this.y * dpr, this.size * dpr, 0, Math.PI * 2)
+      ctx.fillStyle = isDarkMode ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.8)"
+      ctx.fill()
     }
   }
 
@@ -156,17 +158,17 @@ onMounted(() => {
   function drawLines() {
     for (let i = 0; i < particles.length; i++) {
       for (let j = i + 1; j < particles.length; j++) {
-        let dx = particles[i].x - particles[j].x;
-        let dy = particles[i].y - particles[j].y;
-        let distance = Math.sqrt(dx * dx + dy * dy);
+        let dx = particles[i].x - particles[j].x
+        let dy = particles[i].y - particles[j].y
+        let distance = Math.sqrt(dx * dx + dy * dy)
 
         if (distance < 100) {
-          ctx.beginPath();
-          ctx.moveTo(particles[i].x * dpr, particles[i].y * dpr);
-          ctx.lineTo(particles[j].x * dpr, particles[j].y * dpr);
-          ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
-          ctx.lineWidth = 0.5 * dpr;
-          ctx.stroke();
+          ctx.beginPath()
+          ctx.moveTo(particles[i].x * dpr, particles[i].y * dpr)
+          ctx.lineTo(particles[j].x * dpr, particles[j].y * dpr)
+          ctx.strokeStyle = isDarkMode ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"
+          ctx.lineWidth = 0.5 * dpr
+          ctx.stroke()
         }
       }
     }

pages/users/me.vue

@@ -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>