<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        main {
            padding-left: 100px;
            z-index: 900;
        }
        .sidenav a {
            z-index: 950;
            position: absolute; /* Position them relative to the browser window */
            left: -80px; /* Position them outside of the screen */
            transition: 0.3s; /* Add transition on hover */
            padding: 15px; /* 15px padding */
            width: 150px; /* Set a specific width */
            text-decoration: none; /* Remove underline */
            font-size: 20px; /* Increase font size */
            color: white; /* White text color */
            border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
          }

          .menuitem:hover {
            left: 0; /* On mouse-over, make the elements appear as they should */
          }

          .menuitem {
            background-color: #377FB4;
          }

          #first {
            top: 20px;
          }

          #second {
            top: 110px;
          }

          #third {
            top: 200px;
          }
    </style>

    <title>Depender</title>

</head>

<body>
    <nav class="sidenav">
        <a href="dependency_graph.html" class="menuitem" id="first">Dependency Graph</a>
        <a href="dependency_matrix.html" class="menuitem" id="second">Dependency Matrix</a>
        <a href="structure_graph.html" class="menuitem" id="third">Structure Graph</a>
    </nav>

    <main>
        {{ div }}
        {{ script }}
    </main>

</body>

</html>