wbrowar/craft-admin-bar

Position to bottom

Closed this issue · 6 comments

vandres commented

I can see, that there is already a "bottom" class defined in the CSS. How can I control/activate that, using only the Craft-Plugin?

wbrowar commented

Hi, @vandres, I've been thinking about this all week and I haven't come to a conclusion yet, but I wanted to discuss what I'm thinking here.

My thought is that if someone wants full control to use all of the features of Admin Bar Component you might be better off skipping the plugin and using the web component version directly (then you could add whatever links you might need and use all of the props and classes).

The goal of the plugin is to make some of that automatic, and to abstract some of the options to avoid forcing you to make updates based on changes in the Admin Bar Component side of things. For example, right now the rtl option on the {{ adminBar() }} method simply adds a class, .rtl, onto the <admin-bar> element. In the future, maybe there'll will be a need to add some sort of extra attribute for accessibility in addition to the .rtl class. This could be a change that's already handled in an update, instead of adding a deprecation or a breaking change, making it so you have to update your embed tag in all of your projects that use rtl.

Adding a classes attribute in {{ adminBar() }} options would be easy to implement, but I think you'd run into issues later on if things change from the Admin Bar Component side of things in a plugin update. My thought is that it's better off without adding that classes attribute.

To solve this, I can think of two ways:

  1. You could use the Custom CSS field in plugin settings to do what .bottom is doing. You could add this CSS to your custom CSS:

    @layer admin-bar {
  admin-bar {
    right: 0;
    bottom: 0;
    left: 0;
  }
}

  2. I could add a bottom argument to the {{ adminBar() }} method that adds the .bottom class.

I'm currently leaning toward not adding the bottom argument mainly to avoid adding too many options, however, I'm also open to it. What is your opinion on it?

vandres commented

Sorry for giving you a headache :D

I was thinking about using the admin-bar component myself. But then I struggeled, when I need to have multiple build pipelines. I want the admin-bar only for admins, and not in my global js/css, which all the users get. That's something the Craft plugin is already solving for me.

For me, the most logical would be not to use "external" classes at all but to provide options to the component itself <admin-bar position="bottom" rtl="true">. The next logical step then, would be for the Craft plugin to wrap those options. {{ adminBar({position: 'bottom', rtl: true}) }}. The internals of the component then decides, what styles to add. If you want to allow control over some of the style, I would use part and/or css variables.

wbrowar commented

@vandres Oh, no headaches at all! I’m trying to be a little more careful about what gets added to the plugin just to keep its scope down, but this is a reasonable thing. I just want to approach it the right way.

I’m thinking that a good way to go would be to add the position: 'bottom' option, but I think for now that will just be a way to add the bottom class to the Admin Bar Component. If in the future those get turned into attributes on the <admin-bar> element, then the plugin side of things could get updated. I’ll get working on that change and will update this issue when it’s out.

vandres commented

Thank you very much!

wbrowar commented

@vandres, I just published 4.3.0 with the position argument in there! Please let me know if you run into any issues with it.

In testing it out, you could use it with fixed and it will work from the top or the bottom of your HTML document:

<body>
    {{ adminBar({
        fixed: true,
        position: 'bottom',
    }) }}

    {# ... all the other HTML here ... #}
</body>

It also works really well when you use sticky and then place the adminBar() function at the bottom of your <body>:

<body>
    {# ... a bunch of HTML up here ... #}

    {{ adminBar({
        sticky: true,
        position: 'bottom',
    }) }}
</body>
vandres commented

Works like a charm!