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.

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

Aggregation causes Sub menu icons to not appear? #218

Open
bradley-baylis opened this issue Jul 5, 2023 · 16 comments
Open

Aggregation causes Sub menu icons to not appear? #218

bradley-baylis opened this issue Jul 5, 2023 · 16 comments

Comments

@bradley-baylis
Copy link

bradley-baylis commented Jul 5, 2023

When we add a submenu to the main naviagtion, the chosen icon such as chevron doesn't appear. When trying to go directly to path of the icon in dev tools, you end up at a url such as example.com/includes/icons/chevron.svg, which is a page not found. Looks like a relative path isn't being resolved to the full icon path correctly.

@markconroy
Copy link
Member

Hi @bradley-baylis

Thanks for logging this issue. I can't replicate it however. I've created a new sub-theme and set that as the theme for my microsite. I've added a menu with three levels of sub-menus and the icons all seem to appear fine for me.

Can you do some more investigating and see if there's something particular to your site or if you can replicate it on a bare bones installatin.

Screenshot 2023-07-07 at 11 50 42
Screenshot 2023-07-07 at 11 50 55
Screenshot 2023-07-07 at 11 52 16

@bradley-baylis
Copy link
Author

bradley-baylis commented Jul 11, 2023

Hi @markconroy, I've been able to recreate this on a fresh install. We haven't created a sub-theme and don't plan to, so it's just:

  • Install localgov_microsites
  • Create microsite
  • Create user with trusted editor role and make them a group admin
  • Add link and sub-link to main menu in microsite admin
  • Set menu icon to chevron

Giving us:
image

The icon appears when you specifically don't set the sub menu icon and stops appearing when it is selected, I didn't notice when initally reporting this that there were two different values for --menu-sub-menu-icon. The original one actually works, it's just the value that overwrites it that doesn't work and presumably this is the one that is used when an icon is selected.

Icon unselected:

image

@Adnan-cds
Copy link
Contributor

We ran into a similar issue recently in a subtheme. This only happens when CSS aggregation is on.

@bradley-baylis
Copy link
Author

Turning off CSS aggregation hasn't resolved this particular issue for us @Adnan-cds, thanks for the suggestion though.

@markconroy
Copy link
Member

We'll want to make sure this work whether CSS aggregation is on/off. Thanks for the steps to reproduce @bradley-baylis I'll try sort it again with that info.

@markconroy
Copy link
Member

I still can't replicate this, following the instructions posted above.

Screenshot 2023-07-21 at 12 26 53
Screenshot 2023-07-21 at 12 27 01
Screenshot 2023-07-21 at 12 27 12

@bradley-baylis
Copy link
Author

Hi @markconroy, apologies for the delay in responding. I recorded a quick video of the steps I followed here. Though now the sub-link isn't appearing at all. I'm probably missing a step, I haven't looked at this for a little while.

@markconroy
Copy link
Member

@bradley-baylis if the sub menu items are not showing, you probably need to check the "Show as expanded" checkbox on the parent item

@bradley-baylis
Copy link
Author

Ah yes thank you. So with that extra step as well I get back to the inital problem from a vanilla install.

image

I also tried different colour combos to ensure it wasn't blending into the background and turning off css aggregation on this vanilla install, neither of which made a difference.

@markconroy
Copy link
Member

Thanks @bradley-baylis

Can you give me details about what browser you are using and what operating system, etc? I'll see if I can replicate it on the exact same set up you have.

@bradley-baylis
Copy link
Author

Hi Mark, thanks for looking into this. In the case of running the fresh localgov install, I'm using Ubuntu 20.04 via WSL2, lando 3.6.5, docker 20.10.22 and Firefox. The same issue exists on a site we've already deployed to Platform.sh and that occurs on Edge, Chrome and Firefox.

@markconroy
Copy link
Member

Hmmm, I'm not sure I can replicate this. If you are using Ubuntu via docker, then we have the same operating system. We're both running Firefox, and we've both deployed to platform.sh.

I'm stumped. I'll keep looking into it, but really struggling to replicate it so I can debug it.

@bradley-baylis
Copy link
Author

Very odd indeed, thanks anyway for your time Mark

@bradley-baylis
Copy link
Author

I've just tried turning CSS aggregation off again on a whim and it's done the job this time. There must have been something misconfigured when I tried turning it off before. Thanks again @Adnan-cds for the suggestion and @markconroy for your time!

@Adnan-cds
Copy link
Contributor

Sorry, I should have better explained the cause of the issue. IIRC, this was caused by the aggregator rewriting the icon path incorrectly. Without aggregation, the icon path in a subtheme of localgov_microsites_base was pointing to the correct path. So it's more of a problem with the aggregator. I haven't investigated any work-around.

@markconroy markconroy changed the title Sub menu icons aren't appearing Aggregation causes Sub menu icons to not appear? Sep 13, 2023
@markconroy markconroy reopened this Sep 13, 2023
@markconroy
Copy link
Member

I'm going to re-open this, since it looks like we now know (kind of) why the issue is happening.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants