RyderTech/nlcc-itinerary
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Mobile layout adjustments

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-06 17:29:10 -04:00
parent 2dbd4f6ba0
commit 966e244729
3 changed files with 65 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
pages/index.vue
View File

@@ -3,7 +3,48 @@
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div class="flex items-center justify-between">
<!-- Mobile Layout -->
<div class="md:hidden">
<div class="flex items-center justify-center mb-4">
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
</div>
<div class="flex flex-wrap items-center justify-center gap-2">
<ClientOnly fallback-tag="div">
<template v-if="isAuthenticated">
<NuxtLink
v-if="isAdmin"
to="/admin"
class="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-xs whitespace-nowrap"
>
Manage Sermons
</NuxtLink>
<NuxtLink
v-if="isAdmin"
to="/users"
class="px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium text-xs whitespace-nowrap"
>
Manage Users
</NuxtLink>
<button
@click="handleLogout"
class="px-3 py-2 text-xs font-medium text-blue-600 hover:text-blue-700"
>
Log Out
</button>
</template>
<NuxtLink
v-else
to="/login"
class="px-3 py-2 text-xs font-medium text-blue-600 hover:text-blue-700"
>
Log In
</NuxtLink>
</ClientOnly>
</div>
</div>
<!-- Desktop Layout -->
<div class="hidden md:flex items-center justify-between">
<div class="flex items-center space-x-4">
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
</div>
@@ -44,6 +85,7 @@
</ClientOnly>
</div>
</div>
<div class="text-center mt-6">
<h1 class="text-3xl font-bold text-gray-900">
Welcome to New Life!