DSpace 7.x how to add navbar menu item to link to website?

[amtuan...@gmail.com]

Hi all 

I have searched but could not find anything. How do I add an item to the navbar menu to link to a website?

Thanks,

Tuan

[Diego Brice]

Same question for me!

[C S]

Okay, there's two ways to do this.

The bad way to do it is to add custom Angular components and insert the links to these in your navbar component.  The problem with this set-up is that if you directly link to the custom Angular component/infopage, the side navbar and horizontal navbar will disappear because it's disconnected to some degree from the rest of the site.  You can see an example of this being done in my repository:

https://ruor.uottawa.ca/home

And what the custom info page looks like on direct link here: 

https://ruor.uottawa.ca/uoresearch

Also, this will probably break and need to be updated when you move to version 8, which uses a different version of Angular.

To do this:

(1) Create custom component in dspace-7-frontend/src/themes/custom/app/

(2) Add necessary statements to src/app/app-routing-module.ts to ensure code picks up on the new component, ie: add to list of import statements:

import { UoresearchComponent } from '../themes/custom/app/uoresearch/uoresearch.component';

And add path in RouterModule.forRoot([]), ie:

imports: [
    RouterModule.forRoot([
      { path: 'uoresearch', component: UoresearchComponent },

I think you MIGHT have to do this as well in src/themes/custom/lazy-theme.module.ts?  Try it without and let me know if it works, alternatively, if someone who knows more about Angular is reading this and wants to explain why/why not this would be necessary, I'd love more details!

(3) Add appropriate code into the navbar.component.html file, ie: Go to dspace-7-frontend/src/themes/custom/app/navbar/navbar.component.html -->

<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
  <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
  <div class="navbar-inner-container w-100" [class.container]="!(isXsOrSm$ | async)">
    <div class="reset-padding-md w-100">
      <div id="collapsingNav">
        <ul class="navbar-nav navbar-navigation mr-auto shadow-none">
          <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
            <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
          </li>
          <ng-container *ngFor="let section of (sections | async)">
            <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
          </ng-container>

          <!-- custom Start-->
          <li ngbDropdown class="nav-item dropdown expandable-navbar-section text-md-center">
            <a class="nav-link " role="button" data-toggle="dropdown" aria-expanded="false" ngbDropdownToggle>
              {{ 'navbar.tabtitle' | translate }}
            </a>
            <div ngbDropdownMenu class="m-0 border-top-0 ng-trigger ng-trigger-slide shadow-none" id="customDrop">
              <!-- <a ngbDropdownItem style="color: #207698" href="assets/about/uo-research.html">UO-Research</a> -->
                <a ngbDropdownItem routerLink="uoresearch"> {{ 'navbar.option1' | translate }}</a>
              <!-- <a ngbDropdownItem style="color: #207698" href="assets/about/policies.html">Policies</a> -->
              <a ngbDropdownItem routerLink="policies">{{ 'navbar.option2' | translate }}</a>
              <!-- <a ngbDropdownItem style="color: #207698" href="assets/about/faq.html">FAQ</a> -->
              <a ngbDropdownItem routerLink="faq">{{ 'navbar.option3' | translate }}</a>
            </div>
          </li>
          <!-- custom end -->

        </ul>
      </div>
    </div>
  </div>
</nav>

The less bad way, used by University of Oregon Libraries -- switch out one of the existing links for a hardcoded new link by going directly to the page on which the other navbar options are defined -- on direct link, this info page will still display the other navbar options/side bar.  I can't remember though which page to edit for this technique.

Other threads on this topic:

How to add a static page in DSpace 7?  <--- Highly useful

[DSpace Angular] Adding new modules & routes to RouterModule from a theme

--
All messages to this mailing list should adhere to the Code of Conduct: https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx
---
You received this message because you are subscribed to the Google Groups "DSpace Technical Support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dspace-tech...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dspace-tech/e483c725-cb98-4694-8b2b-6bdd9441449en%40googlegroups.com.

[Diego Spano]

Thanks!

Diego