Feature Request: Customise sidebar directly.

[rajaravivarma-r]

trafficstars

Feature

We are in the process of upgrading from 1.25 to 2.14. Avo used to support editing the sidebar partial directly, but looks like the option has been removed in recent versions. This is essential for our app, since we like to keep the sidebar links in certain order and under specific headings. We mix link to dashboard with resources. I'm trying the upgrade in trial version, so it could be the one preventing me from doing it. If so please let me know.

Current workarounds

None, that I'm aware of.

Screenshots

Showing how we group resources according to our liking.

Additional context

NA

Urgency

[x] High

[adrianthedev]

Hey @rajaravivarma-r have you tried the Menu editor feature? It should allow you to create any custom menu that you'd like.

[rajaravivarma-r]

Oh! Wow! I didn't know it. I will check that out and close this issue it satisfies my needs. Thank you!

[rajaravivarma-r]

Hey @adrianthedev, I tried the Menu editor feature, it satisfies most of our requirement. But I would like to add some active_link_to such as,

<%= active_link_to "#{avo.root_path}dashboard", class: "px-4 pr-0 flex-1 flex mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-100", active: @active, target: @target, data: { turbo: false } do %>
  Dashboard
<% end %>

We use active_link_to directly because, we need to pass the data: {turbo: false} param. We do not want to load it through turbo because that is a react page.

Could you please tell, how to achieve this with Menu editor?

[adrianthedev]

Hmm, I think we only need to add the data option to the link option. It already uses active_link_to in the background.

[adrianthedev]

Hey @rajaravivarma-r try this prerelease with link_to "Dashboard", "#{avo.root_path}dashboards/sales", data: { turbo: false } and see if this helps.

[rajaravivarma-r]

I'll try that. Thanks for the prompt reply.

[rajaravivarma-r]

Hey @adrianthedev, that works as expected. Thank you. I will close the issue.

[rajaravivarma-r]

hey @adrianthedev, sorry to piggy back on the same issue, but this is an issue regarding sidebar behaviour, so adding it here.

Is there a way to keep the sidebar opened? When I navigate to a different resource the sidebar closes itself and I have to click open the hamburger menu to open it again.

[adrianthedev]

Hey @rajaravivarma-r, it should stay open if you opened it once. Can you share a video and maybe check the JS console for errors?

Is that happening on mobile or on desktop?

[rajaravivarma-r]

Hey @adrianthedev, sure I'll share a video. It was happening on Desktop, though I didn't change the user agent or anything.

[rajaravivarma-r]

I'm using gem 'avo', '= 2.15.3.pre.1.data.attrs.to.sidebar.items'. Here is the recording.

https://user-images.githubusercontent.com/1841235/192317469-c13d067a-c17f-4f04-823d-e2b1f1c8ef52.mp4

[adrianthedev]

That is definitely a bug. Are you doing anything to block cookies? We keep the last used setting in cookies.

[adrianthedev]

Also, can you search the DOM for data-sidebar-open-value and let me know what value are you getting?

[rajaravivarma-r]

I'll get the cookie and the data attribute value.

[rajaravivarma-r]

Here are the values for data-sidebar-open-value and avo.sidebar.open in cookie.

[adrianthedev]

This is weird. It should stay open. Have you overridden the application.html layout? There should be something like <div data-sidebar-target="mainArea" class="content-area flex-1 flex pt-16 relative <%= 'sidebar-open' if @sidebar_open %>"> that I don't see in your markup.

[rajaravivarma-r]

No, we haven't overridden application.html. We have overridden the _header.html and _head.html though.

This is the log of the request.

Started GET "/sandbox/resources/investment_accounts" for 127.0.0.1 at 2022-09-28 16:14:22 +0530
  User Load (0.4ms)  SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
Processing by Avo::InvestmentAccountsController#index as HTML
  Tenant Load (0.5ms)  SELECT "tenants".* FROM "tenants" WHERE "tenants"."id" = $1 LIMIT $2  [["id", 22], ["LIMIT", 1]]
  ↳ config/initializers/avo_configuration.rb:17:in `block (2 levels) in <main>'
   (26.8ms)  SELECT COUNT(*) FROM "investment_accounts"
  InvestmentAccount Load (28.2ms)  SELECT "investment_accounts".* FROM "investment_accounts" ORDER BY investment_accounts.created_at desc LIMIT $1 OFFSET $2  [["LIMIT", 24], ["OFFSET", 0]]
  Investor Load (28.5ms)  SELECT "investors".* FROM "investors" WHERE "investors"."id" IN ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21, $22, $23, $24) ORDER BY "investors"."created_at" DESC  [["id", 790], ["id", 789], ["id", 788], ["id", 787], ["id", 786], ["id", 785], ["id", 784], ["id", 783], ["id", 782], ["id", 781], ["id", 780], ["id", 779], ["id", 778], ["id", 777], ["id", 776], ["id", 775], ["id", 774], ["id", 773], ["id", 772], ["id", 771], ["id", 770], ["id", 769], ["id", 768], ["id", 767]]
  KycIdentityDetail Load (27.9ms)  SELECT "kyc_identity_details".* FROM "kyc_identity_details" WHERE "kyc_identity_details"."investor_id" IN ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21, $22, $23, $24)  [["investor_id", 790], ["investor_id", 789], ["investor_id", 788], ["investor_id", 787], ["investor_id", 786], ["investor_id", 785], ["investor_id", 784], ["investor_id", 783], ["investor_id", 782], ["investor_id", 781], ["investor_id", 780], ["investor_id", 779], ["investor_id", 778], ["investor_id", 777], ["investor_id", 776], ["investor_id", 775], ["investor_id", 774], ["investor_id", 773], ["investor_id", 772], ["investor_id", 771], ["investor_id", 770], ["investor_id", 769], ["investor_id", 768], ["investor_id", 767]]
  Rendering layout tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/layouts/avo/application.html.erb
  Rendering tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/base/index.html.erb within layouts/avo/application
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_resource_search.html.erb (Duration: 0.1ms | Allocations: 19)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_sortable_component.html.erb (Duration: 2.0ms | Allocations: 994)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_sortable_component.html.erb (Duration: 1.5ms | Allocations: 989)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_table_header.html.erb (Duration: 5.0ms | Allocations: 2750)
Read fragment views//avo/index/resource_table_component/investment_accounts/732-20220928060428787104/4533c0559b33038b92ca2226f856f0d3 (0.3ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/731-20220926123502278558/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/730-20220926122759919720/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/729-20220926102941982078/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/728-20220926071414511967/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/727-20220924064616428938/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/726-20220924063213680879/4533c0559b33038b92ca2226f856f0d3 (0.3ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/725-20220923061823693001/4533c0559b33038b92ca2226f856f0d3 (0.2ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/724-20220923050034594770/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/723-20220923040910366494/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/722-20220921075450382625/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/721-20220921074335670869/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/720-20220921063623962568/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/719-20220921052319362776/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/718-20220920102644863254/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/717-20220920095002965455/4533c0559b33038b92ca2226f856f0d3 (0.3ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/716-20220916064046975536/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/715-20220915052429707760/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/714-20220913114427305292/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/713-20220913113300658187/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/712-20220913080333405018/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/711-20220913064245922536/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/710-20220912122833282748/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
Read fragment views//avo/index/resource_table_component/investment_accounts/709-20220912122204896766/4533c0559b33038b92ca2226f856f0d3 (0.1ms)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/base/index.html.erb within layouts/avo/application (Duration: 33.2ms | Allocations: 22235)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_javascript.html.erb (Duration: 0.2ms | Allocations: 181)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_branding.html.erb (Duration: 0.0ms | Allocations: 66)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_pre_head.html.erb (Duration: 0.0ms | Allocations: 5)
[Webpacker] Everything's up-to-date. Nothing to do
[Webpacker] Everything's up-to-date. Nothing to do
  Rendered avo/partials/_head.html.erb (Duration: 8.9ms | Allocations: 3819)
[Webpacker] Everything's up-to-date. Nothing to do
  Rendered avo/partials/_logo.html.erb (Duration: 8.3ms | Allocations: 2008)
   (0.4ms)  SELECT COUNT(*) FROM "tenants" INNER JOIN "users_tenants" ON "tenants"."id" = "users_tenants"."tenant_id" WHERE "users_tenants"."user_id" = $1  [["user_id", 1]]
  ↳ app/views/avo/partials/_header.html.erb:1
  Tenant Load (0.2ms)  SELECT "tenants".* FROM "tenants" INNER JOIN "users_tenants" ON "tenants"."id" = "users_tenants"."tenant_id" WHERE "users_tenants"."user_id" = $1  [["user_id", 1]]
  ↳ app/views/avo/partials/_header.html.erb:10
  Rendered avo/partials/_header.html.erb (Duration: 6.4ms | Allocations: 9297)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_navbar.html.erb (Duration: 16.5ms | Allocations: 13587)
  KycVerifyTenant Exists? (26.8ms)  SELECT 1 AS one FROM "tenants" WHERE "tenants"."domain" = $1 LIMIT $2  [["domain", "floatr"], ["LIMIT", 1]]
  ↳ app/policies/kyc_request_policy.rb:29:in `tenant_subscribed?'
  UsersTenant Load (0.4ms)  SELECT "users_tenants"."authorization" FROM "users_tenants" WHERE "users_tenants"."user_id" = $1 AND "users_tenants"."tenant_id" = $2 LIMIT $3  [["user_id", 1], ["tenant_id", 22], ["LIMIT", 1]]
  ↳ app/models/user.rb:13:in `admin?'
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_sidebar_extra.html.erb (Duration: 0.0ms | Allocations: 5)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/sidebar/_license_warning.html.erb (Duration: 1.9ms | Allocations: 2001)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/sidebar/_license_warnings.html.erb (Duration: 2.0ms | Allocations: 2079)
  CACHE KycVerifyTenant Exists? (0.0ms)  SELECT 1 AS one FROM "tenants" WHERE "tenants"."domain" = $1 LIMIT $2  [["domain", "floatr"], ["LIMIT", 1]]
  ↳ app/policies/kyc_request_policy.rb:29:in `tenant_subscribed?'
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_sidebar_extra.html.erb (Duration: 0.0ms | Allocations: 5)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/sidebar/_license_warning.html.erb (Duration: 2.0ms | Allocations: 1986)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/sidebar/_license_warnings.html.erb (Duration: 2.1ms | Allocations: 2064)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_custom_tools_alert.html.erb (Duration: 0.0ms | Allocations: 6)
  Rendered avo/partials/_footer.html.erb (Duration: 0.0ms | Allocations: 8)
  Rendered tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/avo/partials/_scripts.html.erb (Duration: 0.0ms | Allocations: 5)
  Rendered layout tmp/profiling_gems/ruby/3.0.0/gems/avo-2.15.3.pre.1.data.attrs.to.sidebar.items/app/views/layouts/avo/application.html.erb (Duration: 172.3ms | Allocations: 112159)
Completed 200 OK in 477ms (Views: 145.4ms | ActiveRecord: 220.7ms | Allocations: 121531)

[rajaravivarma-r]

Actually, I can see div,

[adrianthedev]

Ok. so the sidebar-open class is present there. Can you please inspect the CSS properties and let me know if that class has any rules?

Also, are you using Avo from a repo or from rubygems? If it's from a repo, please recompile the assets rake avo:build-assets

[rajaravivarma-r]

This is how I specify the gem gem 'avo', '= 2.15.3.pre.1.data.attrs.to.sidebar.items' in the Gemfile.

I'll create a demo repo, for this issue, so that the debugging is efficient. What do you think?

[adrianthedev]

could you try the latest version 2.16? That should have the data-attributes feature.

[rajaravivarma-r]

It must be something with our app, because I created a demo app where it works fine.

[adrianthedev]

Yeah. Try and clear your cookies for your app and check the JS console for errors. Happy to help getting to the bottom of this.

[rajaravivarma-r]

I figured the problem, we are importing tailwind css in application.scss, and it causes the issue. application.scss

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

package.json

{
dependencies: {
    ...
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/line-clamp": "^0.3.1",
    "@tailwindcss/typography": "^0.5.2",
    "tailwindcss": "^3.0.23",
    "tailwindcss-stimulus-components": "^3.0.4",
    ...
}

If I remove those imports, then the sidebar works as expected. Any idea, how we can keep fix the sidebar, while keeping the imports.

[adrianthedev]

Hmmm... can you add that to your reproduction app and let me have a go? I can't say for sure off the top of my head.

[rajaravivarma-r]

Sure. I'll do that.

[rajaravivarma-r]

Hey @adrianthedev, I've put the repo here https://github.com/rajaravivarma-r/avo-demo. I can reproduce the issue here. Please take a look.

[adrianthedev]

Hey @rajaravivarma-r. The issue is that your styles are being loaded after Avo's. Here's the resolve:

• run rails g avo:eject :pre_head. This will add a new partial similar to _head.html.erb
• move your custom assets from _head to _pre_head
• 🙌 done!

[rajaravivarma-r]

Woah! That was quick. I'll try and let you know.

[rajaravivarma-r]

Awesome, it works. Would you mind sharing how one would go about debugging something like this?

I don't understand how this really happened, I don't think I have any CSS class that overrides Avo's.