Hiding share button into the menu if the screen is small and hiding logo if the screen is extra small #587

src/frontend/app/ui/frame/frame.component.html

@@ -1,13 +1,13 @@
 <ngx-loading-bar [includeSpinner]="false" color="#337ab7" height="3px"></ngx-loading-bar>
 <nav class="navbar navbar-expand navbar-dark bg-dark">
   <div class="container-fluid">
-    <a class="navbar-brand" [routerLink]="['/gallery']"
+    <a class="navbar-brand d-none d-sm-block" [routerLink]="['/gallery']"
        [queryParams]="queryService.getParams()">
       <img src="assets/icon_inv.png" width="30" height="30" class="d-inline-block align-top" alt="">
       <strong class="d-none d-lg-inline-block">{{title}}</strong>
     </a>
     <div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">
-      <ul class="navbar-nav mb-0 me-4 text-lg-start d-none d-md-flex">
+      <ul class="navbar-nav mb-0 me-2 text-lg-start d-none d-md-flex">
         <ng-container *ngFor="let link of navbarLinks">
           <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
             <a class="nav-link" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')" i18n>Albums</a>
@@ -33,12 +33,23 @@
         <ul class="navbar-nav">
           <li class="flex-grow-1"></li>
           <ng-content select="[navbar]"></ng-content>
+          <li class="nav-item w-100" *ngIf="showSearch">
+            <app-gallery-search></app-gallery-search>
+          </li>
+          <li class="nav-item d-xl-block d-none" *ngIf="showShare">
+            <app-gallery-share></app-gallery-share>
+          </li>
+          <li class="nav-item divider-vertical  d-xl-block d-none"
+              *ngIf="authenticationRequired && user.value && showShare">
+          </li>
           <ng-container *ngIf="authenticationRequired && user.value">
             <li class="nav-item me-2 ms-2 navbar-text d-xl-block d-none">
              <span style="white-space: nowrap;">
                 <span class="oi oi-person"></span> {{user.value.name}}
               </span>
             </li>
+            <li class="nav-item divider-vertical  d-xl-block d-none">
+            </li>
           </ng-container>
           <li class="nav-item d-xl-block d-none">
             <span>
@@ -64,12 +75,15 @@
 
                 <li role="menuitem" class="d-xl-none">
                   <div style="white-space: nowrap;" class="dropdown-item">
-                    <ng-container *ngIf="authenticationRequired && user.value && false">
+                    <ng-container *ngIf="authenticationRequired && user.value">
                       <span class="oi oi-person"></span>{{user.value.name}}
                     </ng-container>
                     <app-language class="navbar-btn d-inline-block" [isDark]="false"></app-language>
                   </div>
                 </li>
+                <li class="nav-item d-xl-none" *ngIf="showShare">
+                  <app-gallery-share [dropDownItem]="true"></app-gallery-share>
+                </li>
                 <hr class="d-xl-none"/>
                 <ng-container *ngFor="let link of navbarLinks">
                   <li class="nav-item d-md-none"

src/frontend/app/ui/frame/frame.component.ts

@@ -18,6 +18,8 @@ import {Utils} from '../../../../common/Utils';
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class FrameComponent {
+  @Input() showSearch = false;
+  @Input() showShare = false;
   public readonly user: BehaviorSubject<UserDTO>;
   public readonly authenticationRequired = Config.Users.authenticationRequired;
   public readonly title = Config.Server.applicationTitle;

src/frontend/app/ui/gallery/gallery.component.html

@@ -1,5 +1,5 @@
 <app-gallery-lightbox #lightbox></app-gallery-lightbox>
-<app-frame>
+<app-frame [showSearch]="showSearchBar" [showShare]="showShare">
 
   <ng-container navbar>
     <li class="nav-item navbar-text"  *ngIf="countDown">
@@ -12,12 +12,6 @@
         :{{("0" + countDown.second).slice(-2)}}
       </span>
     </li>
-    <li  class="nav-item  w-100" *ngIf="showSearchBar">
-      <app-gallery-search></app-gallery-search>
-    </li>
-    <li class="nav-item"  *ngIf="showShare">
-      <app-gallery-share></app-gallery-share>
-    </li>
   </ng-container>
 
   <ng-container navbar-menu>

src/frontend/app/ui/gallery/share/share.gallery.component.css

@@ -15,3 +15,12 @@
   padding-right: 0.3rem;
 }
 
+
+a.dropdown-item, button.dropdown-item, div.dropdown-item {
+  padding: 0.3rem 1.0rem 0.3rem 0.8rem;
+  cursor: pointer;
+}
+
+a.dropdown-item span, button.dropdown-item span, div.dropdown-item span {
+  padding-right: 0.8rem;
+}

src/frontend/app/ui/gallery/share/share.gallery.component.html

@@ -1,10 +1,16 @@
 <button id="shareButton" class="nav-link btn  btn-link"
         style="white-space:nowrap"
+        *ngIf="!dropDownItem"
         type="button" [disabled]="!enabled" (click)="openModal(shareModal)">
   <span class="oi oi-share"></span>
   <ng-container i18n>Share</ng-container>
 </button>
 
+<a class="dropdown-item" (click)="openModal(shareModal)" *ngIf="dropDownItem">
+  <span class="oi oi-share"></span>
+  <ng-container i18n>Share</ng-container>
+</a>
+
 <ng-template #shareModal>
   <!-- sharing Modal-->
   <div class="modal-header">

src/frontend/app/ui/gallery/share/share.gallery.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit, TemplateRef} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit, TemplateRef} from '@angular/core';
 import {Utils} from '../../../../../common/Utils';
 import {ShareService} from '../share.service';
 import {ContentService} from '../content.service';
@@ -17,6 +17,7 @@ import {Subscription} from 'rxjs';
 })
 export class GalleryShareComponent implements OnInit, OnDestroy {
   enabled = true;
+  @Input() dropDownItem = false;
   url = '';
 
   input = {