DSpace 7 customize bootstrap via angular

[Karol]

Hi,

are there any good practices how to customize interface? I would like to move my repository from 6.3 to 7 , I already installed DSpace 7 works very well, but without  interface customization, I can't do it. I have two problems:

1) ######  I am trying to add additional dropdown menu in navbar.
editing:
/dspace-angular-dspace-7.2/src/themes/dspace/app/navbar/navbar.component.html

My file looks like:

<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
  class="navbar navbar-expand-md navbar-light p-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
  <div class="container h-100">
    <a class="navbar-brand my-2" routerLink="/home">
      <img src="assets/images/logo.png" [attr.alt]="'menu.header.image.logo' | translate" />
    </a>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
    <div id="collapsingNav" class="w-100 h-100">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
        <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>
      </ul>
    </div>
    <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
    <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
    <ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
    <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
  </div>
</nav>

After rebuilt interface i see dropdown menu, but dropdowning doesn't work, and after change to mobile look i can't see additional menu.

It is a proper way to add a additional menu?

Alternatively how can I add a double navbar?

2) ##### How to customize  item display ?

I wanna add social icons to item,  in previous version (DSpace 6.3) i editing "display-item.jsp" and adding social icons there. 

How Can I do this with DSpace 7? 

I'd appreciate a hint, as these are a few of the few things holding me back from getting DSpace 7 running in production. 

Karol

[bens...@gmail.com]

I did this by copying and modifying the code in:

dspace-angular-dspace-7.6/src/app/shared/lang-switch

I put it on github.

https://github.com/FlorPlanton/dspace7.6Dropdpown/blob/main/README.md