<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            margin:0;
            font-family: Arial, sans-serif;
        }
        .sidebar{
            width:250px;
            height:100vh;
            background:#2c3e50;
            position:fixed;
            left:0;
            top:0;
            color:#fff;
        }
        .sidebar h2{
            text-align:center;
            padding:15px;
            margin:0;
            background:#1a252f;
        }
        .menu{
            list-style:none;
            padding:0;
            margin:0;
        }
        .menu > li{
            border-bottom:1px solid #34495e;
        }
        .menu a{
            color:#fff;
            text-decoration:none;
            display:block;
            padding:12px 20px;
            cursor:pointer;
        }
        .menu a:hover{
            background:#34495e;
        }
        .submenu{
            list-style:none;
            padding:0;
            display:none;
            background:#34495e;
        }
        .submenu li a{
            padding:10px 40px;
            font-size:14px;
        }
    </style>
</head>
<body>

<div class="sidebar">
    <h2>My App</h2>

    <ul class="menu">

        <!-- Bank Statement -->
        <li>
            <a onclick="toggleMenu('bank')">🏦 Bank Statement</a>
            <ul class="submenu" id="bank">
                <li><a href="upload_statement.php">Upload Statement</a></li>
                <li><a href="list_statement.php">List Statement</a></li>
                <li><a href="interest_statement.php">Interest Statement</a></li>
            </ul>
        </li>

        <!-- FDR -->
        <li>
            <a onclick="toggleMenu('fdr')">💰 FDR</a>
            <ul class="submenu" id="fdr">
                <li><a href="upload_fdr.php">Upload FDR</a></li>
                <li><a href="list_fdr.php">List FDR</a></li>
                <li><a href="interest_fdr.php">Interest FDR</a></li>
            </ul>
        </li>

    </ul>
</div>

<script>
function toggleMenu(id){
    var menu = document.getElementById(id);
    menu.style.display = (menu.style.display === "block") ? "none" : "block";
}
</script>

</body>
</html>
