I would like to know how to implement bootstrap navbar in lit-element/lit-html
I have created navbar component in lit-element but navbar dropdown and toggling are not working.
I have to implement fixed-top navbar as a lit-element component in html. please check the code and got stuck. If any alternatives, kindly provide solution.
// component.js
import { LitElement, html } from 'lit-element';
class MyElement extends LitElement {
render(){
return html`
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand"><img src="../images/send4x.svg" alt="" class="logoC mr-4"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown mr-4">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownProvider" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Providers
</a>
<div class="dropdown-menu mr-4" aria-labelledby="navbarDropdownProvider">
<a class="dropdown-item"
href="#">trans</a>
<a class="dropdown-item"
href="#">fund</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
</div>
`;
}
}
customElements.define('my-element', MyElement);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="./my-element.js"></script>
<title>lit-element code sample</title>
</head>
<body>
<my-element> </my-element>
</body>
</html>