Initial commit - Basic bank transactions dashboard structure with Astro and TypeScript

src/components/Sidebar.astro

@@ -0,0 +1,31 @@
+---
+import AddTransactionForm from './AddTransactionForm.astro';
+import AccountSummary from './AccountSummary.astro';
+import type { Account } from '../types'; // We'll define this type
+
+interface Props {
+    accounts: Account[];
+    initialAccount: Account; // Pass the initially selected account
+}
+
+const { accounts, initialAccount } = Astro.props;
+---
+<aside class="sidebar">
+    <div class="sidebar-header">
+        <h2>My Bank</h2>
+    </div>
+    <nav class="account-nav">
+        <h3>Accounts</h3>
+        <select id="account-select" name="account">
+            {accounts.map(account => (
+                <option value={account.id} selected={account.id === initialAccount.id}>
+                    {account.name} (***{account.last4})
+                </option>
+            ))}
+        </select>
+    </nav>
+
+    <AddTransactionForm client:load /> {/* Make form toggle interactive */}
+
+    <AccountSummary account={initialAccount} client:load /> {/* Make summary updatable */}
+</aside>