[4.0] Align sidebar icon

[ciar4n]

Pull Request for Issue #27135 .

Summary of Changes

Moves sidebar icons to using flex. Fixes alignment issue.

Testing Instructions

Apply this patch and run node build.js --compile-css for updating the changed SCSS.

Check sidebar icons are aligned.

Before PR

With PR

Documentation Changes Required

[infograf768]

This totally breaks RTL...

[infograf768]

FYI, code for rtl is in template-rtl.scss

[C-Lodder]

& [dir=rtl] {
  margin-left: auto;
}

this might fix the RTL issue @infograf768 mentioned

[infograf768]

Looks like the issue is partly
.main-nav .has-arrow .sidebar-item-title {
margin-right: auto;
}

which should be
margin-left: auto;
in RTL
but this not sufficient to solve the position of the arrows

[ciar4n]

Should be ok now...

[infograf768]

RTL solved.

Another issue with the home multilingual menutypes

before:

after

the badges are added in
mod_menu/tmp/default_submenu.php line 113
and
mod_submenu/Menu/Menu.php line 176

[ciar4n]

Thank you. Badges fixed.

[Quy]

I have tested this item ✅ successfully on 697f52f

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27156.}

[infograf768]

Will test later. Maybe worth adding all rtl specific overrides in the sidebar.scss as I did already for other rtl stuff in various PRs in the recent weeks.

[infograf768]

@ciar4n

I propose this patch which includes your changes but moves to _sidebar.scss all main-nav rtl stuff (improved) and deletes it from template-rtl.scss.
If you agree, could you update your PR?

navbar_rtl.diff.zip

[infograf768]

@ciar4n
I modified the .zip above to indent correctly the arrow in submenu

+[dir=rtl] .main-nav ul .dropdown-submenu a {
+  padding: 0 2.0rem 0 1rem;

Test can be done using the alternate preset.

[ciar4n]

@infograf768

I have moved the rtl to the sidebar.scss as suggested. Also removed some redundant css.

[infograf768]

@ciar4n
Your patch is working but I wonder about

      a {
        [dir=ltr] & {
          padding-left: 3rem;
        }

        [dir=rtl] & {
          padding-right: 3rem;
        }

and similar further

      a::before {
        [dir=ltr] & {
          left: 1.25rem;
        }

        [dir=rtl] & {
          right: 1.25rem;
        }
      }

Do we need the [dir=ltr] or is it there to just prevent adding a padding-right: 0 in the rtl part?

[ciar4n]

Do we need the [dir=ltr] or is it there to just prevent adding a padding-right: 0 in the rtl part?

Yes exactly. It avoids having to correct the ltr css in the rtl.

Personally I find defining both ltr and rtl a little cleaner and easier to read. It also makes me more rtl aware (which I tend to forget about).

Alas I am happy to change it to whichever you prefer?

[infograf768]

I have tested this item ✅ successfully on 9166828

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27156.}

[infograf768]

I like the idea. Cleaner indeed. Rtc.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27156.}

[infograf768]

Tks!

[ciar4n]

Thank you for the tests