Sidebar-Menu 1.03

by velo_ninja

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Modular Sidebar UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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, rgba(0, 123, 255, 0.7), rgba(30, 58, 138, 0.7));
        --sidebar-text: #fff;
        --hover-bg: rgba(255, 255, 255, 0.15);
        --tooltip-bg: #222;
        --tooltip-color: #fff;
        --transition-time: 0.9s;
        --submenu-indent: 20px;
        --body-bg: #f4f4f4;
      }
      body.light {
        --sidebar-bg: #f0f0f0;
        --sidebar-text: #333;
        --hover-bg: rgba(0, 0, 0, 0.1);
        --tooltip-bg: #eee;
        --tooltip-color: #000;
        --body-bg: #fff;
      }
      * {margin: 0; padding: 0; box-sizing: border-box;}
      body {
        font-family: 'Roboto', sans-serif;
        display: flex;
        height: 99vh;
        width: 99%;
        background: var(--body-bg);
        transition: margin-left var(--transition-time);
        margin: 5px;
      }
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        padding: 20px;
        background: var(--sidebar-bg);
        color: var(--sidebar-text);
        display: flex;
        flex-direction: column;
        transition: width var(--transition-time);
        z-index: 10;
        overflow-y: auto;
      }
      .sidebar.collapsed .link-label {
        opacity: 0;
        width: 0;
        margin-left: 0;
      }
      .sidebar:not(.collapsed) .link-label {
        opacity: 1;
        width: auto;
        margin-left: 10px;
      }
      .nav-menu ul { list-style: none; }
      .nav-menu li { position: relative; }
      .nav-menu a {
        text-decoration:...