fix layout shift on mobile devices, move menu items to menu (#128)

* fix layout shift on mobile devices, move menu items to menu * remove unsued link * hide library name on mobile, change sidenav button size
maplibre · Dec 18, 2023 · b3fde19 · b3fde19
1 parent ffd050e
commit b3fde19
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/projects/showcase/src/app/demo/demo-index.component.html b/projects/showcase/src/app/demo/demo-index.component.html
@@ -1,5 +1,5 @@
 <showcase-layout-toolbar-menu position="left">
-  <button class="menu-button" mat-button (click)="toggleSidenav()">
+  <button class="menu-button" mat-icon-button (click)="toggleSidenav()">
     <mat-icon>menu</mat-icon>
   </button>
 </showcase-layout-toolbar-menu>

diff --git a/projects/showcase/src/app/doc/doc.component.ts b/projects/showcase/src/app/doc/doc.component.ts
@@ -35,6 +35,10 @@ export const VERSIONS = ['main'];
         justify-content: center;
       }
 
+      mat-form-field {
+        width: 100px;
+      }
+
       markdown {
         margin: 8px;
         width: 60%;

diff --git a/projects/showcase/src/app/shared/layout/layout.component.ts b/projects/showcase/src/app/shared/layout/layout.component.ts
@@ -3,6 +3,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { RouterLink, RouterOutlet } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatMenuModule } from '@angular/material/menu';
 
 @Component({
   template: `
@@ -12,18 +13,31 @@ import { MatToolbarModule } from '@angular/material/toolbar';
         <a mat-icon-button routerLink="/">
           <mat-icon svgIcon="ngx-maplibre-gl"></mat-icon>
         </a>
-        <a mat-button routerLink="/"> ngx-maplibre-gl </a>
-        <a mat-button routerLink="/demo"> Demo </a>
-        <a mat-button routerLink="/doc"> Documentation </a>
+        <a mat-button routerLink="/" class="library-name"> ngx-maplibre-gl </a>
+        <div class="menu-items">
+          <a mat-button routerLink="/demo"> Demo </a>
+          <a mat-button routerLink="/doc"> Documentation </a>
+        </div>
       </div>
       <div>
         <div id="layout-right-custom-items"></div>
-        <a mat-button href="https://github.com/maplibre/ngx-maplibre-gl">
-          Github
-        </a>
         <a mat-icon-button href="https://github.com/maplibre/ngx-maplibre-gl">
           <mat-icon svgIcon="github"></mat-icon>
         </a>
+        <button
+          class="mobile-menu-button"
+          mat-icon-button
+          type="button"
+          aria-label="Mobile menu"
+          [matMenuTriggerFor]="mobileMenu"
+        >
+          <mat-icon>more_vert</mat-icon>
+        </button>
+
+        <mat-menu #mobileMenu="matMenu">
+          <a mat-menu-item routerLink="/demo"> Demo </a>
+          <a mat-menu-item routerLink="/doc"> Documentation </a>
+        </mat-menu>
       </div>
     </mat-toolbar>
     <router-outlet></router-outlet>
@@ -40,7 +54,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
       mat-toolbar {
         display: flex;
         justify-content: space-between;
-        padding: 0 16px 0 0;
+        padding: 0 8px 0 0;
       }
 
       div {
@@ -52,6 +66,28 @@ import { MatToolbarModule } from '@angular/material/toolbar';
       .menu-button {
         height: 100%;
       }
+
+      .menu-items {
+        display: none;
+      }
+
+      .library-name {
+        display: none;
+      }
+
+      @media (min-width: 640px) {
+        .menu-items {
+          display: flex;
+        }
+
+        .library-name {
+          display: flex;
+        }
+
+        .mobile-menu-button {
+          display: none;
+        }
+      }
     `,
   ],
   standalone: true,
@@ -61,6 +97,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
     RouterLink,
     MatIconModule,
     RouterOutlet,
+    MatMenuModule,
   ],
 })
 export class LayoutComponent {}