82 lines
6.0 KiB
Plaintext
82 lines
6.0 KiB
Plaintext
|
|
<!-- 1. MOBILE ANSICHT: Ein sauberes Dropdown-Menü (Sichtbar auf Handys, versteckt ab 'sm:') -->
|
|
<div class="sm:hidden">
|
|
<label for="mobile-account-tabs" class="sr-only">Navigationsbereich wechseln</label>
|
|
<select id="mobile-account-tabs"
|
|
onchange="window.location.href = this.value"
|
|
class="block w-full rounded-lg border-gray-300 bg-white py-2.5 px-3 text-sm font-medium text-gray-700 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
|
|
<option value="<%= edit_password_path %>" <%= 'selected' if active_tab == :security %>>
|
|
🔒 Sicherheit
|
|
</option>
|
|
<option value="<%= edit_identity_email_path %>" <%= 'selected' if active_tab == :email %>>
|
|
✉️ E-Mail-Adresse
|
|
</option>
|
|
<option value="<%= sessions_path %>" <%= 'selected' if active_tab == :sessions %>>
|
|
💻 Sitzungen & Geräte
|
|
</option>
|
|
<option value="<%= authentications_events_path %>" <%= 'selected' if active_tab == :activities %>>
|
|
📊 Aktivitäten
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 2. DESKTOP ANSICHT: Die klassische Tab-Leiste (Versteckt auf Mobilgeräten, sichtbar ab 'sm:') -->
|
|
<div class="hidden sm:block border-b border-gray-200 mb-6 overflow-x-auto">
|
|
<nav class="flex space-x-6 min-w-max" aria-label="Tabs">
|
|
|
|
<!-- Tab 1: Sicherheit (Passwort) -->
|
|
<% if active_tab == :security %>
|
|
<span class="border-blue-500 text-blue-600 border-b-2 py-4 px-1 text-sm font-semibold flex items-center gap-2">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
|
|
Sicherheit
|
|
</span>
|
|
<% else %>
|
|
<%= link_to edit_password_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 text-sm font-medium flex items-center gap-2 transition" do %>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
|
|
Sicherheit
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<!-- Tab 2: E-Mail-Adresse -->
|
|
<% if active_tab == :email %>
|
|
<span class="border-blue-500 text-blue-600 border-b-2 py-4 px-1 text-sm font-semibold flex items-center gap-2">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0l-7.5-4.615a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
|
|
E-Mail-Adresse
|
|
</span>
|
|
<% else %>
|
|
<%= link_to edit_identity_email_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 text-sm font-medium flex items-center gap-2 transition" do %>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0l-7.5-4.615a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
|
|
E-Mail-Adresse
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<!-- Tab 3: Sitzungen & Geräte -->
|
|
<% if active_tab == :sessions %>
|
|
<span class="border-blue-500 text-blue-600 border-b-2 py-4 px-1 text-sm font-semibold flex items-center gap-2">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" /></svg>
|
|
Sitzungen & Geräte
|
|
</span>
|
|
<% else %>
|
|
<%= link_to sessions_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 text-sm font-medium flex items-center gap-2 transition" do %>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" /></svg>
|
|
Sitzungen & Geräte
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<!-- Tab 4: Aktivitäten -->
|
|
<% if active_tab == :activities %>
|
|
<span class="border-blue-500 text-blue-600 border-b-2 py-4 px-1 text-sm font-semibold flex items-center gap-2">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" /></svg>
|
|
Aktivitäten
|
|
</span>
|
|
<% else %>
|
|
<%= link_to authentications_events_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 py-4 px-1 text-sm font-medium flex items-center gap-2 transition" do %>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" /></svg>
|
|
Aktivitäten
|
|
<% end %>
|
|
<% end %>
|
|
|
|
</nav>
|
|
</div>
|