refactor(ui): better nav

Signed-off-by: Neko Ayaka <[email protected]>

Author: nekomeowww

app/components/Generate.vue

@@ -58,12 +58,8 @@ onMounted(() => {
         <span text-right md:text-left>{{ framePerSecond.toFixed(2) }}</span>
       </div>
     </Collapsable>
-    <div
-      w-full flex flex-col items-center pb-6
-      max-h="[calc(100vh-250px)]"
-      max-w="[calc(100vh-250px)]"
-    >
-      <div class="relative h-full w-full">
+    <div w-full flex flex-col items-center>
+      <div relative w-full>
         <div
           class="aspect-square [&>svg]:h-full [&>svg]:w-full"
           h-full w-full overflow-hidden rounded-lg

app/layouts/default.vue

@@ -1,28 +1,32 @@
 <template>
-  <main h-full>
-    <div flex flex-col gap-4 px-4 pb-4 pt-4>
-      <div flex items-center gap-2 text-4xl>
-        <img src="/logo.svg" alt="Qrs" size-1em>
-        <h1>
-          Qrs
-        </h1>
-      </div>
-      <div h-full flex gap-8>
-        <NuxtLink op70 hover="text-blue" duration-300 transition="all ease-in-out" to="/" active-class="!op100" flex="~ items-center gap-1">
-          <span i-carbon-upload inline-block />
-          Transfer
-        </NuxtLink>
-        <NuxtLink op70 hover="text-blue" duration-300 transition="all ease-in-out" to="/scan" active-class="!op100" flex="~ items-center gap-1">
-          <span i-carbon-download inline-block />
-          Receive
-        </NuxtLink>
-      </div>
-    </div>
-    <slot />
-    <div flex flex-col items-center px-4 py-2>
-      <a href="https://github.com/qqrss/qrs" target="_blank" op70 hover="text-blue" duration-300 transition="all ease-in-out" flex="~ items-center gap-1">
-        <span i-carbon:logo-github inline-block /><span>GitHub</span>
-      </a>
-    </div>
-  </main>
+  <div h-full w-full flex flex-col>
+    <header flex flex-col gap-4 px-4 pb-4 pt-4>
+      <nav flex items-center>
+        <div w-40 flex items-center gap-2 text-4xl>
+          <img src="/logo.svg" alt="Qrs" size-1em>
+          <h1>
+            Qrs
+          </h1>
+        </div>
+        <div h-full flex flex-1 justify-center gap-8 text-lg>
+          <NuxtLink op70 hover="text-blue" duration-300 transition="all ease-in-out" to="/" active-class="!op100" flex="~ items-center gap-1">
+            <span i-carbon-upload inline-block />
+            Transfer
+          </NuxtLink>
+          <NuxtLink op70 hover="text-blue" duration-300 transition="all ease-in-out" to="/scan" active-class="!op100" flex="~ items-center gap-1">
+            <span i-carbon-download inline-block />
+            Receive
+          </NuxtLink>
+        </div>
+        <div w-40 flex justify-end text-2xl>
+          <a href="https://github.com/qqrss/qrs" target="_blank" op70 hover="text-blue" duration-300 transition="all ease-in-out" flex="~ items-center gap-1">
+            <span i-carbon:logo-github inline-block />
+          </a>
+        </div>
+      </nav>
+    </header>
+    <main h-full w-full flex-1>
+      <slot />
+    </main>
+  </div>
 </template>

app/pages/index.vue

@@ -47,7 +47,7 @@ async function onFileChange(file?: File) {
 </script>
 
 <template>
-  <div px="4" flex="~ col" w-full gap-6 py-2>
+  <div px="4" flex="~ col" h-full w-full gap-4 py-2>
     <div flex="~ col sm:row" gap="6 sm:2">
       <InputFile @file="onFileChange">
         <div text="neutral-600 dark:neutral-400" min-w-46 flex justify-center px-4 py-2>
@@ -71,18 +71,21 @@ async function onFileChange(file?: File) {
         />
       </div>
     </div>
-    <div v-if="readPhase === ReadPhase.Ready && data" h-full w-full flex justify-center>
+    <div
+      v-if="readPhase === ReadPhase.Ready && data"
+      h-full w-full flex justify-center
+    >
       <Generate
         :max-scans-per-second="throttledFps"
         :data="data"
         :filename="filename"
         :content-type="contentType"
-        h-full w-full
+        w-full
       />
     </div>
     <InputFile
       v-else
-      min-h="[calc(100vh-290px)] sm:[calc(100vh-240px)]" h-full w-full
+      h-full w-full
       text="neutral-600 dark:neutral-400"
       @file="onFileChange"
     />

app/pages/scan.vue

@@ -5,7 +5,7 @@ const throttledFps = useDebounce(fps, 500)
 </script>
 
 <template>
-  <div px-4 pt-4 space-y-4 min-h="[calc(100vh-160px)]">
+  <div px-4 pt-4 space-y-4>
     <div w-full inline-flex flex-row items-center>
       <span min-w-40>
         <span pr-2 text-zinc-400>Ideal scans</span>