Bug 37222 - Standardize markup for sidebar menus
Summary: Standardize markup for sidebar menus
Status: Pushed to main
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Owen Leonard
QA Contact: Lucas Gass (lukeg)
URL:
Keywords:
Depends on:
Blocks: 37250
  Show dependency treegraph
 
Reported: 2024-06-28 17:46 UTC by Owen Leonard
Modified: 2025-02-21 15:44 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
This patch standardizes the way side navigation menus are built in the staff client.
Version(s) released in:
25.05.00
Circulation function:


Attachments
Bug 37222: Standardize markup for sidebar menus (68.57 KB, patch)
2024-06-28 17:56 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (91.84 KB, patch)
2024-07-05 16:37 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (91.93 KB, patch)
2024-07-05 18:05 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (97.33 KB, patch)
2024-07-08 15:31 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (97.59 KB, patch)
2024-07-23 14:41 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (97.49 KB, patch)
2024-07-26 14:52 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (97.76 KB, patch)
2024-08-23 15:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (98.47 KB, patch)
2024-09-03 17:40 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (98.44 KB, patch)
2024-09-06 20:00 UTC, Sukhmandeep
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (97.94 KB, patch)
2024-11-05 12:59 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (98.58 KB, patch)
2024-11-13 17:00 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (98.11 KB, patch)
2024-12-09 19:40 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) Correct style of Vue sidebars (1.08 KB, patch)
2024-12-09 19:40 UTC, Owen Leonard
Details | Diff | Splinter Review
Screenshots - ERM - Before and after (137.26 KB, application/pdf)
2024-12-28 19:57 UTC, David Nind
Details
Bug 37222: (follow-up) More corrections to sidebar style (5.84 KB, patch)
2025-01-13 18:46 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (98.11 KB, patch)
2025-01-17 14:37 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) Correct style of Vue sidebars (1.08 KB, patch)
2025-01-17 14:37 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) More corrections to sidebar style (4.88 KB, patch)
2025-01-17 14:37 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (98.26 KB, patch)
2025-01-28 18:21 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37222: (follow-up) Correct style of Vue sidebars (1.13 KB, patch)
2025-01-28 18:21 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37222: (follow-up) More corrections to sidebar style (4.94 KB, patch)
2025-01-28 18:21 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue (837 bytes, patch)
2025-01-28 18:36 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue (892 bytes, patch)
2025-01-29 22:15 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (98.24 KB, patch)
2025-01-31 20:48 UTC, David Nind
Details | Diff | Splinter Review
Bug 37222: (follow-up) Correct style of Vue sidebars (1.18 KB, patch)
2025-01-31 20:48 UTC, David Nind
Details | Diff | Splinter Review
Bug 37222: (follow-up) More corrections to sidebar style (4.98 KB, patch)
2025-01-31 20:48 UTC, David Nind
Details | Diff | Splinter Review
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue (938 bytes, patch)
2025-01-31 20:48 UTC, David Nind
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (121.52 KB, patch)
2025-02-12 13:31 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) Correct style of Vue sidebars (1.18 KB, patch)
2025-02-12 13:31 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) More corrections to sidebar style (3.53 KB, patch)
2025-02-12 13:31 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue (940 bytes, patch)
2025-02-12 13:31 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: Standardize markup for sidebar menus (121.10 KB, patch)
2025-02-20 18:11 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) Correct style of Vue sidebars (1.18 KB, patch)
2025-02-20 18:11 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) More corrections to sidebar style (3.53 KB, patch)
2025-02-20 18:11 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue (940 bytes, patch)
2025-02-20 18:11 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2024-06-28 17:46:03 UTC
We've got a couple of different ways we're marking up sidebar menus, and we're limiting ourselves by tying the style to an ID. There are a few cases where we want to include more than one menu in the sidebar and we shouldn't have to update CSS just to make them consistent.

I'm proposing: 

    <div id="circ-menu" class="sidebar_menu">
       <ul>
          ...
       </ul>
    </div>
Comment 1 Owen Leonard 2024-06-28 17:56:33 UTC Comment hidden (obsolete)
Comment 2 David Nind 2024-07-04 00:45:57 UTC
From my testing, the sidebar menu items are not highlighted when you are on the respective page, or a page related to that menu area.

Here are my initial notes for each area I checked:

- Circulation > Check out to a patron: is a bullet pointed list without styling

- Catalog > View a bibliographic record: OK

- Administration > View system preferences: selected group does not have a light background for sections

- Acquisitions > Acquisitions home: Acquisitions home not highlighted

- Cataloging > Stock rotation > Manage stages and manage items for a rotation: 
  . Stock rotation sidebar menu item not highlighted
  . When on other pages (Manage stages, Manage items), those are highlighted as expected at the top of the sidebar menu, but stock rotation further down the sidebar isn't (it is highlighted before the patch)

- Cataloging > Stage MARC records for import: Stage records for import sidebar menu item not highlighted (same for Managed staged records sidebar menu item)

- Reports > Acquisitions statistics: sidebar menu item not highlighted, and not highlighted on the report results page (same for other reports)

- Reports > View dictionary: sidebar menu item not highlighted

- Point of sale: sidebar menu items not highlighted

- E-resource management: tree of sub menu items not indented

- Preservation: seems OK, but I didn't add any data

- Serials: seems OK

- Tools > Patron lists: sidebar menu items not highlighted

Happy to add some screenshots if that would make it easy to understand my notes.

Testing notes (using KTD):
1. Rebuild the CSS and JS: yarn build
2. Enable these system preferences (and add appropriate data):
   - StockRotation: add a rota and items to the rota
   - ERMModule 
   - PreservationModule
   - EnablePointOfSale
   - UseCashRegisters (and add a cash register)
Comment 3 Owen Leonard 2024-07-05 16:37:47 UTC Comment hidden (obsolete)
Comment 4 Owen Leonard 2024-07-05 18:05:50 UTC Comment hidden (obsolete)
Comment 5 David Nind 2024-07-07 03:39:22 UTC
Thanks Owen!

I've had another go at testing. 

These items remain:

1. Circulation > Check out to a patron: I went to Circulation from the home page, then "Check out" from the circulation page. The sidebar menu is still a bulleted list without styling - this is the same for all other areas of Circulation where the sidebar menu is displayed:
  . In the patch, I can't match the before markup (<div id="menu">) with what is on the actual page HTML before the patch is applied
  . In the patch, the updated markup is: <div id="circ-menu" class="sidebar_menu">
  . On the page after the patch is applied, the markup is: <div id="circ-menu"> (both for Firefox and Chromium)

2. Administration > View system preferences: no change from previous testing - the section you are on (such as Administration) does not have a light background for the sub sidebar menu options for that section (for example - CAS authentication to Share anonymous usage statistics has the normal gray background, not the light gray background). (As an aside, I think I preferred the way it was before the theme update - with the submenus aligned to the right and the same text size as the group heading.)

3. Cataloging > Stock rotation > Manage stages and manage items for a rotation:  
  . When on other pages (Manage stages, Manage items), those are highlighted as expected at the top of the sidebar menu, but stock rotation further down the sidebar isn't (it was highlighted before the patch).


Other areas - either fixed or the same behavour as before the patch
===================================================================

- Catalog > View a bibliographic record: OK

- Acquisitions > Acquisitions home: OK and improvements (when on vendor page, highlights appropriate vendor sidebar menu items - didn't before) (fixed - Acquisitions home not highlighted):
  . Note that while the behavour remains the same for the vendor sidebar menu, it is a little inconsistent, but outside the scope of this bug I think:
    . Baskets: displays vendor sidebar menu + the full sidebar menu
    . Basket groups: displays vendor sidebar menu + the full sidebar menu
    . Contracts: vendor sidebar menu disappears, and displays the full sidebar menu
    . Vendor issues: only shows the vendor sidebar menu 
    . Invoices: vendor sidebar menu disappears, and displays the search filters and the full sidebar menu with Invoices highlighted
    . Uncertain prices: only shows the vendor sidebar menu 

- Cataloging > Stage MARC records for import: OK (fixed - Stage records for import sidebar menu item not highlighted (same for Managed staged records sidebar menu item))

- Reports > Acquisitions statistics: OK (fixed - sidebar menu item not highlighted, and not highlighted on the report results page (same for other reports))

- Reports > View dictionary: OK (fixed - sidebar menu item not highlighted)

- Point of sale: OK (fixed - sidebar menu items not highlighted)

- E-resource management: OK (fixed - tree of sub menu items not indented)

- Preservation: seems OK, but I didn't add any data

- Serials: OK

- Tools > Patron lists: OK (fixed - sidebar menu items not highlighted)
Comment 6 Owen Leonard 2024-07-08 15:31:34 UTC Comment hidden (obsolete)
Comment 7 David Nind 2024-07-22 21:18:20 UTC
The patch no longer applies 8-(...

git bz apply 37222

Bug 37222 - Standardize markup for sidebar menus

168595 - Bug 37222: Standardize markup for sidebar menus

Apply? [(y)es, (n)o, (i)nteractive] y
Applying: Bug 37222: Standardize markup for sidebar menus
Using index info to reconstruct a base tree...
M	koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-menu.inc
M	koha-tmpl/intranet-tmpl/prog/en/includes/circ-menu.inc
M	koha-tmpl/intranet-tmpl/prog/en/modules/tags/review.tt
M	t/cypress/integration/ERM/Agreements_spec.ts
M	t/cypress/integration/ERM/DataProviders_spec.ts
M	t/cypress/integration/ERM/Licenses_spec.ts
M	t/cypress/integration/ERM/Packages_spec.ts
M	t/cypress/integration/ERM/Titles_spec.ts
Falling back to patching base and 3-way merge...
Auto-merging t/cypress/integration/ERM/Titles_spec.ts
Auto-merging t/cypress/integration/ERM/Packages_spec.ts
Auto-merging t/cypress/integration/ERM/Licenses_spec.ts
Auto-merging t/cypress/integration/ERM/DataProviders_spec.ts
Auto-merging t/cypress/integration/ERM/Agreements_spec.ts
Auto-merging koha-tmpl/intranet-tmpl/prog/en/modules/tags/review.tt
Auto-merging koha-tmpl/intranet-tmpl/prog/en/includes/circ-menu.inc
Auto-merging koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-menu.inc
CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-menu.inc
error: Failed to merge in the changes.
Patch failed at 0001 Bug 37222: Standardize markup for sidebar menus
Comment 8 Owen Leonard 2024-07-23 14:41:57 UTC Comment hidden (obsolete)
Comment 9 Owen Leonard 2024-07-26 14:52:18 UTC Comment hidden (obsolete)
Comment 10 Owen Leonard 2024-07-26 15:29:10 UTC
Rebased.
Comment 11 Owen Leonard 2024-08-23 15:13:39 UTC Comment hidden (obsolete)
Comment 12 Owen Leonard 2024-09-03 17:40:59 UTC Comment hidden (obsolete)
Comment 13 Sukhmandeep 2024-09-06 20:00:34 UTC Comment hidden (obsolete)
Comment 14 Owen Leonard 2024-11-05 12:59:03 UTC Comment hidden (obsolete)
Comment 15 Owen Leonard 2024-11-13 17:00:51 UTC Comment hidden (obsolete)
Comment 16 Lucas Gass (lukeg) 2024-11-22 20:41:55 UTC
Everything looks right except in ERM and Preservation modules. There I am seeing an extra pseudo element (::after) making things look a bit off:

.breadcrumb-item + .breadcrumb-item::before {
  background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;


If I remove this CSS it looks right.
Comment 17 Owen Leonard 2024-12-09 19:40:11 UTC Comment hidden (obsolete)
Comment 18 Owen Leonard 2024-12-09 19:40:13 UTC Comment hidden (obsolete)
Comment 19 David Nind 2024-12-28 19:57:09 UTC
Created attachment 175969 [details]
Screenshots - ERM - Before and after

I've re-tested and only have a couple of comments. Not sure if these are show stoppers for signing off.

Change of behavour/not working as expected
===========================================

Cataloging -> Stock rotation -> Manage stages and manage items for a rotation
-----------------------------------------------------------------------------

When on other pages (Manage stages, Manage items), those are highlighted as expected at the top of the sidebar menu.

However, the stock rotation sidebar menu item further isn't - it was highlighted before the patch.

ERM
---

There is a slight change to the sidebar menu items - see the screenshots attached.

After the patch, there is a darker grey vertical bar before each sub menu item.

Before the patch, this was not there and a green vertical bar was only shown when you were on that menu section.

Existing behavour - no change, but may need fixing on another bug
=================================================================

Point of sale - breadcrumbs and page titles
-------------

Cash summary for Centerville: the breadcrumbs and browser title in the Cash summary for Centerville/Transaction history are not correct. However, there is no change from before the patch.

Examples:
- When on Cash summary for Centerville, the breadcrumb and browser page title are just "Cash summary for Centerville", instead of "Point of sale > Cash summary for Centerville".
- When in the transaction history for a cash register, no menu items are highlighted and there are no proper breadcrumb or browser page title, just "Transaction history....".

ERM and Preservation
--------------------

All sidebar menu items are in italic, which is different from all the other sidebars in Koha.

I don't know if this is a specific design choice, or has accidentally changed.

I do recall that they weren't originally italicised (as far as I can remember).

Preservation
------------

For any action for any of the menus, the sidebar menu is not highlighted, for example: 
- Trains > New train, or Trains > select an existing train

This is the same behavour as before the patch.
Comment 20 Lisette Scheer 2025-01-02 21:01:35 UTC
David, thanks for the thorough notes, I noticed the same things. 

(In reply to David Nind from comment #19)

> 
> Change of behavour/not working as expected
> ===========================================
> 
> Cataloging -> Stock rotation -> Manage stages and manage items for a rotation
> -----------------------------------------------------------------------------
> 
> When on other pages (Manage stages, Manage items), those are highlighted as
> expected at the top of the sidebar menu.
> 
> However, the stock rotation sidebar menu item further isn't - it was
> highlighted before the patch.
> 

I'm not sure the best course of action here, but I agree that it's odd that it's not highlighted anymore because it is still the part of that overall sidebar you're in.

> ERM
> ---
> 
> There is a slight change to the sidebar menu items - see the screenshots
> attached.
> 
> After the patch, there is a darker grey vertical bar before each sub menu
> item.
> 
> Before the patch, this was not there and a green vertical bar was only shown
> when you were on that menu section.
> 

I think the grey bars might come from the submenus having a white background instead of grey. I think they should either have a grey background or not have the bars when they aren't selected.
Comment 21 Lisette Scheer 2025-01-02 21:12:34 UTC
The breadcrumbs are strange in the ERM

E-resource management <correct
eHoldings < class="current disabled" no link and marked as current
Local < class="current disabled" no link and marked as current
Packages < link and not marked as current

This change and the grey bars in the erm are why I'm going to fail qa on this.

I think the rest could be handled separately if needed, but aren't blockers. 

It looks like the italics in the sidebar are from the bootstrap 5 update, so I'll file a bug related to that.
Comment 22 Owen Leonard 2025-01-13 18:46:53 UTC Comment hidden (obsolete)
Comment 23 Owen Leonard 2025-01-13 18:47:47 UTC
> E-resource management <correct
> eHoldings < class="current disabled" no link and marked as current
> Local < class="current disabled" no link and marked as current
> Packages < link and not marked as current

I think you're describing the same behavior as in main? Could you confirm?
Comment 24 Kyle M Hall (khall) 2025-01-17 13:36:30 UTC
Could you check to see if your patches still apply to main?

Apply? [(y)es, (n)o, (i)nteractive] y
Applying: Bug 37222: Standardize markup for sidebar menus
Applying: Bug 37222: (follow-up) Correct style of Vue sidebars
Applying: Bug 37222: (follow-up) More corrections to sidebar style
error: sha1 information is lacking or useless (koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue).
error: could not build fake ancestor
Patch failed at 0001 Bug 37222: (follow-up) More corrections to sidebar style
Comment 25 Owen Leonard 2025-01-17 14:37:11 UTC
Created attachment 176732 [details] [review]
Bug 37222: Standardize markup for sidebar menus

This patch updates sidebar menu markup so that it's consistent, with a
common class (".sidebar_menu") and a unique ID. The style is tied to the
class rather than the ID, simplifying the CSS.

Note: This patch contains indentation changes so ignore whitespace when
viewing the diff.

The updated patch contains corrections to JavaScript which needed
selectors to be changed to match the new markup.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

Check pages which contain each modified menu:

- Circulation -> Check out to a patron
- Catalog -> View a bibliographic record
- Administration -> View system preferences
- Acquisitions -> Acquisitions home
- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation
- Cataloging -> Stage MARC records for import
- Reports -> Acquisitions statistics
- Reports -> View dictionary
- Point of sale
- E-resource management
- Preservation
- Serials
- Tools -> Patron lists

Sponsored-by: Athens County Public Libraries
Comment 26 Owen Leonard 2025-01-17 14:37:13 UTC
Created attachment 176733 [details] [review]
Bug 37222: (follow-up) Correct style of Vue sidebars

NavigationItem.vue generates both breadcrumb menus and sidebar menus.
Sidebar menus should not have the same markers between list elements.
Comment 27 Owen Leonard 2025-01-17 14:37:16 UTC
Created attachment 176734 [details] [review]
Bug 37222: (follow-up) More corrections to sidebar style
Comment 28 Lucas Gass (lukeg) 2025-01-28 18:11:00 UTC
In js/vue/components/NavigationItem.vue:

#navmenulist .breadcrumb-item::before {
    display: none;
}

Do we still need this?
Comment 29 Lucas Gass (lukeg) 2025-01-28 18:21:12 UTC
Created attachment 177288 [details] [review]
Bug 37222: Standardize markup for sidebar menus

This patch updates sidebar menu markup so that it's consistent, with a
common class (".sidebar_menu") and a unique ID. The style is tied to the
class rather than the ID, simplifying the CSS.

Note: This patch contains indentation changes so ignore whitespace when
viewing the diff.

The updated patch contains corrections to JavaScript which needed
selectors to be changed to match the new markup.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

Check pages which contain each modified menu:

- Circulation -> Check out to a patron
- Catalog -> View a bibliographic record
- Administration -> View system preferences
- Acquisitions -> Acquisitions home
- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation
- Cataloging -> Stage MARC records for import
- Reports -> Acquisitions statistics
- Reports -> View dictionary
- Point of sale
- E-resource management
- Preservation
- Serials
- Tools -> Patron lists

Sponsored-by: Athens County Public Libraries
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 30 Lucas Gass (lukeg) 2025-01-28 18:21:14 UTC
Created attachment 177289 [details] [review]
Bug 37222: (follow-up) Correct style of Vue sidebars

NavigationItem.vue generates both breadcrumb menus and sidebar menus.
Sidebar menus should not have the same markers between list elements.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 31 Lucas Gass (lukeg) 2025-01-28 18:21:17 UTC
Created attachment 177290 [details] [review]
Bug 37222: (follow-up) More corrections to sidebar style

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 32 Owen Leonard 2025-01-28 18:36:34 UTC
Created attachment 177291 [details] [review]
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue
Comment 33 Lucas Gass (lukeg) 2025-01-29 22:15:55 UTC
Created attachment 177324 [details] [review]
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 34 David Nind 2025-01-31 20:48:24 UTC
Created attachment 177409 [details] [review]
Bug 37222: Standardize markup for sidebar menus

This patch updates sidebar menu markup so that it's consistent, with a
common class (".sidebar_menu") and a unique ID. The style is tied to the
class rather than the ID, simplifying the CSS.

Note: This patch contains indentation changes so ignore whitespace when
viewing the diff.

The updated patch contains corrections to JavaScript which needed
selectors to be changed to match the new markup.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

Check pages which contain each modified menu:

- Circulation -> Check out to a patron
- Catalog -> View a bibliographic record
- Administration -> View system preferences
- Acquisitions -> Acquisitions home
- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation
- Cataloging -> Stage MARC records for import
- Reports -> Acquisitions statistics
- Reports -> View dictionary
- Point of sale
- E-resource management
- Preservation
- Serials
- Tools -> Patron lists

Sponsored-by: Athens County Public Libraries
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 35 David Nind 2025-01-31 20:48:27 UTC
Created attachment 177410 [details] [review]
Bug 37222: (follow-up) Correct style of Vue sidebars

NavigationItem.vue generates both breadcrumb menus and sidebar menus.
Sidebar menus should not have the same markers between list elements.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 36 David Nind 2025-01-31 20:48:30 UTC
Created attachment 177411 [details] [review]
Bug 37222: (follow-up) More corrections to sidebar style

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 37 David Nind 2025-01-31 20:48:33 UTC
Created attachment 177412 [details] [review]
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 38 David Nind 2025-01-31 20:54:58 UTC
I've added my sign off as well, in case Lucas's sign off can count as the QA (and to get this one through).

I've also added my testing notes - it points out some inconsistencies and things I find odd, but fixing these are for other bugs.

Some specific items for fixing elsewhere (same behavour as before the patch):
- Cataloguing: Fast cataloging menu item missing when in any of the other cataloging sections
- Circulation:
  . No "Bookings to collect" menu item shown in the sidebar
  . Holds section on the circulation page - title is now "Holds and bookings", however the sidebar menu title is just "Holds"
- Preservation: when you edit a train (Trains menu) or edit a processing step (Settings), the sidebar menu is not highlighted and the breadcrumb and browser page title don't really match)


Testing notes (using KTD)
=========================

- Catalog -> View a bibliographic record: OK

- Administration -> View system preferences: OK

- Acquisitions -> Acquisitions home: OK (same behvour as before the patch, see notes)
  . Administration sidebar:
    . Displays as Budgets, Funds, Currencies, Manage invoice fields, Manage order basket fields, Manage order line fields
    . When you change to Budgets or Funds you still in the acquisitions sidebar
    . For all the other administration areas the sidebar changes to the administration sidebar menu (the order is Currencies and exchange rates, Budgets, Funds)
  . Note that while the behavour remains the same for the vendor sidebar menu, it is a little inconsistent, but outside the scope of this bug:
    . Baskets: displays vendor sidebar menu + the full sidebar menu
    . Basket groups: displays vendor sidebar menu + the full sidebar menu
    . Contracts: vendor sidebar menu disappears, and displays the full sidebar menu
    . Vendor issues: only shows the vendor sidebar menu 
    . Invoices: vendor sidebar menu disappears, and displays the search filters and the full sidebar menu with Invoices highlighted
    . Uncertain prices: only shows the vendor sidebar menu 

- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation: OK
  . Enable the StockRotation system preference

- Cataloging -> Stage MARC records for import: OK

- Cataloging: OK (same behvour as before the patch, see note)
  . Fast cataloging menu item missing when in any of the other cataloging sections
  
Circulation: OK (same behvour as before the patch, see note)
- Holds and bookings > Bookings to collect:
  . "Bookings to collect" menu item not shown in the sidebar when any of the other items selected
- Holds section - title is now "Holds and bookings", however the sidebar menu title is just "Holds"

- Reports -> Acquisitions statistics: OK (see note for reports)

- Reports -> View dictionary: OK (see note for reports)

- Reports: OK (same behvour as before the patch)
  . Other section on the reports home page: Koha database scheme + Koha reports library - not shown in the sidebar
  . Guided reports section on home page: options on the home page are Create guided report, Create from SQL, Use saved, and Search by keyword (+ search box)
    . On sidebar when in any other area (such as statistics wizards) the options are: Guided reports (totally different sidebar menu - where page title is "Build a report"), Guideed reports, Build new, Use saved, and Create from SQL
    . When in the "Guided reports" area, the sidebar menu is:
        Run reports
          Saved reports
        Reports dictionary
          View dictionary
        Useful resources
          Koha report library
          Koha database schema

- Point of sale:  OK (same behavour as before the patch)
  . Enable EnablePointOfSale system preference
  . Enable UseCashRegisters
  . Add some debit tables
  . Add a cash register
  . Add a couple of sales in the point of sale module
  . Cash summary for Centerville: the breadcrumbs and browser title in the Cash summary for Centerville/Transaction history are not correct. However, there is no change from before the patch.
  . When on Cash summary for Centerville, the breadcrumb and browser page title are just "Cash summary for Centerville", instead of "Point of sale > Cash summary for Centerville".
  . When in the transaction history for a cash register, no menu items are highlighted and there are no proper breadcrumb or browser page title, just "Transaction history....".
  . Maybe this is because "Cash management" is under Tools as well, and these are just links to that?
  
- E-resource management: OK 
  . Enable ERMModule

- Preservation: OK (same behavour as before the patch)
  . Enable PreservationModule
  . Settings > Add a processing step (for example "Step 1")
  . Settings > Status for item added to waiting list: select any value
  . Waiting list: add an item to the waiting list, for example 39999000011418
  . Trains > New train
  . Note that when you edit a train (Trains menu) or edit a processing step (Settings), the sidebar menu is not highlighted and the breadcrumb and browser page title don't really match)
  
- Serials:  OK (same behavour as before the patch)
  . Add a subscription: no sidebar menu
  . Serials > [be on the page for a subscription] > Create routing list: no serials menu item (breadcrumb is Serials > [Serial name] > New routing list
  . When you have arouting list, the menu item changes to "Edit routing list", and not shown in sidebar menu when you edit
  
- Tools -> Patron lists: OK
Comment 39 Owen Leonard 2025-02-12 13:31:24 UTC
Created attachment 177869 [details] [review]
Bug 37222: Standardize markup for sidebar menus

This patch updates sidebar menu markup so that it's consistent, with a
common class (".sidebar_menu") and a unique ID. The style is tied to the
class rather than the ID, simplifying the CSS.

Note: This patch contains indentation changes so ignore whitespace when
viewing the diff.

The updated patch contains corrections to JavaScript which needed
selectors to be changed to match the new markup.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

Check pages which contain each modified menu:

- Circulation -> Check out to a patron
- Catalog -> View a bibliographic record
- Administration -> View system preferences
- Acquisitions -> Acquisitions home
- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation
- Cataloging -> Stage MARC records for import
- Reports -> Acquisitions statistics
- Reports -> View dictionary
- Point of sale
- E-resource management
- Preservation
- Serials
- Tools -> Patron lists

Sponsored-by: Athens County Public Libraries
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 40 Owen Leonard 2025-02-12 13:31:27 UTC
Created attachment 177870 [details] [review]
Bug 37222: (follow-up) Correct style of Vue sidebars

NavigationItem.vue generates both breadcrumb menus and sidebar menus.
Sidebar menus should not have the same markers between list elements.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 41 Owen Leonard 2025-02-12 13:31:29 UTC
Created attachment 177871 [details] [review]
Bug 37222: (follow-up) More corrections to sidebar style

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 42 Owen Leonard 2025-02-12 13:31:32 UTC
Created attachment 177872 [details] [review]
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 43 Katrin Fischer 2025-02-20 16:52:08 UTC
I have a conflict in staff-global.css -can you pelase take a look?
Comment 44 Owen Leonard 2025-02-20 18:11:25 UTC
Created attachment 178438 [details] [review]
Bug 37222: Standardize markup for sidebar menus

This patch updates sidebar menu markup so that it's consistent, with a
common class (".sidebar_menu") and a unique ID. The style is tied to the
class rather than the ID, simplifying the CSS.

Note: This patch contains indentation changes so ignore whitespace when
viewing the diff.

The updated patch contains corrections to JavaScript which needed
selectors to be changed to match the new markup.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

Check pages which contain each modified menu:

- Circulation -> Check out to a patron
- Catalog -> View a bibliographic record
- Administration -> View system preferences
- Acquisitions -> Acquisitions home
- Cataloging -> Stock rotation -> Manage stages and manage items for a
  rotation
- Cataloging -> Stage MARC records for import
- Reports -> Acquisitions statistics
- Reports -> View dictionary
- Point of sale
- E-resource management
- Preservation
- Serials
- Tools -> Patron lists

Sponsored-by: Athens County Public Libraries
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 45 Owen Leonard 2025-02-20 18:11:28 UTC
Created attachment 178439 [details] [review]
Bug 37222: (follow-up) Correct style of Vue sidebars

NavigationItem.vue generates both breadcrumb menus and sidebar menus.
Sidebar menus should not have the same markers between list elements.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 46 Owen Leonard 2025-02-20 18:11:31 UTC
Created attachment 178440 [details] [review]
Bug 37222: (follow-up) More corrections to sidebar style

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 47 Owen Leonard 2025-02-20 18:11:34 UTC
Created attachment 178441 [details] [review]
Bug 37222: (follow-up) Remove obsolete CSS from NavigationItem.vue

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Nind <david@davidnind.com>
Comment 48 Katrin Fischer 2025-02-21 15:44:29 UTC
Pushed for 25.05!

Well done everyone, thank you!