Merge branch 'feat/theme/header' into develop
This commit is contained in:
kbe
157
app/views/components/_event_finder.html.erb
Executable file
157
app/views/components/_event_finder.html.erb
Executable file
@@ -0,0 +1,157 @@
|
||||
<!-- Event Finder Section -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="event-finder">
|
||||
<div class="finder-header">
|
||||
<h2 class="finder-title">Find Your Perfect Event</h2>
|
||||
<p class="finder-subtitle">Discover afterwork events tailored to your preferences</p>
|
||||
</div>
|
||||
|
||||
<form class="finder-form">
|
||||
<div class="finder-field">
|
||||
<label class="finder-label">
|
||||
<i data-lucide="calendar"></i>
|
||||
Date
|
||||
</label>
|
||||
<input type="date" class="finder-input focus-ring" id="event-date">
|
||||
</div>
|
||||
|
||||
<div class="finder-field">
|
||||
<label class="finder-label">
|
||||
<i data-lucide="map-pin"></i>
|
||||
City
|
||||
</label>
|
||||
<select class="finder-select focus-ring" id="event-city">
|
||||
<option value="">Choose a city</option>
|
||||
<option value="paris">Paris</option>
|
||||
<option value="london">London</option>
|
||||
<option value="berlin">Berlin</option>
|
||||
<option value="madrid">Madrid</option>
|
||||
<option value="barcelona">Barcelona</option>
|
||||
<option value="amsterdam">Amsterdam</option>
|
||||
<option value="rome">Rome</option>
|
||||
<option value="zurich">Zurich</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="finder-field">
|
||||
<label class="finder-label">
|
||||
<i data-lucide="users"></i>
|
||||
Event Type
|
||||
</label>
|
||||
<select class="finder-select focus-ring" id="event-type">
|
||||
<option value="">All types</option>
|
||||
<option value="networking">Networking</option>
|
||||
<option value="tech">Tech & Innovation</option>
|
||||
<option value="creative">Creative & Design</option>
|
||||
<option value="business">Business</option>
|
||||
<option value="startup">Startup</option>
|
||||
<option value="wine">Wine & Tasting</option>
|
||||
<option value="art">Art & Culture</option>
|
||||
<option value="music">Music & Entertainment</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="finder-field price-range">
|
||||
<label class="finder-label">
|
||||
<div class="price-range-label">
|
||||
<span>
|
||||
<i data-lucide="euro"></i>
|
||||
Price Range
|
||||
</span>
|
||||
<span class="price-value" id="price-display">€0 - €100</span>
|
||||
</div>
|
||||
</label>
|
||||
<div style="display: flex; gap: var(--space-3); align-items: center;">
|
||||
<input type="range" class="price-slider" id="price-min" min="0" max="100" value="0" style="flex: 1;">
|
||||
<span style="color: var(--color-neutral-500); font-weight: 600;">to</span>
|
||||
<input type="range" class="price-slider" id="price-max" min="0" max="100" value="100" style="flex: 1;">
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<button type="submit" class="finder-search-btn">
|
||||
<i data-lucide="search"></i>
|
||||
Find Events
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Event Finder Functionality
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const priceMin = document.getElementById('price-min');
|
||||
const priceMax = document.getElementById('price-max');
|
||||
const priceDisplay = document.getElementById('price-display');
|
||||
|
||||
if (priceMin && priceMax && priceDisplay) {
|
||||
function updatePriceDisplay() {
|
||||
const minVal = parseInt(priceMin.value);
|
||||
const maxVal = parseInt(priceMax.value);
|
||||
|
||||
// Ensure min doesn't exceed max
|
||||
if (minVal > maxVal) {
|
||||
priceMin.value = maxVal;
|
||||
}
|
||||
|
||||
// Ensure max doesn't go below min
|
||||
if (maxVal < minVal) {
|
||||
priceMax.value = minVal;
|
||||
}
|
||||
|
||||
const finalMin = Math.min(parseInt(priceMin.value), parseInt(priceMax.value));
|
||||
const finalMax = Math.max(parseInt(priceMin.value), parseInt(priceMax.value));
|
||||
|
||||
priceDisplay.textContent = `€${finalMin} - €${finalMax}`;
|
||||
}
|
||||
|
||||
priceMin.addEventListener('input', updatePriceDisplay);
|
||||
priceMax.addEventListener('input', updatePriceDisplay);
|
||||
|
||||
// Set default date to tomorrow
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
const dateInput = document.getElementById('event-date');
|
||||
if (dateInput) {
|
||||
dateInput.value = tomorrow.toISOString().split('T')[0];
|
||||
}
|
||||
}
|
||||
|
||||
// Form submission
|
||||
const finderForm = document.querySelector('.finder-form');
|
||||
if (finderForm) {
|
||||
finderForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = {
|
||||
date: document.getElementById('event-date').value,
|
||||
city: document.getElementById('event-city').value,
|
||||
type: document.getElementById('event-type').value,
|
||||
priceMin: priceMin ? priceMin.value : '',
|
||||
priceMax: priceMax ? priceMax.value : ''
|
||||
};
|
||||
|
||||
console.log('Search filters:', formData);
|
||||
|
||||
// Add loading state to button
|
||||
const searchBtn = document.querySelector('.finder-search-btn');
|
||||
if (searchBtn) {
|
||||
const originalText = searchBtn.innerHTML;
|
||||
searchBtn.innerHTML = '<div style="width: 20px; height: 20px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div> Searching...';
|
||||
|
||||
// Simulate search
|
||||
setTimeout(() => {
|
||||
searchBtn.innerHTML = originalText;
|
||||
alert('Search completed! Results would be displayed here.');
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,14 +1,14 @@
|
||||
<%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
|
||||
<%= link_to event_path(event.slug, event), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
|
||||
<%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
|
||||
<%= image_tag event.image, alt: event.name, class: "w-full h-full object-cover" if event.image.present? %>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
|
||||
<%= party.name %>
|
||||
<%= event.name %>
|
||||
</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||
<%= l(party.start_time, format: :short) %>
|
||||
<%= l(event.start_time, format: :short) %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,83 +1,41 @@
|
||||
<footer class="py-10 bg-neutral-100 text-neutral-600 border-t border-neutral-200">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Column 1: About -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-purple-500">À propos</h3>
|
||||
<p class="text-sm text-neutral-600 leading-relaxed">
|
||||
Aperonight est la plateforme qui connecte les amateurs de soirées aux meilleurs événements de leur ville.
|
||||
</p>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="text-neutral-500 hover:text-purple-500 transition-colors">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 20.128 22 15.991 22 12z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-neutral-500 hover:text-purple-500 transition-colors">
|
||||
<span class="sr-only">Instagram</span>
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.012-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 2: Quick Links -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-purple-500">Liens rapides</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><%= link_to "Accueil", "/", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
<li><%= link_to "Événements", "/events", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
<li><%= link_to "Organisateurs", "/organizers", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
<li><%= link_to "Support", "/support", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: Legal -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-purple-500">Légal</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><%= link_to "Conditions d'utilisation", "/terms", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
<li><%= link_to "Politique de confidentialité", "/privacy", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
<li><%= link_to "CGV", "/cgv", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
<li><%= link_to "Mentions légales", "/legal", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 4: Contact -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-purple-500">Contact</h3>
|
||||
<address class="not-italic text-sm text-neutral-600 space-y-2">
|
||||
<p>
|
||||
<span class="block font-medium">Email:</span>
|
||||
<a href="mailto:hello@aperonight.com" class="text-purple-500 hover:text-purple-400 transition-colors">
|
||||
hello@aperonight.com
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<span class="block font-medium">Support:</span>
|
||||
<a href="mailto:support@aperonight.com" class="text-purple-500 hover:text-purple-400 transition-colors">
|
||||
support@aperonight.com
|
||||
</a>
|
||||
</p>
|
||||
</address>
|
||||
<p class="text-xs text-neutral-500">
|
||||
Réponse sous 24h en semaine
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Bar -->
|
||||
<div class="mt-12 pt-8 border-t border-neutral-200">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||
<p class="text-sm text-neutral-500">
|
||||
© <%= Time.current.year %> Aperonight. Tous droits réservés.
|
||||
</p>
|
||||
<p class="text-xs text-neutral-400 mt-2 md:mt-0">
|
||||
Fait avec 💜 pour la communauté
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>Events</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">Find Events</a></li>
|
||||
<li><a href="#">Host an Event</a></li>
|
||||
<li><a href="#">Event Categories</a></li>
|
||||
<li><a href="#">Premium Events</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="footer-section">
|
||||
<h3>Community</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">Join Us</a></li>
|
||||
<li><a href="#">Member Benefits</a></li>
|
||||
<li><a href="#">Success Stories</a></li>
|
||||
<li><a href="#">Ambassador Program</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Support</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">Help Center</a></li>
|
||||
<li><a href="#">Contact Us</a></li>
|
||||
<li><a href="#">Safety Guidelines</a></li>
|
||||
<li><a href="#">Cancellation Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>Company</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">About Aperonight</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Press & Media</a></li>
|
||||
<li><a href="#">Partner With Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 Aperonight. All rights reserved. • <a href="#" style="color: var(--color-accent-400);">Privacy Policy</a> • <a href="#" style="color: var(--color-accent-400);">Terms of Service</a></p>
|
||||
</div>
|
||||
@@ -1,137 +1,137 @@
|
||||
<header class="shadow-sm border-b border-neutral-700">
|
||||
<div class="bg-neutral-900">
|
||||
<nav x-data="{ open: false }" class="bg-neutral-800 border-b border-neutral-700">
|
||||
<!-- Primary Navigation Menu -->
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<!-- Logo -->
|
||||
<div class="shrink-0 flex items-center">
|
||||
<%= link_to Rails.application.config.app_name, current_user ? "/dashboard" : "/", class: "text-xl font-bold text-white" %>
|
||||
</div>
|
||||
<!-- Navigation Links -->
|
||||
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex items-center">
|
||||
<%= link_to t('header.parties'), parties_path,
|
||||
class: "text-neutral-100 hover:text-primary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
%>
|
||||
<%= link_to t('header.concerts'), "#" ,
|
||||
class: "text-neutral-100 hover:text-primary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
%>
|
||||
</div>
|
||||
<header class="shadow-sm border-b border-neutral-700">
|
||||
<div class="bg-neutral-900">
|
||||
<nav x-data="{ open: false }" class="bg-neutral-800 border-b border-neutral-700">
|
||||
<!-- Primary Navigation Menu -->
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<!-- Logo -->
|
||||
<div class="shrink-0 flex items-center">
|
||||
<%= link_to Rails.application.config.app_name, current_user ? "/dashboard" : "/", class: "text-xl font-bold text-white" %>
|
||||
</div>
|
||||
<!-- Authentication Links -->
|
||||
<% if user_signed_in? %>
|
||||
<!-- Settings Dropdown -->
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6">
|
||||
<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
|
||||
<div @click="open = ! open">
|
||||
<button
|
||||
class="bg-primary-700 text-white border border-primary-800 font-medium py-2 px-4 rounded-lg hover:bg-primary-800 transition-colors duration-200 focus-ring">
|
||||
<div>
|
||||
<%= current_user.email.length> 20 ? current_user.email[0,20] + "..." : current_user.email %>
|
||||
</div>
|
||||
<div class="ms-1">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0" style="display: none;"
|
||||
@click="open = false">
|
||||
<div class="rounded-md ring-1 ring-primary-700 py-1 bg-primary-600">
|
||||
<%= link_to t('header.profile') , edit_user_registration_path,
|
||||
class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
|
||||
<%= link_to t('header.reservations') , "#" ,
|
||||
class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
|
||||
<%= link_to t('header.logout') , destroy_user_session_path, data: { controller: "logout" ,
|
||||
action: "click->logout#signOut" , logout_url_value: destroy_user_session_path, login_url_value:
|
||||
new_user_session_path, turbo: false },
|
||||
class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
|
||||
</div>
|
||||
</div>
|
||||
h <!-- Login/Register Links -->
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6 space-x-4 items-center">
|
||||
<%= link_to t('header.login') , new_user_session_path,
|
||||
class: "text-neutral-100 hover:text-primary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
%>
|
||||
<%= link_to t('header.register') , new_user_registration_path,
|
||||
class: "bg-primary-50 text-primary-600 font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-primary-100 transition-all duration-200"
|
||||
%>
|
||||
</div>
|
||||
<% end %>
|
||||
<!-- Hamburger -->
|
||||
<div class="-me-2 flex items-center sm:hidden">
|
||||
<button @click="open = ! open"
|
||||
class="p-2 rounded-md text-neutral-300 hover:text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
<path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Navigation Links -->
|
||||
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex items-center">
|
||||
<%= link_to t('header.parties'), events_path,
|
||||
class: "text-neutral-100 hover:text-primary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
%>
|
||||
<%= link_to t('header.concerts'), "#" ,
|
||||
class: "text-neutral-100 hover:text-primary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Responsive Navigation Menu -->
|
||||
<div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
|
||||
<div class="pt-2 pb-3 space-y-1 bg-primary-600">
|
||||
<%= link_to t('header.parties') , "#" ,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
<%= link_to t('header.concerts') , "#" ,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
</div>
|
||||
<!-- Responsive Settings Options -->
|
||||
<div class="pt-4 pb-1 border-t border-primary-700 bg-primary-600">
|
||||
<% if user_signed_in? %>
|
||||
<div class="px-4">
|
||||
<% if current_user.first_name %>
|
||||
<div class="font-medium text-base text-white">
|
||||
<%= current_user.first_name %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="font-medium text-base text-white">
|
||||
<%= current_user.email.length> 20 ? current_user.email[0,20] + "..." : current_user.email %>
|
||||
</div>
|
||||
<%# <div class="font-medium text-sm text-purple-200">
|
||||
<!-- Authentication Links -->
|
||||
<% if user_signed_in? %>
|
||||
<!-- Settings Dropdown -->
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6">
|
||||
<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
|
||||
<div @click="open = ! open">
|
||||
<button
|
||||
class="bg-primary-700 text-white border border-primary-800 font-medium py-2 px-4 rounded-lg hover:bg-primary-800 transition-colors duration-200 focus-ring">
|
||||
<div>
|
||||
<%= current_user.email.length> 20 ? current_user.email[0,20] + "..." : current_user.email %>
|
||||
</div>
|
||||
<div class="ms-1">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<%= link_to t('header.profile') , edit_user_registration_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
<%= link_to t('header.reservations') , "#" ,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
|
||||
<%= link_to t('header.logout') , destroy_user_session_path, data: { controller: "logout" , action: "click->logout#signOut",
|
||||
logout_url_value: destroy_user_session_path, login_url_value: new_user_session_path, turbo: false },
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="mt-3 space-y-1">
|
||||
<%= link_to t('header.register') , new_user_registration_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
<div x-show="open" x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0" style="display: none;"
|
||||
@click="open = false">
|
||||
<div class="rounded-md ring-1 ring-primary-700 py-1 bg-primary-600">
|
||||
<%= link_to t('header.profile') , edit_user_registration_path,
|
||||
class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
|
||||
<%= link_to t('header.reservations') , "#" ,
|
||||
class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
|
||||
<%= link_to t('header.logout') , destroy_user_session_path, data: { controller: "logout" ,
|
||||
action: "click->logout#signOut" , logout_url_value: destroy_user_session_path, login_url_value:
|
||||
new_user_session_path, turbo: false },
|
||||
class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
|
||||
</div>
|
||||
</div>
|
||||
h <!-- Login/Register Links -->
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6 space-x-4 items-center">
|
||||
<%= link_to t('header.login') , new_user_session_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
class: "text-neutral-100 hover:text-primary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
|
||||
%>
|
||||
<%= link_to t('header.register') , new_user_registration_path,
|
||||
class: "bg-primary-50 text-primary-600 font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-primary-100 transition-all duration-200"
|
||||
%>
|
||||
</div>
|
||||
<% end %>
|
||||
<!-- Hamburger -->
|
||||
<div class="-me-2 flex items-center sm:hidden">
|
||||
<button @click="open = ! open"
|
||||
class="p-2 rounded-md text-neutral-300 hover:text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
<path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Responsive Navigation Menu -->
|
||||
<div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
|
||||
<div class="pt-2 pb-3 space-y-1 bg-primary-600">
|
||||
<%= link_to t('header.parties') , "#" ,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
<%= link_to t('header.concerts') , "#" ,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
</div>
|
||||
<!-- Responsive Settings Options -->
|
||||
<div class="pt-4 pb-1 border-t border-primary-700 bg-primary-600">
|
||||
<% if user_signed_in? %>
|
||||
<div class="px-4">
|
||||
<% if current_user.first_name %>
|
||||
<div class="font-medium text-base text-white">
|
||||
<%= current_user.first_name %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="font-medium text-base text-white">
|
||||
<%= current_user.email.length> 20 ? current_user.email[0,20] + "..." : current_user.email %>
|
||||
</div>
|
||||
<%# <div class="font-medium text-sm text-purple-200">
|
||||
<%= current_user.email.length> 20 ? current_user.email[0,20] + "..." : current_user.email %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<%= link_to t('header.profile') , edit_user_registration_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
<%= link_to t('header.reservations') , "#" ,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
|
||||
<%= link_to t('header.logout') , destroy_user_session_path, data: { controller: "logout" , action: "click->logout#signOut",
|
||||
logout_url_value: destroy_user_session_path, login_url_value: new_user_session_path, turbo: false },
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="mt-3 space-y-1">
|
||||
<%= link_to t('header.register') , new_user_registration_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
<%= link_to t('header.login') , new_user_session_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
|
||||
%>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user