question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Feature Request] b-navbar-toggle - event on toggle

See original GitHub issue

Is your feature request related to a problem? Please describe…

I needed to put min-height property on my navbar, but for some reason when the navbar is open (on small devices, where the nav bar is collapsed at all), min-height is actually limiting the height.

I wanted to then set min-height only if the navbar is open

Describe the solution you’d like

To have an event with the flag when the menu is toggled

Describe alternatives you’ve considered

I tried to use a local boolean value and flip it on click event. However, if I click on one of the items in the menu, it will also close, while the event won’t trigger.

Additional context

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:14 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
tmorehousecommented, May 8, 2020

Perhaps something like:

<template>
  <b-navbar :style="computedStyle">
    <b-navbar-toggle target="nav-collapse">
    <b-collapse id="nav-collapse" v-modal="isCollapsed" is-nav>
       <!-- stuff here -->
    </b-collapse>
  </b-navbar>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  },
  computed: {
    computedStyle: {
      if (this.isCollapsed} {
        // No min-height applied
        return {}
      } else {
        return {
           minHeight: '300px'
        }
      }
    }
  }
}
</script>
0reactions
stale[bot]commented, Aug 16, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Navbar | Components - BootstrapVue
Navbar navigation links build on the <b-navbar-nav> parent component and requires the use of <b-collapse is-nav> and <b-nav-toggle> toggler for proper ...
Read more >
Navbar - Bootstrap
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, ...
Read more >
Changing class on b-navbar toggle in bootstap-vue
I have installed the Vue Devtools and I can see this event firing each time I press the navbar toggle button. My question...
Read more >
Navbar - React-Bootstrap
Toggle aria-controls="basic-navbar-nav" />. <Navbar. ... Images are supported but will likely require custom styling to work well. ... HomeFeaturesPricing.
Read more >
Bootstrap Navbar | Documentation for Tiki Wiki CMS Groupware
If you have a Menu module included in the topbar module zone for Social Networking layout the parameter "Show Navbar Toggle Button" must...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found