┌─────────────────────────────────────────────────────────────────────────────┐
│                      Advanced Component Architecture                        │
├───────────────────┬───────────────────────────┬─────────────────────────────┤
│ Responsive Navbar │ Custom Modals             │ Multi-Edge Offcanvas        │
├───────────────────┼───────────────────────────┼─────────────────────────────┤
│ .navbar-expand-lg │ .modal-dialog-centered    │ .offcanvas-start (Left)     │
│ .navbar-collapse  │ .modal-dialog-scrollable  │ .offcanvas-end (Right)      │
│ .dropdown-menu-end│ .modal-fullscreen         │ .offcanvas-top / bottom     │
└───────────────────┴───────────────────────────┴─────────────────────────────┘

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top shadow-sm">
  <div class="container-fluid px-4">
    <a class="navbar-brand fw-bold" href="#">EnterpriseHub</a>
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#enterpriseNav" aria-controls="enterpriseNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="enterpriseNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">Dashboard</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Analytics</a></li>
      </ul>

      <form class="d-flex me-3 my-2 my-lg-0" role="search">
        <input class="form-control form-control-sm me-2 bg-dark text-white border-secondary" type="search" placeholder="Search..." aria-label="Search">
      </form>

      <div class="dropdown">
        <button class="btn btn-outline-light btn-sm dropdown-toggle d-flex align-items-center gap-2" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="rounded-circle bg-primary text-white px-2 py-1 small fw-bold">JD</span>
          <span>John Doe</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark shadow">
          <li><h6 class="dropdown-header">Signed in as JD</h6></li>
          <li><a class="dropdown-item" href="#">Account Profile</a></li>
          <li><a class="dropdown-item" href="#">Billing Settings</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item text-danger" href="#">Sign Out</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<!-- Vertically Centered & Scrollable Modal -->
<div class="modal fade" id="customScrollModal" tabindex="-1" aria-labelledby="customModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-light">
        <h5 class="modal-title" id="customModalTitle">End User License Agreement</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Extensive terms and conditions content that scrolls smoothly inside the modal container without moving background window scrollbars.</p>
      </div>
      <div class="modal-footer bg-light">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Decline</button>
        <button type="button" class="btn btn-primary">Accept & Continue</button>
      </div>
    </div>
  </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="cartDrawer" aria-labelledby="cartDrawerLabel">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title fw-bold" id="cartDrawerLabel">Shopping Cart (2 items)</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body d-flex flex-column">
    <ul class="list-group list-group-flush mb-auto">
      <li class="list-group-item d-flex justify-content-between align-items-center px-0">
        <div>
          <h6 class="my-0">Cloud License Key</h6>
          <small class="text-muted">1 Year Tier</small>
        </div>
        <span class="text-muted fw-bold">$120.00</span>
      </li>
    </ul>
    <div class="border-top pt-3 mt-3">
      <div class="d-flex justify-content-between fw-bold mb-3">
        <span>Total:</span>
        <span>$120.00</span>
      </div>
      <button class="btn btn-primary w-100 py-2">Proceed to Checkout</button>
    </div>
  </div>
</div>

<div class="toast-container position-fixed bottom-0 end-0 p-3 z-3">
  <div id="liveToast" class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        Data sync completed successfully!
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>

<script>
  function triggerNotification() {
    const toastElement = document.getElementById('liveToast');
    const toast = bootstrap.Toast.getOrCreateInstance(toastElement);
    toast.show();
  }
</script>