🔨 Responsive

.env.development

@@ -1,5 +1,5 @@
 VITE_OAUTH_REDIRECT_URL="https://discord.com/api/oauth2/authorize?client_id=238351507634913280&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Foauth2%2Fcallback&response_type=code&scope=identify"
-VITE_API_BASE_URL="http://localhost:8080/api/v2/"
+VITE_API_BASE_URL="https://next.api.claptrapbot.com/api/v2/"
 
 VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/"
 

src/components/Header/HeaderComponent.vue

@@ -6,8 +6,21 @@
         <span class="ml-3">Claptrap Bot</span>
       </div>
     </v-app-bar-title>
+    <v-spacer></v-spacer>
+    <v-btn icon to="/"><v-icon>mdi-home</v-icon></v-btn>
+    <v-app-bar-nav-icon
+      @click="drawer = !drawer"
+      v-if="mobile"
+    ></v-app-bar-nav-icon>
   </v-app-bar>
-  <v-navigation-drawer expand-on-hover rail position="right" v-if="isLoggedIn">
+  <v-navigation-drawer
+    :expand-on-hover="!mobile"
+    :rail="!mobile"
+    position="right"
+    v-if="isLoggedIn"
+    v-model="drawer"
+    :temporary="mobile"
+  >
     <v-list class="overflow-hidden">
       <v-list-item
         :prepend-avatar="getAvatar()"
@@ -35,11 +48,16 @@
 import { logout } from "@/services/authService";
 import { useUserStore } from "@/stores/user";
 import { storeToRefs } from "pinia";
+import { ref } from "vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 import ServerListComponent from "./ServerListComponent.vue";
 import SnackbarComponent from "./SnackbarComponent.vue";
 
 const userStore = useUserStore();
+const drawer = ref(true);
 const { userName, avatar, discriminator, isLoggedIn } = storeToRefs(userStore);
+const { mobile } = useDisplay();
+
 function getAvatar() {
   const avatarBaseUrl = import.meta.env.VITE_DISCORD_USER_AVATAR_URL;
   return avatarBaseUrl + userStore.discordId + "/" + avatar.value + ".png";

src/components/Header/ServerListComponent.vue

@@ -7,7 +7,8 @@
           :key="guild.id"
           :value="guild.id"
           active-color="yellow"
-          :to="`/guild/${guild.id}`"
+          :to="getToUrl(guild)"
+          :disabled="shouldBeDisabled(guild)"
         >
           <v-list-item-avatar
             start
@@ -39,16 +40,24 @@
 </template>
 
 <script setup lang="ts">
+import type { Guild } from "@/data/Guild";
 import { getInviteLink } from "@/services/guildService";
 import { useInviteLinkStore } from "@/stores/inviteLink";
 import { useMutualGuildsStore } from "@/stores/mutualGuilds";
 import { storeToRefs } from "pinia";
 import { onBeforeMount } from "vue";
+import {
+  useRouter,
+  type RouteLocation,
+  type RouteLocationRaw,
+} from "vue-router";
 
 const inviteLinkStore = useInviteLinkStore();
 
 const { inviteLink } = storeToRefs(inviteLinkStore);
 
+const router = useRouter();
+
 const mutualGuildsStore = useMutualGuildsStore();
 const { guilds, loaded } = storeToRefs(mutualGuildsStore);
 onBeforeMount(async () => {
@@ -57,6 +66,19 @@ onBeforeMount(async () => {
     inviteLinkStore.inviteLink = inviteLink.link;
   }
 });
+
+function shouldBeDisabled(guild: Guild) {
+  return router.currentRoute.value.name == "guildSetting" && !guild.canManage;
+}
+
+function getToUrl(guild: Guild): RouteLocationRaw {
+  return {
+    name: router.currentRoute.value.name?.toString(),
+    params: {
+      guildId: guild.id,
+    },
+  };
+}
 </script>
 
 <style scoped></style>

src/components/guild/home/SettingPreviewComponent.vue

@@ -1,11 +1,30 @@
 <template>
-  <v-card title="Guild Settings">
+  <v-card title="Guild Settings" :disabled="!properties.guild?.canManage">
     <template v-slot:prepend>
       <v-icon color="yellow" size="x-large">mdi-cog</v-icon>
     </template>
+    <v-card-text class="d-flex justify-center">
+      <v-btn
+        color="info"
+        prepend-icon="mdi-progress-wrench"
+        size="large"
+        :to="{
+          name: 'guildSetting',
+          params: { guildId: properties.guild?.id },
+        }"
+      >
+        Go to settings
+      </v-btn>
+    </v-card-text>
   </v-card>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { Guild } from "@/data/Guild";
+
+const properties = defineProps<{
+  guild?: Guild;
+}>();
+</script>
 
 <style scoped></style>

src/data/Guild.ts

@@ -1,8 +1,8 @@
-type Guild = {
+interface Guild {
   id: string;
   name: string;
   iconUrl: string;
   canManage: boolean;
-};
+}
 
 export type { Guild };

src/router/index.ts

@@ -3,6 +3,7 @@ import { getMutualGuilds } from "@/services/guildService";
 import { useMutualGuildsStore } from "@/stores/mutualGuilds";
 import { useUserStore } from "@/stores/user";
 import GuildHomeViewVue from "@/views/GuildHomeView.vue";
+import GuildSettingViewVue from "@/views/GuildSettingView.vue";
 import OauthCallbackViewVue from "@/views/oauth/OauthCallbackView.vue";
 import OauthRedirectViewVue from "@/views/oauth/OauthRedirectView.vue";
 import { createRouter, createWebHistory } from "vue-router";
@@ -36,6 +37,15 @@ const router = createRouter({
         title: "Home",
       },
     },
+    {
+      path: "/guild/:guildId/settings",
+      name: "guildSetting",
+      component: GuildSettingViewVue,
+      meta: {
+        requiresAuth: true,
+        title: "Settings",
+      },
+    },
     {
       path: "/oauth2/callback",
       name: "oauth-callback",
@@ -60,6 +70,7 @@ const router = createRouter({
 router.beforeEach((to, from) => {
   const store = useUserStore();
   document.title = `${import.meta.env.VITE_APP_TITLE} -  ${to.meta.title}`;
+
   if (to.meta.requiresAuth && !store.isLoggedIn) {
     return { name: "oauth-redirect" };
   } else {

src/views/GuildHomeView.vue

@@ -23,19 +23,17 @@
     </v-row>
     <v-row>
       <v-col>
-        <v-container>
-          <v-row>
-            <v-col cols="6">
-              <MusicPreviewComponent></MusicPreviewComponent>
-            </v-col>
-            <v-col cols="6">
-              <StatsPreviewComponent></StatsPreviewComponent>
-            </v-col>
-            <v-col cols="6">
-              <SettingPreviewComponent />
-            </v-col>
-          </v-row>
-        </v-container>
+        <v-row>
+          <v-col md="6" cols="12">
+            <MusicPreviewComponent></MusicPreviewComponent>
+          </v-col>
+          <v-col md="6" cols="12">
+            <StatsPreviewComponent></StatsPreviewComponent>
+          </v-col>
+          <v-col md="6" cols="12">
+            <SettingPreviewComponent :guild="guild" />
+          </v-col>
+        </v-row>
       </v-col>
     </v-row>
   </div>
@@ -43,12 +41,12 @@
 
 <script setup lang="ts">
 import { useMutualGuildsStore } from "@/stores/mutualGuilds";
+import { redirectIfNoGuild } from "@/tools/GuildTools";
 import { ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
 import MusicPreviewComponent from "../components/guild/home/MusicPreviewComponent.vue";
+import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
 import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue";
-import { redirectIfNoGuild } from "@/tools/GuildTools";
 
 const guildStore = useMutualGuildsStore();
 const route = useRoute();
@@ -56,6 +54,7 @@ const router = useRouter();
 
 const guild = ref(guildStore.getGuild(route.params.guildId as string));
 redirectIfNoGuild(guild.value, router);
+
 watch(
   () => route.params.guildId,
   (value, oldValue) => {

src/views/GuildSettingView.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>