sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use tabs macro for settings page with mobile support

Browse Source 
- Replace custom sidebar/icon nav with standard tabs_nav macro
- Add horizontal scroll for mobile (overflow-x-auto)
- Reduce tab spacing on mobile (space-x-4 vs space-x-8 on desktop)
- Content panels now take full width below tabs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-01-03 13:00:58 +01:00
parent 7d1ec2bdc2
commit 1bc608ef6b
2 changed files with 17 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/shared/macros/tabs.html
View File

@@ -12,7 +12,7 @@
{% macro tabs_nav(tab_var='activeTab', class='') %}
<div class="mb-6 {{ class }}">
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-px flex space-x-8">
<nav class="-mb-px flex space-x-4 md:space-x-8 overflow-x-auto">
{{ caller() }}
</nav>
</div>

39
app/templates/vendor/settings.html vendored
View File

@@ -2,6 +2,7 @@
{% extends "vendor/base.html" %}
{% from 'shared/macros/headers.html' import page_header_flex %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
{% block title %}Settings{% endblock %}
@@ -17,29 +18,22 @@
{{ error_state('Error loading settings') }}
<!-- Settings Content -->
<div x-show="!loading && !error" class="w-full mb-8">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Settings Navigation (Sidebar) -->
<div class="w-full lg:w-56 flex-shrink-0">
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-2 lg:sticky lg:top-4">
<template x-for="section in sections" :key="section.id">
<button
@click="setSection(section.id)"
:class="{
'w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors': true,
'text-purple-600 bg-purple-50 dark:bg-purple-900/20 dark:text-purple-400': activeSection === section.id,
'text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-700': activeSection !== section.id
}"
>
<span x-html="$icon(section.icon, 'w-5 h-5 mr-3')"></span>
<span x-text="section.label"></span>
</button>
</template>
</div>
</div>
<div x-show="!loading && !error" class="mb-8">
<!-- Section Tabs -->
{% call tabs_nav(tab_var='activeSection') %}
{{ tab_button('general', 'General', tab_var='activeSection', icon='cog') }}
{{ tab_button('business', 'Business', tab_var='activeSection', icon='office-building') }}
{{ tab_button('localization', 'Localization', tab_var='activeSection', icon='globe') }}
{{ tab_button('marketplace', 'Marketplace', tab_var='activeSection', icon='shopping-cart') }}
{{ tab_button('invoices', 'Invoices', tab_var='activeSection', icon='document-text') }}
{{ tab_button('branding', 'Branding', tab_var='activeSection', icon='color-swatch') }}
{{ tab_button('domains', 'Domains', tab_var='activeSection', icon='globe-alt') }}
{{ tab_button('api', 'API', tab_var='activeSection', icon='key') }}
{{ tab_button('notifications', 'Notifications', tab_var='activeSection', icon='bell') }}
{% endcall %}
<!-- Settings Panels (Main Content) -->
<div class="flex-1 min-w-0">
<!-- Settings Panels -->
<div>
<!-- General Settings -->
<div x-show="activeSection === 'general'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
<div class="p-4 border-b dark:border-gray-700">
@@ -1009,7 +1003,6 @@
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}