appbar

RedenMC · Apr 26, 2024 · 1e753d0 · 1e753d0
1 parent a379f6d
commit 1e753d0
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 43 deletions.
diff --git a/src/appbar/RedenAppBar.vue b/src/appbar/RedenAppBar.vue
@@ -1,53 +1,95 @@
 <script setup lang="ts">
+import '@/main.css';
 import SearchButton from './SearchButton.vue';
 import TranslateButton from './TranslateButton.vue';
-import '@/main.css';
 import AccountButton from '@/appbar/AccountButton.vue';
-import { discordInvite, theme } from '@/constants';
+import { discordInvite, githubLink, theme } from '@/constants';
 import { useAppStore } from '@/store/app';
 import { useDisplay } from 'vuetify';
 
-const { mobile } = useDisplay();
+const { xs } = useDisplay();
 function toggleTheme() {
   theme.value = theme.value === 'light' ? 'dark' : 'light';
   useAppStore().setTheme(theme.value);
 }
 </script>
-
 <template>
-  <v-app-bar :elevation="2" color="transparent" class="reden-app-bar">
+  <v-app-bar :elevation="2" class="reden-app-bar">
     <template #prepend>
-      <v-menu v-show="mobile" :close-on-content-click="true">
+      <v-btn title="Home" href="/" class="custom-height" style="display: flex">
+        <img src="../../public/favicon.ico" alt="Reden" sizes="26px" style="image-rendering: pixelated;" />
+        <span class="text-h4 font-weight-bold">Reden</span>
+      </v-btn>
+      <v-btn
+        title="Download"
+        href="/download"
+        icon="mdi-download"
+      >
+      </v-btn>
+    </template>
+    <template #append>
+      <v-btn v-if="!xs"
+             icon="mdi-github"
+             title="Github"
+             :href="githubLink"
+      />
+      <v-btn v-if="!xs"
+             icon="custom:DiscordIcon"
+             title="Discord"
+             :href="discordInvite"
+      />
+      <SearchButton />
+      <v-btn v-if="!xs"
+             :icon="theme === 'light' ? 'mdi-weather-night' : 'mdi-weather-sunny'"
+             title="Toggle Theme"
+             @click="toggleTheme"
+      />
+      <TranslateButton />
+      <AccountButton v-if="!xs" />
+      <v-menu v-show="xs" class="xs-show" v-if="xs">
         <template #activator="{ props }">
           <v-btn
-            class="mobile-show"
             icon="mdi-menu"
             title="Menu"
             v-bind="props"
           />
         </template>
-
         <v-list class="w-100">
-          <v-list-item href="/">
+          <v-list-item :href="useAppStore().logined ? '/home' : '/login'">
             <template #prepend>
-              <v-icon>mdi-home</v-icon>
+              <v-icon>mdi-account</v-icon>
             </template>
-            <v-list-item-title> Home </v-list-item-title>
+            <v-list-item-title>Account</v-list-item-title>
           </v-list-item>
-          <v-list-item href="/feature">
+          <v-divider />
+          <v-list-item @click="toggleTheme">
             <template #prepend>
-              <v-icon>mdi-view-dashboard</v-icon>
+              <v-icon :icon="theme === 'light' ? 'mdi-weather-night' : 'mdi-weather-sunny'"/>
             </template>
-            <v-list-item-title> Features </v-list-item-title>
+            <v-list-item-title>Toggle Theme</v-list-item-title>
           </v-list-item>
-          <v-divider />
+          <v-list-item :href="discordInvite">
+            <template #prepend>
+              <div style="opacity: 0.65">
+                <v-icon>custom:DiscordIcon</v-icon>
+              </div>
+            </template>
+            <v-list-item-title  style="margin-left: 32px;">Discord</v-list-item-title>
+          </v-list-item>
+          <v-list-item :href="githubLink">
+            <template #prepend>
+              <v-icon>mdi-github</v-icon>
+            </template>
+            <v-list-item-title>Github</v-list-item-title>
+          </v-list-item>
+          <!--
           <template v-if="useAppStore().logined">
             <v-list-item href="/home">
               <template #prepend>
                 <v-avatar
                   v-if="useAppStore().userCache?.avatarUrl"
                   :size="40"
-                  :image="useAppStore().userCache?.avatarUrl"
+                  :image="useAppStore().userCache?.avatarUrl || ''"
                 />
                 <v-icon v-else> mdi-account</v-icon>
               </template>
@@ -74,6 +116,7 @@ function toggleTheme() {
               <v-list-item-title> Register </v-list-item-title>
             </v-list-item>
           </template>
+          -->
           <template v-if="useAppStore().userCache?.isStaff">
             <v-divider />
             <v-list-item href="/admin/users">
@@ -85,36 +128,13 @@ function toggleTheme() {
           </template>
         </v-list>
       </v-menu>
-      <v-btn v-show="!mobile" icon="mdi-home" title="Home" href="/" />
-    </template>
-    <p class="text-h5"></p>
-    <template #append>
-      <v-btn
-        class="mobile-hide"
-        icon="mdi-github"
-        title="Github"
-        href="https://github.com/zly2006/reden-is-what-we-made"
-      />
-      <v-btn
-        class="mobile-hide"
-        icon="custom:DiscordIcon"
-        title="Discord"
-        :href="discordInvite"
-      />
-      <v-btn
-        :icon="theme === 'light' ? 'mdi-weather-night' : 'mdi-weather-sunny'"
-        @click="toggleTheme"
-        title="Toggle Theme"
-      />
-      <TranslateButton />
-      <SearchButton />
-      <AccountButton />
     </template>
   </v-app-bar>
 </template>
 
 <style scoped>
 .reden-app-bar {
+  background-color: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
 }
 </style>
diff --git a/src/appbar/TranslateButton.vue b/src/appbar/TranslateButton.vue
@@ -23,7 +23,7 @@ export default {
   <div class="text-center">
     <v-menu :close-on-content-click="true">
       <template #activator="{ props }">
-        <v-btn icon="mdi-translate" v-bind="props" />
+        <v-btn icon="mdi-web" title="Language" v-bind="props" />
       </template>
 
       <v-list>

diff --git a/src/constants.ts b/src/constants.ts
@@ -5,6 +5,7 @@ import { toast } from 'vuetify-sonner';
 export const reCAPTCHAKey = '6Lczc24pAAAAAAxzBZbRy8CZc_ba06Qn_3OJ_Vg-';
 export const cloudflareCAPTCHAKey = '0x4AAAAAAARtCTyyGc1nbVUm';
 export const discordInvite = 'https://discord.gg/fCxmEyFgAd';
+export const githubLink = "https://github.com/zly2006/reden-is-what-we-made";
 export const theme = ref(useAppStore().theme);
 
 export type Profile = {

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import RedStoneSection from '@/components/RedStoneSection.vue';
 import RedstoneSectionTitle from '@/components/RedstoneSectionTitle.vue';
 import Feature from '@/views/Feature.vue';
-import { discordInvite } from '@/constants';
+import { discordInvite, githubLink } from '@/constants';
 
 const { t } = useI18n();
 
@@ -39,7 +39,7 @@ document.title = t('reden.title.home') + ' - Reden';
         </v-btn>
         <v-btn
           class="main-button"
-          href="https://github.com/zly2006/reden-is-what-we-made"
+          :href="githubLink"
           prepend-icon="mdi-github"
           size="x-large"
           rounded="rounded"