feat: Add Side theme.

nav.config.ts

@@ -20,7 +20,7 @@ const c: IConfig = {
   // 网站关键字
   keywords: '导航,前端资源,社区站点,设计师,实用工具,学习资源,运营,网络安全,node.js',
 
-  // 默认主题: Light | Sim
+  // 默认主题: Light | Sim | Side
   theme: 'Light',
 
   // 搜索引擎列表, 为空时不显示搜索引擎

src/app/app.module.ts

@@ -24,6 +24,8 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
 import { NzCardModule } from 'ng-zorro-antd/card'
 import { NzIconModule } from 'ng-zorro-antd/icon'
 import { NzGridModule } from 'ng-zorro-antd/grid'
+import { NzLayoutModule } from 'ng-zorro-antd/layout'
+import { NzMenuModule } from 'ng-zorro-antd/menu'
 
 // components
 import { AppComponent } from './app.component'
@@ -32,6 +34,7 @@ import { AppComponent } from './app.component'
 import LightComponent from '../view/index/light/index.component'
 import SimComponent from '../view/index/sim/index.component'
 import AdminComponent from '../view/admin/index.component'
+import SideComponent from '../view/index/side/index.component'
 import WebpComponent from '../view/app/default/app.component'
 import { FixbarComponent } from '../components/fixbar/index.component'
 import { MultipleSiteComponent } from '../components/multiple-site/index.component'
@@ -56,6 +59,10 @@ const appRoutes: Routes = [
     path: 'sim',
     component: SimComponent,
   },
+  { 
+    path: 'side',
+    component: SideComponent,
+  },
   { 
     path: 'light',
     component: LightComponent,
@@ -82,6 +89,7 @@ const appRoutes: Routes = [
     AppComponent,
     LightComponent,
     SimComponent,
+    SideComponent,
     WebpComponent,
     FixbarComponent,
     MultipleSiteComponent,
@@ -111,6 +119,8 @@ const appRoutes: Routes = [
     NzCardModule,
     NzIconModule,
     NzGridModule,
+    NzLayoutModule,
+    NzMenuModule,
     BrowserModule,
     FormsModule,
     RouterModule.forRoot(

src/components/fixbar/index.component.ts

@@ -38,6 +38,10 @@ export class FixbarComponent {
     {
       name: '切换到 Sim',
       url: '/sim'
+    },
+    {
+      name: '切换到 Side',
+      url: '/side'
     }
   ]
 

src/styles.scss

@@ -110,6 +110,7 @@ b {
 
 // 折叠箭头
 .down-arrow {
+  display: inline-block;
   align-self: center;
   margin-left: 15px;
   cursor: pointer;

src/types/index.d.ts

@@ -3,6 +3,7 @@
 export type ThemeType =
   | 'Light'
   | 'Sim'
+  | 'Side'
 
 export interface INavFourProp {
   icon?: string | null

src/view/index/side/index.component.html

+<nz-layout class="layout">
+  <nz-layout>
+    <nz-sider nzWidth="200px" nzTheme="light" class="sider">
+      <div class="logo dark-bg">
+        <img src="assets/logo.png" alt="发现导航nav3.cn">
+        <span class="site-title">{{ title }}</span>
+      </div>
+      <ul nz-menu nzMode="inline" class="sider-menu">
+        <li
+          nz-submenu
+          nzOpen
+          [nzTitle]="item.title"
+          *ngFor="let item of websiteList; let pageIdx = index;"
+        >
+          <ul>
+            <li
+              nz-menu-item *ngFor="let el of item.nav; let idIdx = index;"
+              [nzSelected]="page === pageIdx && id === idIdx"
+              (click)="handleSidebarNav(pageIdx, idIdx)" 
+            >
+              {{ el.title }}
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nz-sider>
+    <nz-layout class="inner-layout">
+      <nz-content class="content">
+        <app-search-engine></app-search-engine>
+
+        <div class="box">
+          <app-no-data *ngIf="currentList.length === 0 || currentList[0].nav.length === 0"></app-no-data>
+
+          <div *ngFor="let item of currentList; let i=index">
+            <div class="nav-wrapper">
+              <div
+                class="title dark-primary dark-border-color"
+                *ngIf="item.title"
+              >
+                <app-card [oIdx]="page" [twoIdx]="id" [threeIdx]="i">
+                  <span class="cursor-pointer" (click)="onCollapse(item, i)">
+                    <app-logo
+                      [src]="item.icon"
+                      [name]="item.title"
+                      colour="#ff4d4f"
+                    >
+                    </app-logo>
+    
+                    <span style="margin-left: 10px;align-self: center;vertical-align: middle;">{{ item.title }} x {{ item.nav.length }}</span>
+    
+                    <i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="item.collapsed"></i>
+                  </span>
+                </app-card>
+              </div>
+    
+              <div nz-row [nzGutter]="[16, 16]" *ngIf="!item.collapsed">
+                <div class="gutter-row" nz-col [nzSpan]="6" *ngFor="let el of item.nav; let idx=index">
+                  <app-card
+                    [oIdx]="page"
+                    [twoIdx]="id"
+                    [threeIdx]="i"
+                    [fourIdx]="idx"
+                    [dataSource]="el"
+                  >
+                  </app-card>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <app-footer className="side-footer"></app-footer>
+      </nz-content>
+    </nz-layout>
+  </nz-layout>
+</nz-layout>
+
+<app-fixbar
+  (onCollapse)="onCollapseAll()"
+  [collapsed]="collapsed()"
+>
+</app-fixbar>

src/view/index/side/index.component.scss

+.layout {
+  min-height: 100vh;
+
+  .inner-layout {
+    padding: 20px 70px 0 20px;
+    margin-left: 200px;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .box {
+    flex: 1;
+  }
+}
+
+.title {
+  font-size: 18px;
+  border-bottom: 1px solid #eee;
+  padding: 10px 0;
+  color: #3f51b5;
+  font-weight: 500;
+  display: flex;
+  margin-top: 15px;
+}
+
+.logo {
+  padding: 10px;
+  padding-left: 15px;
+
+  img {
+    width: 50px;
+    height: 50px;
+  }
+
+  .site-title {
+    font-weight: 500;
+    font-size: 18px;
+    margin-left: 10px;
+    vertical-align: middle;
+  }
+}
+
+.sider {
+  position: fixed;
+  height: 100vh;
+  left: 0;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: hsla(0, 0%, 100%, .2);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: hsla(0, 0%, 100%, .15);
+    border-radius: 3px;
+  }
+}
+
+::ng-deep .side-footer  {
+  margin-top: 45px !important;
+  & > * {
+    color: #666 !important;
+  }
+}

src/view/index/side/index.component.ts

+// Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
+// See https://github.com/xjh22222228/nav
+
+import config from '../../../../nav.config'
+import { Component } from '@angular/core'
+import { Router, ActivatedRoute } from '@angular/router'
+import { INavProps, INavThreeProp } from '../../../types'
+import {
+  fuzzySearch,
+  queryString,
+  setWebsiteList,
+  toggleCollapseAll,
+} from '../../../utils'
+import { websiteList } from '../../../store'
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss']
+})
+export default class HomeComponent {
+
+  constructor (private router: Router, private activatedRoute: ActivatedRoute) {}
+
+  websiteList: INavProps[] = websiteList
+  currentList: INavThreeProp[] = []
+  id: number = 0
+  page: number = 0
+  title: string = config.title.trim().split(/\s/)[0]
+
+  ngOnInit() {
+    const initList = () => {
+      try {
+        if (this.websiteList[this.page] && this.websiteList[this.page]?.nav?.length > 0) {
+          this.currentList = this.websiteList[this.page].nav[this.id].nav
+        } else {
+          this.currentList = []
+        }
+      } catch (error) {
+        this.currentList = []
+      }
+    }
+
+    this.activatedRoute.queryParams.subscribe(() => {
+      const { id, page, q } = queryString()
+      this.page = page
+      this.id = id
+
+      if (q) {
+        this.currentList = fuzzySearch(this.websiteList, q)
+      } else {
+        initList()
+      }
+
+      setWebsiteList(this.websiteList)
+    })
+  }
+
+  handleSidebarNav(page, id) {
+    this.websiteList[page].id = id
+    this.router.navigate([this.router.url.split('?')[0]], { 
+      queryParams: {
+        page,
+        id,
+      }
+    })
+  }
+
+  onCollapse = (item, index) => {
+    item.collapsed = !item.collapsed
+    this.websiteList[this.page].nav[this.id].nav[index] = item
+    setWebsiteList(this.websiteList)
+  }
+
+  onCollapseAll = () => {
+    toggleCollapseAll(this.websiteList)
+  }
+
+  collapsed() {
+    try {
+      return websiteList[this.page].nav[this.id].collapsed
+    } catch (error) {
+      return false
+    }
+  }
+}

src/view/index/sim/index.component.scss

@@ -119,10 +119,10 @@ $width: 1200px;
   }
 }
 
-::ng-deep .copyright  {
+::ng-deep .sim-footer  {
   margin-bottom: 10px;
 
   & > * {
-    color: #666;
+    color: #666 !important;
   }
 }