Better way for triggering the collapse of the NavBar.

[Dhavalc2012]

We want to trigger the collapse of the navbar on the phone when clicking on the link or outside the NavBar component when NavBar items are shown on the phone.

Currently we are triggering the collapse using target="#navBarCollapse" toggle="collapse". However for this we have to use b-button element which accept toggle attribute. Also, when using this NavBar has transition effect even on the desktop.

Following is the sample code:

<template>
 <Navbar
  expand="lg"
  background-color="body-tertiary"
 >
  <Container type="fluid">
   <NavbarBrand>Navbar</NavbarBrand>
   <NavbarToggler target="#navBarCollapse" toggle="collapse" />
   <NavbarCollapse id="navBarCollapse">
    <NavbarNav>
     <NavLink to="/" active>
     <b-button target="#navBarCollapse" toggle="collapse">
       Home
      </b-button>
     </NavLink>
     <NavLink>Features</NavLink>
     <NavLink>Pricing</NavLink>
     <NavLink disabled>
      Disabled
     </NavLink>
    </NavbarNav>
   </NavbarCollapse>
  </Container>
 </Navbar>
</template>

We also tried using the ref and using as a method like navBarCollapse.value.toggle() and navBarCollapse.value.show()

Is there a better way of handling this programmatically to avoid declaring elements such as b-button and have ability to fire from other components on the body?

[KoujiSano]

Thank you for your question.
To ensure I fully understand your request, would it be possible for you to provide the current sample code on StackBlitz?

[Dhavalc2012]

Here is the link for StackBlitz.

https://stackblitz.com/~/github.com/Dhavalc2012/use-bootstrap-starter?file=package.json
Once there please change the branch to origin/Dhavalc2012/patch-39959.

There are files that are in the example :

1. header-landing.vue in components/share folder.
2. sample-page.vue in the pages folder.

Ideally I would like to collapse the navbar on smaller screen when any click event happens outside the NavBar such in case Click Here to Hide NavBar button on the sample page. Currently buttons and collapsible accept toggle props from my understanding which triggers toggle ability on navBarCollapse.

From inspecting the NavbarCollapse there is a provider method for show, hide & toggle. So using ref I tried navBarCollapse.value.hide() but it did not work.

Am I doing something incorrect here? Please do correct me as I haven't used nuxt prior.

Also, Thank You for the package, I appreciate your efforts for this.

[KoujiSano]

Please try modifying the button attributes in sample-page.vue as shown below.
Does it behave as expected?

  <b-button target="#MainNavBar" toggle="collpase">
    Click Here to Hide NavBar
   </b-button>

  <b-button target="#MainNavBar" dismiss="collpase">
    Click Here to Hide NavBar
   </b-button>

The issue with [hide="collapse"] not working might be a bug.
We will release a fixed version once the cause is identified.

The following page might also be helpful:
https://usebootstrap.org/lang-en/components/collapse

[Dhavalc2012]

I had tried the following example on the documentation page and replaced Collapse component with NavBarCollapse. But that did not work.

 <b-button
  type="button"
  color="primary"
  @click="showCollapse"
 >
  Show
 </b-button>
 <b-button
  type="button"
  color="primary"
  @click="hideCollapse"
 >
  Hide
 </b-button>
 <b-button
  type="button"
  color="primary"
  @click="toggleCollapse"
 >
  Toggle
 </b-button>
 <Collapse ref="demoCollapse">
  <Card>
   <CardBody>
    Some placeholder content for the collapse component. This panel is
    hidden by default but revealed when the user activates the relevant
    trigger.
   </CardBody>
  </Card>
 </Collapse>
</template>

<script setup lang="ts">
const demoCollapse = ref(null);
const showCollapse = () => {
 if (demoCollapse.value) {
  demoCollapse.value.show();
 }
};
const hideCollapse = () => {
 if (demoCollapse.value) {
  demoCollapse.value.hide();
 }
};
const toggleCollapse = () => {
 if (demoCollapse.value) {
  demoCollapse.value.toggle();
 }
};
</script>

Issue might be the line exposeMethods(context, collapse, block); missing from the navbarCollapse component so it is unable to use the methods similar to Collapse.

I will test out your suggestion and provide you with a feedback.

[Dhavalc2012]

@KoujiSano I tried the dismiss="collpase" and it did work. It also works on b-a component