Create sidebar

.env.example

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:9501

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+.env
 
 /cypress/videos/
 /cypress/screenshots/

src/App.vue

@@ -1,15 +1,17 @@
 <template>
   <v-app :class="ef">
-    <HeaderMenu />
+    <component :is="currentLayout" />
     <transition name="fade" mode="out-in">
-      <v-main class="d-flex flex-grow-1 main-container" style="margin-top: 64px">
+      <v-main class="main-container" :class="{ 'route-content-style': !isHomePage }">
         <RouterView />
-        <v-snackbar v-model="snackbarStore.snack.show" v-bind="snackbarStore.snack" location="top right">
+        <v-snackbar
+          v-model="snackbarStore.snack.show"
+          v-bind="snackbarStore.snack"
+          location="top right"
+        >
           {{ text }}
           <template #actions>
-            <v-btn variant="text" @click="snackbar = false">
-              Close
-            </v-btn>
+            <v-btn variant="text" @click="snackbarStore.hideSnackbar">Fechar</v-btn>
           </template>
         </v-snackbar>
       </v-main>
@@ -18,19 +20,51 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useTheme } from 'vuetify'
 import { useSnackbarStore } from '@/stores/snackbar'
 import HeaderMenu from '@/components/HeaderMenu.vue'
+import SideMenu from '@/components/dashboard/Sidebar.vue'
 
 const theme = useTheme()
 const snackbarStore = useSnackbarStore()
 const route = useRoute()
 
-const currentTheme = computed(() => theme.current.value)
+const sideMenuRoutes = [
+  '/profile',
+  '/onboarding',
+  '/products',
+  '/product/:uuid',
+  '/product/create',
+  '/squads/:uuid',
+  '/squad/:uuid',
+  '/squad/create/:productUuid',
+  '/squad/:uuid/update'
+]
 
-const ef = computed(() => (route.path === '/' ? 'homeBackgroundEffect' : '')) 
+const currentLayout = computed(() =>
+  route.matched.some((record) =>
+    sideMenuRoutes.some((pattern) =>
+      new RegExp(pattern.replace(':uuid', '[^/]+')).test(record.path)
+    )
+  )
+    ? SideMenu
+    : HeaderMenu
+)
+
+const isHomePage = computed(() => {
+  return ['/', '/login', '/registry'].includes(route.path)
+})
+const ef = computed(() => (route.path === '/' ? 'homeBackgroundEffect' : ''))
+
+const isMobile = ref(window.innerWidth <= 960)
+
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    isMobile.value = window.innerWidth <= 960
+  })
+})
 </script>
 
 <style lang="scss">
@@ -40,62 +74,64 @@ const ef = computed(() => (route.path === '/' ? 'homeBackgroundEffect' : ''))
 }
 
 .main-container {
-  margin-left: 240px;
-  margin-right: 240px;
-  padding: 0;
+  margin: 64px auto;
+  padding: 0 250px;
+  max-width: 100vw;
+  width: 100%;
 
   @media (max-width: 1500px) {
-    margin-left: 120px;
-    margin-right: 120px;
+    padding: 0 120px;
   }
 
   @media (max-width: 1300px) {
-    margin-left: 64px;
-    margin-right: 64px;
+    padding: 0 64px;
   }
 
   @media (max-width: 968px) {
-    margin-left: 32px;
-    margin-right: 32px;
+    padding: 0 32px;
   }
 
   @media (max-width: 600px) {
-    margin-left: 16px;
-    margin-right: 16px;
+    padding: 0 16px;
   }
 }
 
-h2 {
-  font-size: 36px;
-  font-family: 'Radio Canada', sans-serif;
-  font-weight: 700;
-  color: #62d4a4;
+.route-content-style {
+  padding: 0px 0px 0px 250px;
+  @media (max-width: 968px) {
+    padding: 0 32px;
+  }
+
+  @media (max-width: 600px) {
+    padding: 0 16px;
+  }
 }
 
-h3 {
-  font-size: 32px;
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: 'Radio Canada', sans-serif;
   font-weight: 700;
   color: #62d4a4;
 }
 
+h2 {
+  font-size: 2.25rem;
+}
+h3 {
+  font-size: 2rem;
+}
 h4 {
-  font-size: 22px;
-  font-family: 'Radio Canada', sans-serif;
-  font-weight: 700;
+  font-size: 1.375rem;
 }
-
 h5 {
-  font-size: 40px;
-  font-family: 'Inter', sans-serif;
-  font-weight: 600;
+  font-size: 2.5rem;
   color: #ffffff;
 }
-
 h6 {
-  font-size: 20px;
-  font-family: 'Radio Canada', sans-serif;
-  font-weight: 600;
+  font-size: 1.25rem;
   color: #ffffff;
 }
 </style>

src/components/HeaderMenu.vue

@@ -1,67 +1,74 @@
 <template>
-    <v-app-bar class="header" color="transparent" app elevation="4">
-        <div class="w-100 d-flex align-center justify-space-between main-container">
-            <a class="d-flex align-center logo" @click="navigateToHome">
-                <v-img height="36" width="36" :src="imgUrl" alt="Logo SouJunior" />
-                <h1 class="text-h5 font-weight-bold font-semibold primary-color ml-3 logo-text">
-                    SouJunior Labs
-                </h1>
-            </a>
-            <div class="d-flex align-center ga-2" v-if="!isMobile">
-                <v-btn variant="text" class="font-weight-semibold" :to="{ name: 'home' }"> Home </v-btn>
-                <v-btn v-if="logged" variant="text" class="font-weight-semibold" :to="{ name: 'onboarding' }">
-                    Onboarding
-                </v-btn>
-                <v-btn v-if="!logged" variant="text" class="font-weight-semibold" :to="{ name: 'login' }">
-                    Login
-                </v-btn>
-                <v-btn variant="text" class="font-weight-semibold" :to="{ name: 'products' }"> Produtos </v-btn>
-                <v-menu v-if="logged" open-on-hover>
-                    <template #activator="{ props }">
-                        <v-btn variant="text" class="font-weight-semibold" v-bind="props">
-                            {{ auth.getName() }}
-                            <v-icon right>mdi-chevron-down</v-icon>
-                        </v-btn>
-                    </template>
-                    <v-list>
-                        <v-list-item link :to="{ name: 'profile' }">
-                            <v-list-item-title>Profile</v-list-item-title>
-                        </v-list-item>
-                        <v-list-item link @click="auth.logout()">
-                            <v-list-item-title>Logout</v-list-item-title>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
-            </div>
-            <v-menu v-else>
-                <template #activator="{ props }">
-                    <v-btn icon v-bind="props">
-                        <v-icon>mdi-menu</v-icon>
-                    </v-btn>
-                </template>
-                <v-list>
-                    <v-list-item link :to="{ name: 'home' }">
-                        <v-list-item-title>Home</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item link v-if="logged" :to="{ name: 'onboarding' }">
-                        <v-list-item-title>Onboarding</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item link v-if="!logged" :to="{ name: 'login' }">
-                        <v-list-item-title>Login</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item link :to="{ name: 'products' }">
-                        <v-list-item-title>Produtos</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item link v-if="logged" :to="{ name: 'profile' }">
-                        <v-list-item-title>Profile</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item link v-if="logged" @click="auth.logout()">
-                        <v-list-item-title>Logout</v-list-item-title>
-                    </v-list-item>
-                </v-list>
-            </v-menu>
-        </div>
-    </v-app-bar>
+  <v-app-bar class="header" color="transparent" app elevation="4">
+    <div class="w-100 d-flex align-center justify-space-between main-container">
+      <a class="d-flex align-center logo" @click="navigateToHome">
+        <v-img height="36" width="36" :src="imgUrl" alt="Logo SouJunior" />
+        <h1 class="text-h5 font-weight-bold font-semibold primary-color ml-3 logo-text">
+          SouJunior Labs
+        </h1>
+      </a>
+      <div class="d-flex align-center ga-2" v-if="!isMobile">
+        <v-btn variant="text" class="font-weight-semibold" :to="{ name: 'home' }"> Home </v-btn>
+        <v-btn
+          v-if="logged"
+          variant="text"
+          class="font-weight-semibold"
+          :to="{ name: 'onboarding' }"
+        >
+          Onboarding
+        </v-btn>
+        <v-btn v-if="!logged" variant="text" class="font-weight-semibold" :to="{ name: 'login' }">
+          Login
+        </v-btn>
+        <v-btn v-if="logged" variant="text" class="font-weight-semibold" :to="{ name: 'products' }">
+          Produtos
+        </v-btn>
+        <v-menu v-if="logged" open-on-hover>
+          <template #activator="{ props }">
+            <v-btn variant="text" class="font-weight-semibold" v-bind="props">
+              {{ auth.getName() }}
+              <v-icon right>mdi-chevron-down</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item link :to="{ name: 'profile' }">
+              <v-list-item-title>Profile</v-list-item-title>
+            </v-list-item>
+            <v-list-item link @click="auth.logout()">
+              <v-list-item-title>Logout</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
+      <v-menu v-else>
+        <template #activator="{ props }">
+          <v-btn icon v-bind="props">
+            <v-icon>mdi-menu</v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item link :to="{ name: 'home' }">
+            <v-list-item-title>Home</v-list-item-title>
+          </v-list-item>
+          <v-list-item link v-if="logged" :to="{ name: 'onboarding' }">
+            <v-list-item-title>Onboarding</v-list-item-title>
+          </v-list-item>
+          <v-list-item link v-if="!logged" :to="{ name: 'login' }">
+            <v-list-item-title>Login</v-list-item-title>
+          </v-list-item>
+          <v-list-item link v-if="!logged" :to="{ name: 'products' }">
+            <v-list-item-title>Produtos</v-list-item-title>
+          </v-list-item>
+          <v-list-item link v-if="logged" :to="{ name: 'profile' }">
+            <v-list-item-title>Profile</v-list-item-title>
+          </v-list-item>
+          <v-list-item link v-if="logged" @click="auth.logout()">
+            <v-list-item-title>Logout</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </div>
+  </v-app-bar>
 </template>
 
 <script setup>
@@ -78,49 +85,49 @@ const auth = useAuthStore()
 const logged = computed(() => auth.getName() != '')
 
 const navigateToHome = () => {
-    router.push({ name: 'home' })
+  router.push({ name: 'home' })
 }
 
 const isMobile = computed(() => window.innerWidth <= 960)
 </script>
 
 <style lang="scss">
 .header {
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .main-container {
-    margin-left: 240px;
-    margin-right: 240px;
-    padding: 0;
+  margin-left: 240px;
+  margin-right: 240px;
+  padding: 0;
 
-    @media (max-width: 1600px) {
-        margin-left: 120px;
-        margin-right: 120px;
-    }
+  @media (max-width: 1600px) {
+    margin-left: 120px;
+    margin-right: 120px;
+  }
 
-    @media (max-width: 600px) {
-        margin-left: 16px;
-        margin-right: 16px;
-    }
+  @media (max-width: 600px) {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
 }
 
 .primary-color {
-    color: #06d7a0;
+  color: #06d7a0;
 }
 
 .logo {
-    cursor: pointer;
-    transition: ease-in-out 0.2s;
+  cursor: pointer;
+  transition: ease-in-out 0.2s;
 
-    &:hover {
-        filter: brightness(1.25);
-        transition: ease-in-out 0.2s;
-    }
+  &:hover {
+    filter: brightness(1.25);
+    transition: ease-in-out 0.2s;
+  }
 }
 
 .logo-text {
-    font-family: 'Radio Canada', serif !important;
+  font-family: 'Radio Canada', serif !important;
 }
-</style>
+</style>