menu align left

maxkey-web-frontend/maxkey-web-app/src/app/theme/layout-default/layout-nav.component.html

@@ -1,36 +1,42 @@
 <ng-template #navMenu let-ls>
-  <ul nz-menu nzMode="horizontal" nzTheme="dark" style="text-align: center">
-    <!--一级菜单-->
-    <ng-container *ngFor="let mnav of ls">
-      <li nz-menu-item *ngIf="mnav.children.length == 0 && mnav.disabled == false" style="min-width: 80px">
-        <a *ngIf="mnav.externalLink == ''" href="#{{ mnav.link }}">{{ mnav.text }}</a>
+  <div nz-row style="margin: 0 24px 24px" class="ant-row">
+    <div nz-col nzMd="3" class="ant-col ant-col-md-3"></div>
+    <div nz-col nzMd="18" class="ant-col ant-col-md-18">
+      <ul nz-menu nzMode="horizontal" nzTheme="dark" style="text-align: left">
+        <!--一级菜单-->
+        <ng-container *ngFor="let mnav of ls">
+          <li nz-menu-item *ngIf="mnav.children.length == 0 && mnav.disabled == false" style="min-width: 80px">
+            <a *ngIf="mnav.externalLink == ''" href="#{{ mnav.link }}">{{ mnav.text }}</a>
 
-        <a *ngIf="mnav.externalLink != ''" href="#{{ mnav.externalLink }}" target="_blank">{{ mnav.text }}</a>
-      </li>
-      <li nz-submenu nzTitle="{{ mnav.text }}" *ngIf="mnav.children.length > 0">
-        <ul>
-          <!--二级菜单-->
-          <ng-container *ngFor="let snav of mnav.children">
-            <li nz-menu-item *ngIf="snav.children.length == 0 && mnav.disabled == false">
-              <a href="#{{ snav.link }}">{{ snav.text }}</a>
-            </li>
-            <li nz-submenu nzTitle="{{ snav.text }}" *ngIf="snav.children.length > 0">
-              <ul>
-                <!--三级菜单-->
-                <ng-container *ngFor="let tnav of snav.children">
-                  <li nz-menu-item *ngIf="tnav.children.length == 0 && mnav.disabled == false">
-                    <a href="#{{ tnav.link }}">{{ tnav.text }}</a>
-                  </li>
-                </ng-container>
-              </ul>
-            </li>
-          </ng-container>
-        </ul>
-      </li>
-    </ng-container>
-  </ul>
+            <a *ngIf="mnav.externalLink != ''" href="#{{ mnav.externalLink }}" target="_blank">{{ mnav.text }}</a>
+          </li>
+          <li nz-submenu nzTitle="{{ mnav.text }}" *ngIf="mnav.children.length > 0">
+            <ul>
+              <!--二级菜单-->
+              <ng-container *ngFor="let snav of mnav.children">
+                <li nz-menu-item *ngIf="snav.children.length == 0 && mnav.disabled == false">
+                  <a href="#{{ snav.link }}">{{ snav.text }}</a>
+                </li>
+                <li nz-submenu nzTitle="{{ snav.text }}" *ngIf="snav.children.length > 0">
+                  <ul>
+                    <!--三级菜单-->
+                    <ng-container *ngFor="let tnav of snav.children">
+                      <li nz-menu-item *ngIf="tnav.children.length == 0 && mnav.disabled == false">
+                        <a href="#{{ tnav.link }}">{{ tnav.text }}</a>
+                      </li>
+                    </ng-container>
+                  </ul>
+                </li>
+              </ng-container>
+            </ul>
+          </li>
+        </ng-container>
+      </ul>
+    </div>
+    <div nz-col nzMd="3" class="ant-col ant-col-md-3"></div>
+  </div>
 </ng-template>
 
 <ng-container *ngFor="let group of list">
   <ng-template [ngTemplateOutlet]="navMenu" [ngTemplateOutletContext]="{ $implicit: group.children }"></ng-template>
-</ng-container>
+</ng-container>

maxkey-web-frontend/maxkey-web-app/src/app/theme/layout-default/layout.component.ts

@@ -1,19 +1,18 @@
 /*
  * Copyright [2022] [MaxKey of copyright http://www.maxkey.top]
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *     http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
 
 import { DOCUMENT } from '@angular/common';
 import { Component, ContentChildren, ElementRef, Inject, Input, OnDestroy, OnInit, QueryList, Renderer2, TemplateRef } from '@angular/core';
@@ -38,7 +37,7 @@ import { LayoutDefaultOptions } from './types';
     <div id="mainMenu" nzTheme="dark" style="background: #001529;" class="alain-default__fixed">
       <!--<ng-container *ngTemplateOutlet="asideUser"></ng-container>-->
       <ng-container *ngTemplateOutlet="nav"></ng-container>
-      <layout-default-nav *ngIf="!nav" class="d-block" style="margin-top: 64px; width:80%"></layout-default-nav>
+      <layout-default-nav *ngIf="!nav" class="d-block" style="margin-top: 64px; "></layout-default-nav>
     </div>
 
     <section class="alain-default__content">