TrestleAdmin / trestle

A modern, responsive admin framework for Ruby on Rails
https://trestle.io
GNU Lesser General Public License v3.0
1.94k stars 173 forks source link

Customize navbar #456

Closed Tao-Galasse closed 5 months ago

Tao-Galasse commented 6 months ago

Hello @spohlenz!

Thank you for your amazing gem! :)

I wanted to customize the navbar on the very top of the admin panel.

In the example screenshot of your README, we can see a search bar for example. I would like to do something similar, and add a dropdown to be able to choose a context which would affect the displayed content below.

Additionally, I could want to add new actions to the current_user in the top right corner, and have more options than "my account" or "log out".

I tried to check in the source code if I could find a partial related to the header to override it, but I could only find stuff related to the sidebar, and not the navbar on the top.

Thanks again for your gem, and for your help! 😊

spohlenz commented 6 months ago

Header components, like the global search seen in the README, can be added using the view.header hook.

Trestle.configure do |config|
  config.hook("view.header") do
    render "admin/shared/header_partial"
  end
end

The header is a flexbox row, so you'll probably need to set the order and margin-right to position it where you want:

.my-header-component {
  order: -1;
  margin-right: auto;
}

The trestle-auth dropdown can be customized by overriding the trestle/auth/_userbox.html.erb partial. I do eventually plan to have a DSL for this, although I guess in the short term I should at least extract out the dropdown list into a separate partial for slightly easier customization.

Tao-Galasse commented 6 months ago

Thanks a lot for your quick answer @spohlenz, that's exactly what I needed! 😊

Tao-Galasse commented 5 months ago

Hi @spohlenz,

I'm reopening this issue because using the hook to add a custom partial in the header seems to have caused a strange bug.

Now, when I'm going in a form and submit it with errors on it, the errors doesn't appear on the UI. I have to refresh the page manually to make them appear. (For example, I am on the "administrators" list. I click on the "+" button to create a new one, and I'm redirected on the form. I submit it without filling any field and I just have a 422 in my server, but nothing appear on the UI. I have to refresh the page, submit it again, and only then I can see the errors appearing).

Any idea how to solve this? 🙏

EDIT: It seems like it was caused by importmap, which is a completly different and unrelated issue.

I'm closing this one again in favor of https://github.com/TrestleAdmin/trestle/issues/458. Thanks again for you help! 🙏