3

I used the bootstrap navbar in LWC component. While the look and feel works, i could not get the menubar to expand/collapse when screen size is shrunk. Below is the code snippet. The relevant javascript files are uploaded as Static resources and have been imported into the component. I also used the latest jquery 3.5.1. Appreciate any feedback.

enter image description here

<template>

   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".shopbar">
           <span class="navbar-toggler-icon"></span>
       </button>

       <div class="collapse navbar-collapse shopbar" id="shopbar">
           <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
               <li class="nav-item active">
                   <a class="nav-link" href="/s/shop">Home <span class="sr-only">(current)</span></a>
               </li>
               <li class="nav-item active">
                   <a class="nav-link" href="/s/myorders" tabindex="-1">My Orders</a>
               </li>
           </ul>
               <c-smart-search ></c-smart-search>
       </div>
   </nav>
</template>

import {LightningElement} from 'lwc';
import bootstrap from '@salesforce/resourceUrl/bootstrap';
import jquery from '@salesforce/resourceUrl/jquery';
import popper from '@salesforce/resourceUrl/popper';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';

export default class ShopHeader extends LightningElement {
    connectedCallback(){
        loadStyle(this,  bootstrap +'/bootstrap-4.5.0-dist/css/bootstrap.min.css')
            .then(() => {
                console.log("this css is loaded");
                loadScript(this, jquery)
                    .then(() => {
                        console.log("the jquery is loaded");
                        loadScript(this, popper)
                            .then(() => {
                                console.log("the popper is loaded");
                                loadScript(this, bootstrap + '/bootstrap-4.5.0-dist/js/bootstrap.min.js')
                                    .then(() => {
                                        console.log("the bs scripts are loaded");
                                    });
                            });
                    })
            });
    }

    renderedCallback(){

    }

}

0

You must log in to answer this question.

Browse other questions tagged .