Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

b-navbar burger slot #3906

Open
takyonfr opened this issue Nov 7, 2023 · 2 comments · May be fixed by #4037
Open

b-navbar burger slot #3906

takyonfr opened this issue Nov 7, 2023 · 2 comments · May be fixed by #4037
Assignees
@wesdevpro
Labels
bug help wanted need-investigation

Comments

@takyonfr
Copy link

takyonfr commented Nov 7, 2023

Overview of the problem

Buefy version: [0.9.25]
Vuejs version: [2.7]
*Linux Mint/Firefox:

Description

Hi, I think there is a bug in b-navbar, when I use the burger slot, it puts its content in brand div, the brand and the burger are stuck in the left corner.

Steps to reproduce

    <b-navbar
      centered
      :mobile-burger="true"
      :class="isHome ? 'home-navbar md:mt-3' : 'app-navbar lg-container mx-auto'"
    >
      <template #burger>
        <!-- account menu -->
        <navbar-account />
      </template>
</b-navbar>

Expected behavior

The avatar trigger button should be in place of the burger (in the right corner)

Actual behavior

The avatar trigger button is near the brand logo

buefy_bug
@wesdevpro wesdevpro self-assigned this Nov 7, 2023
@franciscoh017
Copy link
Contributor

franciscoh017 commented Apr 17, 2024 •
edited by wesdevpro

@wesdevpro @kikuomax

Could be solved by #4037

The .navbar-burger is contained inside the brand slot.

image

What would be missing here is the styles that are applied to the default burger that is generated when no template is passed to the burger slot.

Easy to fix if burger is moved to the right when using the burger slot maybe with ml-auto like bulma does with .navbar-burger.
image

For example:

<b-navbar>
        <template #brand>
            <b-navbar-item tag="router-link" :to="{ path: '/' }">
                <img
                    src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
                    alt="Lightweight UI components for Vue.js based on Bulma"
                >
            </b-navbar-item>
        </template>
        <template #burger>
            <b-navbar-item href="#">
               <b-icon tag="a" icon="account"></b-icon>
            </b-navbar-item>
        </template>
</b-navbar>

image

@franciscoh017 franciscoh017 linked a pull request Apr 17, 2024 that will close this issue
Open
@kikuomax
Copy link
Collaborator

@takyonfr Sorry for a very late reply. Why don't you use the #end slot instead? Would you expect your avatar trigger to disappear when the screen is wide as the default burger does?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wesdevpro wesdevpro

Labels
bug help wanted need-investigation
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Chore: Push burger slot to the same position as default burger franciscoh017/buefy
4 participants
@kikuomax @wesdevpro @takyonfr @franciscoh017