Add permanent responsive role navigation and breadcrumbs

This commit is contained in:
A R R R Associates
2026-07-10 10:55:51 +05:30
parent b7c772f6e1
commit 0e00141ded
11 changed files with 364 additions and 148 deletions
+15 -1
View File
@@ -83,6 +83,18 @@
--af-color-brand-900: {{ __firm_branding.accent_color or '#172554' }};
}
</style>
<style>
.af-nav-link,.af-nav-summary{display:inline-flex;align-items:center;border-radius:.75rem;padding:.55rem .8rem;font-size:.78rem;font-weight:700;color:#475569;transition:.15s;white-space:nowrap}
.af-nav-link:hover,.af-nav-summary:hover{background:#f1f5f9;color:var(--af-color-brand-700)}
.af-nav-link-active{background:var(--af-color-brand-600)!important;color:#fff!important;box-shadow:var(--af-shadow-soft)}
.af-nav-dropdown{position:relative}
.af-nav-summary{cursor:pointer;list-style:none}
.af-nav-summary::-webkit-details-marker{display:none}
.af-nav-menu{position:absolute;left:0;top:calc(100% + .55rem);z-index:70;display:flex;min-width:15rem;flex-direction:column;gap:.15rem;border:1px solid #e2e8f0;border-radius:1rem;background:#fff;padding:.5rem;box-shadow:var(--af-shadow-card)}
.af-nav-menu .af-nav-link{display:flex;width:100%}
@media (max-width:1023px){#af-mobile-nav .af-nav-link,#af-mobile-nav .af-nav-summary{padding:.7rem .8rem}}
</style>
</head>
<body class="min-h-screen bg-slate-100 text-slate-900">
{% set otp_ok = request.session.get("otp_verified", False) %}
@@ -111,7 +123,7 @@
Sidebar is retained only for System Admin users.
All other authenticated users use the floating top workspace bar on every page.
Existing routes and old sidebar code are kept intact. #}
{% set use_clean_top_nav = full_auth and not is_system_admin_user %}
{% set use_clean_top_nav = full_auth %}
<div class="min-h-screen {% if not use_clean_top_nav %}lg:grid lg:grid-cols-[260px_minmax(0,1fr)]{% endif %}">
@@ -503,6 +515,7 @@
{% endif %}
<main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
{% if full_auth %}{% include "ui/templates/components/breadcrumbs.html" %}{% endif %}
{% if flash %}
<div class="mb-6 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 shadow-soft">
{{ flash }}
@@ -676,5 +689,6 @@
})();
</script>
<script src="/static/js/navigation_shell.js?v=uiux-navigation-v1"></script>
</body>
</html>