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
<https://scholarsbank.uoregon.edu/home> -- 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?
<https://groups.google.com/g/dspace-community/c/KU3oTjXoyKE/m/8VEenxEWAAAJ>
<--- Highly useful
[DSpace Angular] Adding new modules & routes to RouterModule from a theme
<https://groups.google.com/g/dspace-tech/c/H8430lbjPN0/m/L3lBsyluAwAJ>

On Thu, Sep 26, 2024 at 11:17 PM Diego Brice <diegosp...@gmail.com> wrote:

> Same question for me!
>
> El jueves, 8 de junio de 2023 a la(s) 5:29:51 a.m. UTC+8,
> amtuan...@gmail.com escribió:
>
>> 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
>>
> --
> 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+unsubscr...@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
> <https://groups.google.com/d/msgid/dspace-tech/e483c725-cb98-4694-8b2b-6bdd9441449en%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/dspace-tech/CA%2BpcS1QXJ5EqO57um5zo1n_%2BeT7X1-%2B5ZnDocHZ53gMsipo49A%40mail.gmail.com.

Reply via email to