added condition to include nav item only if url is not empty

[umar8hassan]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/5358

Description (What does it do?)

Menu items can be links to pages or external resource links. On rendering resources are pulled from DB. If the linked resource has been deleted, the menu item still renders and is broken. On click, it does not show any error but doesn't navigate anywhere either.

This PR aims to conditionally render menu items if it has a valid URL field. If deleted the related field is empty.

How can this be tested?

1. Create a test course on RC, add an External resource to its Menu, and Publish.
2. In your local themes repo, switch to branch main
3. Run command yarn start course <course-name-on-rc>, this should pull course from RC
4. Browse the pulled course on localhost:3000 and validate the menu item is added and navigable
5. After validation, go to the admin panel and delete the related External resource without removing it from menu
6. Publish the course. Remove the local copy of course and repeat steps 3 and 4. The nav item will be there but not navigable.
7. In your local themes repo, switch to branch umar/5358-allow-studio-user-to-delete-pages. The broken nav item will disappear.

[github-actions]

Netlify Deployments:
www: https://ocw-hugo-themes-www-pr-1449--ocw-next.netlify.app/
Course v2: https://ocw-hugo-themes-course-v2-pr-1449--ocw-next.netlify.app/

[github-actions]

Device	URL
mobile	https://ocw-hugo-themes-www-pr-1449--ocw-next.netlify.app/

Device	URL
mobile	https://ocw-hugo-themes-www-pr-1449--ocw-next.netlify.app/search/

Device	URL
mobile	https://ocw-hugo-themes-course-v2-pr-1449--ocw-next.netlify.app/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead

[pdpinch]

How/when does this happen?

[umar8hassan]

How/when does this happen?

@pdpinch It happens when the resource has been deleted in the backend but its entry to menu items is still there. I have added the description. this is part of deleting pages PR.

[ibrahimjaved12]

It works fine normally. However, there are 2 corner case side effects:

1. Nested Menu has Menu Item (Child) which does not have link
2. Nested Menu Parent does not have link, but has children

In the first case, the arrow toggles but opens nothing:

In the second case, we have an empty parent item with an arrow:

Also, in line 28 we have:
{{ if .menuItem.HasChildren }}
We should replace it with {{ if $hasChildren }} as we already have this variable for consistency.

[ibrahimjaved12]

Issue 1: Broken nested parents are marked as active by default

Under current code, for broken nested parents, we end up having empty anchor tags, eg.
<a>A menu item but without href that will be displayed</a>
The active status is determined by this condition in base-theme/assets/js/navigation.js:
navLink.replace(/\/$/, "") === window.location.pathname.replace(/\/$/, "")
If href is absent, navLink becomes an empty string (""). When the current path (window.location.pathname) is the homepage, this empty string falsely matches, leading to a false-positive and incorrectly adding the active class.
eg.:
<a class="text-dark nav-link active" data-uuid="26c26fef-7262-4f7f-960f-20e462964b18">medium ER</a>

Issue 2: Mobile interface is being affected by broken links
<li class="course-nav-list-item"></li> elements still appear to be appended for broken menu items, causing layout issues.

PR View:

Same items in RC:

[ibrahimjaved12]

The functionality works as expected.
But can you please add the error message prior to clicking Delete button on Dialog.

Sorry this comment was meant for another PR. Please follow the above comment only.

[ibrahimjaved12]

Looks good to me