Some refactoring

src/app/menu/menu.component.html

@@ -0,0 +1,32 @@
+<div>
+    <div class="card menu-card">
+        <div class="d-flex flex-row flex-wrap">
+          <div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
+            <div class="icon rounded-circle farm-icon"><i class="fm fm-farm" aria-hidden="true"></i></div>
+            <div class="caption" i18n>Farms</div>
+          </div>      
+        </div>
+    </div>  
+    <div class="card menu-card">
+        <ul class="navbar-nav">
+          <li class="nav-item py-0">
+            <a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
+            <div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
+              <fm-map-layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></fm-map-layer-list>
+            </div>
+          </li>
+          <li class="nav-item py-0">
+            <a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
+            <div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
+              <fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
+            </div>
+          </li>
+        </ul>
+    </div>
+       <!--<div class="card menu-card">
+            <ul class="navbar-nav">
+              <li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})"><span i18n>Farms</span></a></li>
+              <li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.layer'})"><span i18n>Layers</span></a></li>
+            </ul>
+          </div>-->
+</div>