vuetify, pinia, navbar, footer

app/components/NavBar.vue

@@ -1,34 +1,47 @@
 <template>
 <!-- Toolbar at the top of the screen -->
-    <v-app-bar color="primary" height="48">
+    <v-app-bar color="rgba(27, 94, 32, 0.8)" height="48">
         <!-- Title of the application with adjusted margin and font size -->
-        <v-app-bar-title class="text-h6 ms-3">
+        <v-app-bar-title class="text-h6 ms-3 text-white">
             <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
 
-            <span class="ms-1">My Application</span>
+            <span class="ms-1 text-white">Listas de Front</span>
         </v-app-bar-title>
 
         <!-- Spacer to push the following elements to the right -->
         <v-spacer />
 
         <!-- Menu icons on the right side of the toolbar -->
-        <v-btn icon="mdi-home" @click="navigateTo('/')"></v-btn>
+        
 
     </v-app-bar>
 
-    <!-- Navigation drawer for menu actions -->
-    <v-navigation-drawer v-model="drawer">
-        <v-list>
-            <!-- Menu items in the drawer with icons -->
-            <v-list-item @click="navigateTo('/')" title="Home" prepend-icon="mdi-home"></v-list-item>
 
+      <v-navigation-drawer
+        v-model="drawer"
+        temporary
+      >
+        <v-list-item
+          prepend-avatar="https://randomuser.me/api/portraits/men/78.jpg"
+          title="John Leider"
+        ></v-list-item>
+
+        <v-divider></v-divider>
+
+        <v-list density="compact" nav>
+          <v-list-item prepend-icon="mdi-home" title="Home" value="home" @click="navigateTo('/')"></v-list-item>
+          <v-list-item prepend-icon="mdi-login" title="Login" value="login" @click="navigateTo('/login')"></v-list-item>
+          <v-list-item prepend-icon="mdi-account-plus-outline" title="Register" value="register" @click="navigateTo('/register')"></v-list-item>
+          <v-list-item prepend-icon="mdi-lock-reset" title="Forgot" value="forgot" @click="navigateTo('/forgot-password')"></v-list-item>
         </v-list>
-    </v-navigation-drawer>
+      </v-navigation-drawer>
+
 </template>
 
 <script setup>
+import { ref } from 'vue';
 // Drawer state to open/close the navigation drawer
-const drawer = shallowRef(false);
+const drawer = ref(false);
 </script>
 
 <style>

app/pages/Login.vue

@@ -0,0 +1,123 @@
+<template>
+  <v-app>
+    <v-main>
+      <v-container class="fill-height" fluid>
+        <v-row align="center" justify="center">
+          <v-col cols="12" sm="8" md="6" lg="4">
+            <v-card class="elevation-12">
+              <v-toolbar color="green-darken-2" dark flat>
+                <v-toolbar-title>Iniciar Sesión</v-toolbar-title>
+                <v-spacer />
+                <v-tooltip bottom>
+                  <template v-slot:activator="{ on }">
+                    <v-btn icon large>
+                      <v-icon>mdi-help-circle</v-icon>
+                    </v-btn>
+                  </template>
+                  <span>Ayuda</span>
+                </v-tooltip>
+              </v-toolbar>
+
+              <v-card-text>
+                <v-form @submit.prevent="login">
+                  <v-text-field
+                    v-model="username"
+                    label="Nombre de usuario"
+                    name="username"
+                    prepend-icon="mdi-account"
+                    type="text"
+                    :rules="usernameRules"
+                    required
+                  />
+
+                  <v-text-field
+                    v-model="password"
+                    label="Contraseña"
+                    name="password"
+                    prepend-icon="mdi-lock"
+                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+                    :type="showPassword ? 'text' : 'password'"
+                    @click:append="showPassword = !showPassword"
+                    :rules="passwordRules"
+                    required
+                  />
+
+                  <v-checkbox
+                    v-model="remember"
+                    label="Recordar sesión"
+                    color="green-darken-2"
+                  />
+
+                  <v-btn
+                    type="submit"
+                    color="green-darken-2"
+                    block
+                    :loading="loading"
+                    dark
+                  >
+                    Iniciar Sesión
+                  </v-btn>
+                </v-form>
+              </v-card-text>
+
+              <v-card-actions>
+                <v-spacer />
+                <v-btn text color="green-darken-2" to="/register">Registrarse</v-btn>
+                <v-btn text color="green-darken-1" to="/forgot-password"
+                  >¿Olvidaste tu contraseña?</v-btn
+                >
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const username = ref("");
+const password = ref("");
+const remember = ref(false);
+const showPassword = ref(false);
+const loading = ref(false);
+
+const usernameRules = [
+  (v) => !!v || "El nombre de usuario es requerido",
+  (v) => (v && v.length >= 3) || "El usuario debe tener al menos 3 caracteres",
+];
+
+const passwordRules = [
+  (v) => !!v || "La contraseña es requerida",
+  (v) => (v && v.length >= 6) || "La contraseña debe tener al menos 6 caracteres",
+];
+
+const login = () => {
+  loading.value = true;
+
+  // Simular una llamada a API
+  setTimeout(() => {
+    loading.value = false;
+    // Redirigir al dashboard después del login
+    router.push("/dashboard");
+  }, 2000);
+};
+</script>
+
+<style scoped>
+.fill-height {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+}
+
+/* Opcional: Personalización adicional del tema verde */
+.v-btn--active,
+.v-btn:hover {
+  background-color: rgba(27, 94, 32, 0.8) !important;
+}
+</style>

app/pages/forgot-password.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-container
+    class="fill-height d-flex flex-column align-center justify-center text-center"
+  >
+    <h1>Forgot Password</h1>
+  </v-container>
+</template>
+
+<script setup></script>

app/pages/register.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-container
+    class="fill-height d-flex flex-column align-center justify-center text-center"
+  >
+    <h1>Register</h1>
+  </v-container>
+</template>
+
+<script setup></script>
+
+<style></style>