From daae61d5fed3640cf48e78be467eddcc00a0647b Mon Sep 17 00:00:00 2001
From: Srija <srijaray.pratt@gmail.com>
Date: Mon, 18 May 2026 16:31:57 +0530
Subject: [PATCH] Fixed the sidebar navigation issue.

---
 src/components/BankHouse.css                |   6 +-
 src/components/BankHouse.jsx                | 266 ++++++++++++++------
 src/components/bank-house/TransferVault.jsx |  13 +-
 3 files changed, 206 insertions(+), 79 deletions(-)

diff --git a/src/components/BankHouse.css b/src/components/BankHouse.css
index 4fbf3fd..826726c 100644
--- a/src/components/BankHouse.css
+++ b/src/components/BankHouse.css
@@ -4,7 +4,8 @@
   width: 100%;
   background-color: #050b14;
   color: #e2e8f0;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   font-family: inherit;
 }
 
@@ -214,6 +215,8 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+    position: relative;
+  z-index: 20;
 }
 
 .bank-side-nav {
@@ -279,6 +282,7 @@
   gap: 1.5rem;
   overflow-y: auto;
   padding-right: 0.5rem;
+    min-height: 0;
 }
 
 .bank-main-content::-webkit-scrollbar {
diff --git a/src/components/BankHouse.jsx b/src/components/BankHouse.jsx
index dfe89b5..8ae2d3c 100644
--- a/src/components/BankHouse.jsx
+++ b/src/components/BankHouse.jsx
@@ -119,93 +119,209 @@ export default function BankHouse({ onBack }) {
             </div>
           </aside>
 
-          <section className="bank-main-content">
-            <div className="bank-summary-row">
-              <div className="bank-card summary-card bank-glass">
-                <h3>Total Balance</h3>
-                <div className="balance-value glitch-target">₮ {glitchText}</div>
-                <span className="trend positive">+12.5% this month</span>
-              </div>
-              <div className="bank-card summary-card bank-glass">
-                <h3>Savings Vault</h3>
-                <div className="balance-value">₮ {savings.toLocaleString('en-US', {minimumFractionDigits: 2})}</div>
-                <span className="trend positive">Locked</span>
-              </div>
-              <div className="bank-card summary-card bank-glass">
-                <h3>Current Account</h3>
-                <div className="balance-value">₮ {balance.toLocaleString('en-US', {minimumFractionDigits: 2})}</div>
-                <span className="trend negative hover-glitch">Pending holds</span>
-              </div>
-              <div className="bank-card summary-card bank-glass">
-                <h3>Monthly Spend</h3>
-                <div className="balance-value">₮ {monthlySpend.toLocaleString('en-US', {minimumFractionDigits: 2})}</div>
-                <span className="trend negative">+8.2% vs last month</span>
-              </div>
-            </div>
+           <section className="bank-main-content">
+            <h1 style={{ color: 'white' }}>
+              Active Tab: {activeTab}
+            </h1>
 
-            <div className="bank-content-grid">
-              <div className="bank-center-panel">
-                <TransactionsTable allTransactions={mockTransactions} />
-                <TransferVault 
-                    balance={balance} 
-                    beneficiaries={mockBeneficiaries} 
-                    onTransfer={transferFunds}
-                    selectedBeneficiary={selectedBen}
-                    setSelectedBeneficiary={setSelectedBen}
-                />
-              </div>
+            {activeTab === 'dashboard' && (
+              <>
+                <div className="bank-summary-row">
+                  <div className="bank-card summary-card bank-glass">
+                    <h3>Total Balance</h3>
+
+                    <div className="balance-value glitch-target">
+                      ₮ {glitchText}
+                    </div>
+
+                    <span className="trend positive">
+                      +12.5% this month
+                    </span>
+                  </div>
+
+                  <div className="bank-card summary-card bank-glass">
+                    <h3>Savings Vault</h3>
+
+                    <div className="balance-value">
+                      ₮{' '}
+                      {savings.toLocaleString('en-US', {
+                        minimumFractionDigits: 2
+                      })}
+                    </div>
+
+                    <span className="trend positive">Locked</span>
+                  </div>
+
+                  <div className="bank-card summary-card bank-glass">
+                    <h3>Current Account</h3>
+
+                    <div className="balance-value">
+                      ₮{' '}
+                      {balance.toLocaleString('en-US', {
+                        minimumFractionDigits: 2
+                      })}
+                    </div>
+
+                    <span className="trend negative hover-glitch">
+                      Pending holds
+                    </span>
+                  </div>
+
+                  <div className="bank-card summary-card bank-glass">
+                    <h3>Monthly Spend</h3>
+
+                    <div className="balance-value">
+                      ₮{' '}
+                      {monthlySpend.toLocaleString('en-US', {
+                        minimumFractionDigits: 2
+                      })}
+                    </div>
+
+                    <span className="trend negative">
+                      +8.2% vs last month
+                    </span>
+                  </div>
+                </div>
+
+                <div className="bank-content-grid">
+                  <div className="bank-center-panel">
+                    <TransactionsTable
+                      allTransactions={mockTransactions}
+                    />
+
+                    <TransferVault
+                      balance={balance}
+                      beneficiaries={mockBeneficiaries}
+                      onTransfer={transferFunds}
+                      selectedBeneficiary={selectedBen}
+                      setSelectedBeneficiary={setSelectedBen}
+                    />
+                  </div>
+
+                  <div className="bank-right-panel">
+                    <div className="bank-card bank-glass">
+                      <h2>Security Alerts</h2>
 
-              <div className="bank-right-panel">
-                <div className="bank-card bank-glass">
-                  <h2>Security Alerts</h2>
-                  <div className="alert-list">
-                    <div className="alert-item critical">
-                      <AlertTriangle size={16} />
-                      <div className="alert-content">
-                        <strong>Unauthorized Access Attempt</strong>
-                        <span>Terminal 4A - 2 mins ago</span>
+                      <div className="alert-list">
+                        <div className="alert-item critical">
+                          <AlertTriangle size={16} />
+
+                          <div className="alert-content">
+                            <strong>
+                              Unauthorized Access Attempt
+                            </strong>
+
+                            <span>
+                              Terminal 4A - 2 mins ago
+                            </span>
+                          </div>
+                        </div>
+
+                        <div className="alert-item warning">
+                          <ShieldAlert size={16} />
+
+                          <div className="alert-content">
+                            <strong>
+                              Large Transfer Pending
+                            </strong>
+
+                            <span>
+                              ₮ 89,000.00 awaiting clearance
+                            </span>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div className="alert-item warning">
-                      <ShieldAlert size={16} />
-                      <div className="alert-content">
-                        <strong>Large Transfer Pending</strong>
-                        <span>₮ 89,000.00 awaiting clearance</span>
+
+                    <div className="bank-card bank-glass chart-card">
+                      <h2>Spending Overview</h2>
+
+                      <div className="chart-placeholder">
+                        <div className="bar-chart">
+                          {dailySpending.map((day, idx) => (
+                            <div
+                              key={idx}
+                              className={`bar ${
+                                day.isToday
+                                  ? 'active-bar'
+                                  : ''
+                              }`}
+                              style={{ height: day.height }}
+                              title={`₮ ${day.amount.toLocaleString()}`}
+                            />
+                          ))}
+                        </div>
+
+                        <div className="chart-labels">
+                          {dailySpending.map((day, idx) => (
+                            <span key={idx}>
+                              {day.label}
+                            </span>
+                          ))}
+                        </div>
                       </div>
                     </div>
+
+                    <BeneficiariesPanel
+                      beneficiaries={mockBeneficiaries}
+                      onSelectBeneficiary={ben =>
+                        setSelectedBen(ben?.id || '')
+                      }
+                    />
                   </div>
                 </div>
+              </>
+            )}
 
-                <div className="bank-card bank-glass chart-card">
-  <h2>Spending Overview</h2>
-  <div className="chart-placeholder">
-    <div className="bar-chart">
-      {dailySpending && dailySpending.map((day, idx) => (
-        <div 
-          key={idx}
-          className={`bar ${day.isToday ? 'active-bar' : ''}`}
-          style={{ height: day.height }}
-          title={`₮ ${day.amount.toLocaleString()}`}
-        />
-      ))}
-    </div>
-    <div className="chart-labels">
-      {dailySpending && dailySpending.map((day, idx) => (
-        <span key={idx}>{day.label}</span>
-      ))}
-    </div>
-  </div>
-</div>
-
-                <BeneficiariesPanel 
-                    beneficiaries={mockBeneficiaries} 
-                    onSelectBeneficiary={(ben) => setSelectedBen(ben?.id || '')} 
-                />
+            {activeTab === 'accounts' && (
+              <div className="bank-card bank-glass">
+                <h2>Accounts</h2>
+                <p>Accounts section coming soon...</p>
               </div>
-            </div>
+            )}
+
+            {activeTab === 'transfer' && (
+              <TransferVault
+                balance={balance}
+                beneficiaries={mockBeneficiaries}
+                onTransfer={transferFunds}
+                selectedBeneficiary={selectedBen}
+                setSelectedBeneficiary={setSelectedBen}
+              />
+            )}
+
+            {activeTab === 'beneficiaries' && (
+              <BeneficiariesPanel
+                beneficiaries={mockBeneficiaries}
+                onSelectBeneficiary={ben =>
+                  setSelectedBen(ben?.id || '')
+                }
+              />
+            )}
+
+            {activeTab === 'statements' && (
+              <div className="bank-card bank-glass">
+                <h2>Statements</h2>
+                <p>Statement archive loading...</p>
+              </div>
+            )}
+
+            {activeTab === 'fraud' && (
+              <div className="bank-card bank-glass">
+                <h2>Fraud Monitor</h2>
+                <p>No critical threats detected.</p>
+              </div>
+            )}
+
+            {activeTab === 'support' && (
+              <div className="bank-card bank-glass">
+                <h2>Support</h2>
+                <p>Support systems online.</p>
+              </div>
+            )}
           </section>
         </section>
       </div>
     </main>
   )
-}
+}
\ No newline at end of file
diff --git a/src/components/bank-house/TransferVault.jsx b/src/components/bank-house/TransferVault.jsx
index ce166ab..e6931f1 100644
--- a/src/components/bank-house/TransferVault.jsx
+++ b/src/components/bank-house/TransferVault.jsx
@@ -36,7 +36,7 @@ export default function TransferVault({ balance, beneficiaries, onTransfer, sele
       {toast && (
         <div 
           className={`absolute top-2 right-2 px-4 py-2 rounded shadow border ${
-            toast.includes('Processing') 
+           toast?.includes('Processing')
               ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' 
               : 'bg-emerald-500/20 text-emerald-400 border-emerald-500/50'
           }`}
@@ -80,7 +80,8 @@ export default function TransferVault({ balance, beneficiaries, onTransfer, sele
               value={amount}
               onChange={(e) => setAmount(e.target.value)}
             />
-           <button
+          <button
+  type="button"
   className="max-btn"
   onClick={() => setAmount(balance.toString())}
   disabled={isSubmitting}
@@ -89,7 +90,13 @@ export default function TransferVault({ balance, beneficiaries, onTransfer, sele
 </button>
           </div>
         </div>
-        <button className="bank-btn primary-btn w-full flex items-center justify-center gap-2" style={{ marginTop: '1rem' }} onClick={handleTransfer} disabled={isSubmitting}>
+        <button
+  type="button"
+  className="bank-btn primary-btn w-full flex items-center justify-center gap-2"
+  style={{ marginTop: '1rem' }}
+  onClick={handleTransfer}
+  disabled={isSubmitting}
+>
           <Send size={18} /> INITIALIZE TRANSFER
         </button>
       </div>