From 512dbdaba0942bf0a8dd1f4cce8d369eab677885 Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Tue, 21 Jul 2026 10:50:17 +0330
Subject: [PATCH] feat: update PurchaseSubscriptionSidebar for mobile
 visibility and styling adjustments

---
 .../layout/PurchaseSubscriptionSidebar.test.tsx           | 8 ++++++++
 .../components/layout/PurchaseSubscriptionSidebar.tsx     | 4 ++--
 assets/admin/styles.css                                   | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/assets/admin/components/layout/PurchaseSubscriptionSidebar.test.tsx b/assets/admin/components/layout/PurchaseSubscriptionSidebar.test.tsx
index 8faf5335..97800606 100644
--- a/assets/admin/components/layout/PurchaseSubscriptionSidebar.test.tsx
+++ b/assets/admin/components/layout/PurchaseSubscriptionSidebar.test.tsx
@@ -19,4 +19,12 @@ describe('PurchaseSubscriptionSidebar — settings menu', () => {
     expect(screen.getByRole('link', { name: 'پرسنل' })).toHaveAttribute('aria-current', 'page');
     expect(screen.getByRole('link', { name: 'مدیریت منشی' })).not.toHaveAttribute('aria-current');
   });
+
+  // regression: the settings menu must stay visible on mobile (was `hidden lg:block`,
+  // which dropped the whole menu below the lg breakpoint → no settings nav on phones).
+  it('is not hidden on mobile', () => {
+    renderWithProviders(<PurchaseSubscriptionSidebar active="staff" />, { route: '/admin/staff' });
+    const nav = screen.getByRole('complementary', { name: 'منوی تنظیمات' });
+    expect(nav.className).not.toMatch(/\bhidden\b/);
+  });
 });
diff --git a/assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx b/assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx
index ceea014e..e59da11a 100644
--- a/assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx
+++ b/assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx
@@ -46,8 +46,8 @@ export default function PurchaseSubscriptionSidebar({ active }: { active: string
     <aside
       dir="rtl"
       aria-label="منوی تنظیمات"
-      className="hidden lg:block"
-      style={{ alignSelf: 'start', position: 'sticky', top: 'calc(var(--topbar-h) + 16px)' }}
+      className="settings-subnav lg:sticky"
+      style={{ alignSelf: 'start', top: 'calc(var(--topbar-h) + 16px)' }}
     >
       <div style={{
         fontSize: 16, fontWeight: 800, color: 'var(--text-2)', textAlign: 'right',
diff --git a/assets/admin/styles.css b/assets/admin/styles.css
index bdccd572..f27bf5c4 100644
--- a/assets/admin/styles.css
+++ b/assets/admin/styles.css
@@ -907,8 +907,8 @@ html, body { max-width: 100%; overflow-x: hidden; }
 .save-bar.ok { border-color: var(--success); border-color: color-mix(in oklch, var(--success) 45%, var(--border)); }
 
 @media (max-width: 900px) {
-  .settings-layout { grid-template-columns: 1fr; }
-  .settings-nav { position: static; }
+  .settings-layout { grid-template-columns: minmax(0, 1fr); }
+  .settings-nav { position: static; min-width: 0; }
   .settings-nav-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
   .settings-nav-item { flex-shrink: 0; width: auto; }
   .settings-nav-item .dot { display: none; }