fixed welcome page and the header bar
This commit is contained in:
ghassan committed
1 parent
5cbb26608c
commit
5c9c4aaa2d
8 files changed
+1025
-16
No files matched your search
@@ -57,6 +57,73 @@
|
||||
background-color: #0b5ed7;
|
||||
border-color: #0a58ca;
|
||||
}
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.user-avatar-placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-icon-btn {
|
||||
position: relative;
|
||||
padding: 0.5rem;
|
||||
margin: 0 0.25rem;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.nav-icon-btn:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.notification-dropdown {
|
||||
min-width: 320px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.notification-item {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.notification-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.notification-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.notification-item.unread {
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@stack('styles')
|
||||
@@ -64,7 +131,7 @@
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ url('/') }}">
|
||||
<a class="navbar-brand" href="{{ Auth::check() ? route('clubs.explore') : url('/') }}">
|
||||
<img src="{{ asset('images/logo.png') }}" alt="TAKEONE" height="40">
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
|
||||
@@ -74,22 +141,60 @@
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<!-- Left Side Of Navbar -->
|
||||
<ul class="navbar-nav me-auto">
|
||||
@auth
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Marketplace</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('family.dashboard') }}">My Family</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('invoices.index') }}">Invoices</a>
|
||||
</li>
|
||||
@endauth
|
||||
</ul>
|
||||
|
||||
<!-- Right Side Of Navbar -->
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<!-- Authentication Links -->
|
||||
@auth
|
||||
<!-- Explore Button -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-icon-btn" href="{{ route('clubs.explore') }}" title="Explore">
|
||||
<i class="bi bi-compass" style="font-size: 1.25rem;"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Notifications Dropdown -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link nav-icon-btn dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Notifications">
|
||||
<i class="bi bi-bell" style="font-size: 1.25rem;"></i>
|
||||
<span class="notification-badge">3</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end notification-dropdown" aria-labelledby="notificationDropdown">
|
||||
<h6 class="dropdown-header">Notifications</h6>
|
||||
<div class="notification-item unread">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<strong>New Family Member</strong>
|
||||
<p class="mb-0 small text-muted">John Doe joined your family</p>
|
||||
</div>
|
||||
<small class="text-muted">2m</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-item unread">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<strong>Invoice Due</strong>
|
||||
<p class="mb-0 small text-muted">Payment due in 3 days</p>
|
||||
</div>
|
||||
<small class="text-muted">1h</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-item unread">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<strong>Welcome!</strong>
|
||||
<p class="mb-0 small text-muted">Thanks for joining TAKEONE</p>
|
||||
</div>
|
||||
<small class="text-muted">2d</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item text-center small" href="#">View All Notifications</a>
|
||||
</div>
|
||||
</li>
|
||||
@endauth
|
||||
|
||||
@guest
|
||||
@if (Route::has('login'))
|
||||
<li class="nav-item">
|
||||
@@ -105,14 +210,28 @@
|
||||
@else
|
||||
<li class="nav-item dropdown">
|
||||
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
|
||||
@if(Auth::user()->profile_picture)
|
||||
<img src="{{ asset('storage/' . Auth::user()->profile_picture) }}" alt="{{ Auth::user()->full_name }}" class="user-avatar">
|
||||
@else
|
||||
<span class="user-avatar-placeholder">
|
||||
{{ strtoupper(substr(Auth::user()->full_name, 0, 1)) }}
|
||||
</span>
|
||||
@endif
|
||||
{{ Auth::user()->full_name }}
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="{{ route('family.dashboard') }}">
|
||||
<i class="bi bi-people me-2"></i>Family
|
||||
</a>
|
||||
<a class="dropdown-item" href="{{ route('invoices.index') }}">
|
||||
<i class="bi bi-receipt me-2"></i>Invoices
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="{{ route('logout') }}"
|
||||
onclick="event.preventDefault();
|
||||
document.getElementById('logout-form').submit();">
|
||||
{{ __('Logout') }}
|
||||
<i class="bi bi-box-arrow-right me-2"></i>{{ __('Logout') }}
|
||||
</a>
|
||||
|
||||
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
|
||||
|
||||
Reference in new issue
Block a user