mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-20 13:49:39 +02:00
Use single list for desktop and mobile nav bars (#2227)
* Add rules_label to locale file * Add rules to settings sidebar, use locale text * Use a single list for mobile and desktop nav
This commit is contained in:
parent
d8e058d7c6
commit
3371243a00
2 changed files with 57 additions and 126 deletions
|
@ -1,3 +1,36 @@
|
||||||
|
<%
|
||||||
|
nav_sections = [
|
||||||
|
{
|
||||||
|
header: t('.general_section_title'),
|
||||||
|
items: [
|
||||||
|
{ label: t('.profile_label'), path: settings_profile_path, icon: 'circle-user' },
|
||||||
|
{ label: t('.preferences_label'), path: settings_preferences_path, icon: 'bolt' },
|
||||||
|
{ label: t('.security_label'), path: settings_security_path, icon: 'shield-check' },
|
||||||
|
{ label: t('.self_hosting_label'), path: settings_hosting_path, icon: 'database', if: self_hosted? },
|
||||||
|
{ label: t('.billing_label'), path: settings_billing_path, icon: 'circle-dollar-sign', if: !self_hosted? },
|
||||||
|
{ label: t('.accounts_label'), path: accounts_path, icon: 'layers' },
|
||||||
|
{ label: t('.imports_label'), path: imports_path, icon: 'download' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: t('.transactions_section_title'),
|
||||||
|
items: [
|
||||||
|
{ label: t('.tags_label'), path: tags_path, icon: 'tags' },
|
||||||
|
{ label: t('.categories_label'), path: categories_path, icon: 'shapes' },
|
||||||
|
{ label: t('.rules_label'), path: rules_path, icon: 'git-branch' },
|
||||||
|
{ label: t('.merchants_label'), path: family_merchants_path, icon: 'store' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: t('.other_section_title'),
|
||||||
|
items: [
|
||||||
|
{ label: t('.whats_new_label'), path: changelog_path, icon: 'box' },
|
||||||
|
{ label: t('.feedback_label'), path: feedback_path, icon: 'megaphone' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
%>
|
||||||
|
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div class="hidden lg:flex items-center gap-2 p-1.5">
|
<div class="hidden lg:flex items-center gap-2 p-1.5">
|
||||||
<%= render LinkComponent.new(
|
<%= render LinkComponent.new(
|
||||||
|
@ -6,86 +39,27 @@
|
||||||
href: previous_path,
|
href: previous_path,
|
||||||
variant: "ghost",
|
variant: "ghost",
|
||||||
) %>
|
) %>
|
||||||
|
|
||||||
<%= link_to previous_path, class: "hidden md:block uppercase bg-surface-inset-hover rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
|
<%= link_to previous_path, class: "hidden md:block uppercase bg-surface-inset-hover rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
|
||||||
<kbd>esc</kbd>
|
<kbd>esc</kbd>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="space-y-4 hidden md:block">
|
<nav class="space-y-4 hidden md:block">
|
||||||
|
<% nav_sections.each do |section| %>
|
||||||
<section class="space-y-2">
|
<section class="space-y-2">
|
||||||
<div class="flex items-center gap-2 px-3">
|
<div class="flex items-center gap-2 px-3">
|
||||||
<h3 class="uppercase text-secondary font-medium text-xs"><%= t(".general_section_title") %></h3>
|
<h3 class="uppercase text-secondary font-medium text-xs"><%= section[:header] %></h3>
|
||||||
<div class="h-px bg-alpha-black-100 w-full"></div>
|
<div class="h-px bg-alpha-black-100 w-full"></div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="space-y-1">
|
<ul class="space-y-1">
|
||||||
|
<% section[:items].each do |item| %>
|
||||||
|
<% next if item[:if] == false %>
|
||||||
<li>
|
<li>
|
||||||
<%= render "settings/settings_nav_item", name: t(".profile_label"), path: settings_profile_path, icon: "circle-user" %>
|
<%= render "settings/settings_nav_item", name: item[:label], path: item[:path], icon: item[:icon] %>
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".preferences_label"), path: settings_preferences_path, icon: "bolt" %>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".security_label"), path: settings_security_path, icon: "shield-check" %>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<% if self_hosted? %>
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".self_hosting_label"), path: settings_hosting_path, icon: "database" %>
|
|
||||||
</li>
|
</li>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% unless self_hosted? %>
|
</ul>
|
||||||
<li>
|
</section>
|
||||||
<%= render "settings/settings_nav_item", name: t(".billing_label"), path: settings_billing_path, icon: "circle-dollar-sign" %>
|
|
||||||
</li>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".accounts_label"), path: accounts_path, icon: "layers" %>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".imports_label"), path: imports_path, icon: "download" %>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="space-y-2">
|
|
||||||
<div class="flex items-center gap-2 px-3">
|
|
||||||
<h3 class="uppercase text-secondary font-medium text-xs"><%= t(".transactions_section_title") %></h3>
|
|
||||||
<div class="h-px bg-alpha-black-100 w-full"></div>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-1">
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".tags_label"), path: tags_path, icon: "tags" %>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".categories_label"), path: categories_path, icon: "shapes" %>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: "Rules", path: rules_path, icon: "git-branch" %>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".merchants_label"), path: family_merchants_path, icon: "store" %>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="space-y-2">
|
|
||||||
<div class="flex items-center gap-2 px-3">
|
|
||||||
<h3 class="uppercase text-secondary font-medium text-xs"><%= t(".other_section_title") %></h3>
|
|
||||||
<div class="h-px bg-alpha-black-100 w-full"></div>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-1">
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".whats_new_label"), path: changelog_path, icon: "box" %>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".feedback_label"), path: feedback_path, icon: "megaphone" %>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-destructive hover:bg-surface-hover w-full" do %>
|
<%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-destructive hover:bg-surface-hover w-full" do %>
|
||||||
<%= icon("log-out", color: "current") %>
|
<%= icon("log-out", color: "current") %>
|
||||||
|
@ -93,7 +67,6 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
</section>
|
</section>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="space-y-4 overflow-y-auto md:hidden" id="mobile-settings-nav">
|
<nav class="space-y-4 overflow-y-auto md:hidden" id="mobile-settings-nav">
|
||||||
<ul class="flex space-y-1">
|
<ul class="flex space-y-1">
|
||||||
<li>
|
<li>
|
||||||
|
@ -104,61 +77,18 @@
|
||||||
variant: "ghost",
|
variant: "ghost",
|
||||||
) %>
|
) %>
|
||||||
</li>
|
</li>
|
||||||
|
<% nav_sections.each do |section| %>
|
||||||
|
<% section[:items].each do |item| %>
|
||||||
|
<% next if item[:if] == false %>
|
||||||
<li>
|
<li>
|
||||||
<%= render "settings/settings_nav_item", name: t(".profile_label"), path: settings_profile_path, icon: "circle-user" %>
|
<%= render "settings/settings_nav_item", name: item[:label], path: item[:path], icon: item[:icon] %>
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".preferences_label"), path: settings_preferences_path, icon: "bolt" %>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".security_label"), path: settings_security_path, icon: "shield-check" %>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<% if self_hosted? %>
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".self_hosting_label"), path: settings_hosting_path, icon: "database" %>
|
|
||||||
</li>
|
</li>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% unless self_hosted? %>
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".billing_label"), path: settings_billing_path, icon: "circle-dollar-sign" %>
|
|
||||||
</li>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".accounts_label"), path: accounts_path, icon: "layers" %>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".imports_label"), path: imports_path, icon: "download" %>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".tags_label"), path: tags_path, icon: "tags" %>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".categories_label"), path: categories_path, icon: "shapes" %>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".merchants_label"), path: family_merchants_path, icon: "store" %>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".whats_new_label"), path: changelog_path, icon: "box" %>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<%= render "settings/settings_nav_item", name: t(".feedback_label"), path: feedback_path, icon: "megaphone" %>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-destructive hover:bg-surface-hover w-full" do %>
|
<%= button_to session_path(Current.session), method: :delete, class: "flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-destructive hover:bg-surface-hover w-full" do %>
|
||||||
<%= icon("log-out", color: "current") %>
|
<%= icon("log-out", color: "current") %>
|
||||||
<span><%= t(".logout") %></span>
|
<span><%= t(".logout") %></span>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -80,6 +80,7 @@ en:
|
||||||
other_section_title: More
|
other_section_title: More
|
||||||
preferences_label: Preferences
|
preferences_label: Preferences
|
||||||
profile_label: Account
|
profile_label: Account
|
||||||
|
rules_label: Rules
|
||||||
security_label: Security
|
security_label: Security
|
||||||
self_hosting_label: Self hosting
|
self_hosting_label: Self hosting
|
||||||
tags_label: Tags
|
tags_label: Tags
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue