Chore: Push burger slot to the same position as default burger

[franciscoh017]

Fixes #3906.

Proposed Changes

• Push burger slot to the same position as default burger using ml-auto

Example

Before

After

[netlify]

✅ Deploy Preview for buefy-org ready!

Name	Link
🔨 Latest commit	404b431
🔍 Latest deploy log	https://app.netlify.com/sites/buefy-org/deploys/6626ea72bdae75000973555f
😎 Deploy Preview	https://deploy-preview-4037--buefy-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kikuomax]

@franciscoh017 Thanks for your PR! I will review and test your change.

[kikuomax]

@franciscoh017 I have tested with the following simple component:

<template>
    <b-navbar>
        <template #brand>
            <b-navbar-item>
                <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>
            <p>🍔</p>
        </template>
    </b-navbar>
</template>

I think it has a problem if the screen is wider than $burger-breakpoint (1024px by default), where the burger slot is displayed beside the brand logo. It should be invisible on a wide screen.

Narrow screen:

Wide screen:

[franciscoh017]

@kikuomax is it present on dev branch?

[kikuomax]

@kikuomax is it present on dev branch?

@franciscoh017
I tested the above behavior on your branch (franciscoh017:franciscoh017/b-navbar-move-burger-slot-right). On dev branch, the burger icon always appears beside the brand logo whether the screen is wide or narrow.

[kikuomax]

@franciscoh017 @wesdevpro
I would like to keep your PR as a workaround rather than merging it, because

1. I do not think everyone would be happy with the burger slot contents wrapped in an <a> tag
2. We may not have defined the behavior of the burger slot, but I think it should appear only when the screen is narrow

The following code should be equivalent to your PR:

        <template #burger>
            <a href="#" class="ml-auto" role="button" aria-label="menu">🍔</a>
        </template>

[franciscoh017]

@franciscoh017 @wesdevpro I would like to keep your PR as a workaround rather than merging it, because

1. I do not think everyone would be happy with the burger slot contents wrapped in an <a> tag
2. We may not have defined the behavior of the burger slot, but I think it should appear only when the screen is narrow

The following code should be equivalent to your PR:

        <template #burger>
            <a href="#" class="ml-auto" role="button" aria-label="menu">🍔</a>
        </template>

Makes a lot of sense now that you mention it!