Initial commit: SIBU 2.0 MISSION

frontend/src/components/layouts/MainLayout.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import AppHeader from "../AppHeader.vue";
+import BottomNav from "../BottomNav.vue";
+import { useAuthStore } from "@/stores/auth";
+
+const authStore = useAuthStore();
+</script>
+
+<template>
+  <div class="main-layout">
+    <AppHeader />
+    <main class="main-content" :class="{ 'has-bottom-nav': authStore.isPassenger }">
+      <slot />
+    </main>
+    <BottomNav v-if="authStore.isPassenger" />
+  </div>
+</template>
+
+<style scoped>
+.main-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background: transparent; /* Permitir ver fondos de páginas */
+}
+
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: transparent; /* Permitir ver fondos de páginas */
+  display: flex;
+  flex-direction: column;
+}
+
+.has-bottom-nav {
+  padding-bottom: 70px;
+}
+
+@media (min-width: 900px) {
+  .has-bottom-nav {
+    padding-bottom: 0;
+  }
+}
+</style>