diff --git a/app/layouts/default.vue b/app/layouts/default.vue index c38e2ec..b4d3765 100644 --- a/app/layouts/default.vue +++ b/app/layouts/default.vue @@ -15,11 +15,14 @@ - + @@ -31,7 +34,7 @@ const { user } = useAuth(); .default-layout { display: flex; flex-direction: column; - height: 100vh; + min-height: 100vh; /* Use min-height to allow content to push height */ background-color: #eef5ff; color: #333; } @@ -53,17 +56,28 @@ const { user } = useAuth(); .app-content { flex-grow: 1; - overflow-y: auto; + overflow-y: auto; /* Allow content to scroll */ padding: 15px; + /* Add padding-bottom to prevent content from being overlapped by fixed footer */ + padding-bottom: 60px; /* Adjust based on footer height */ +} + +.app-footer { + flex-shrink: 0; + position: fixed; /* Changed to fixed as per request */ + bottom: 0; + width: 100%; + background-color: #ffffff; + border-top: 1px solid #dcdcdc; + padding: 10px 0; + box-sizing: border-box; /* Include padding in width */ + z-index: 1000; /* Ensure footer is on top */ } .bottom-nav { display: flex; justify-content: space-around; - padding: 10px 0; - background-color: #ffffff; - border-top: 1px solid #dcdcdc; - flex-shrink: 0; + width: 100%; } .nav-item { @@ -71,10 +85,12 @@ const { user } = useAuth(); color: #4a90e2; padding: 5px 10px; border-radius: 5px; + text-align: center; + flex: 1; /* Distribute space evenly */ } .nav-item.router-link-exact-active { background-color: #eef5ff; font-weight: bold; } - + \ No newline at end of file