JSON-DYNAMIC-SIDEBAR

by velo_ninja

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Recursive Sidebar Menu with Slide-Out Submenus</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Google Fonts and Font Awesome -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      rel="stylesheet"
    />

    <style>
      :root {
        --sidebar-bg: linear-gradient(135deg, #007bff, #1e3a8a);
        --text-light: #ffffff;
        --hover-bg: rgba(255, 255, 255, 0.2);
        --transition-speed: 0.3s;
      }

      body {
        margin: 0;
        font-family: 'Roboto', sans-serif;
        background-color: #f0f2f5;
      }

      /* Base container for the sidebar */
      .barSidebarLeft {
        width: 250px;
        height: 100vh;
        background: var(--sidebar-bg);
        color: var(--text-light);
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        padding: 15px;
      }

      .secSidebarTop {
        text-align: center;
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 30px;
      }

      .secSidebarMiddle {
        flex-grow: 1;
        /* Ensure relative positioning so that absolute submenus are correctly anchored */
        position: relative;
      }

      .secSidebarBottom {
        text-align: center;
        margin-top: auto;
      }

      /* Base styles for the navigation menu */
      #navSidebarMenu,
      #navSidebarMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      /* Style individual menu items */
      #navSidebarMenu li {
        position: relative; /* Needed so that submenu absolute positioning works */
        margin-bottom: 5px;
      }

      /* Base styling for menu links */
     ...