diff --git a/nav.config.ts b/nav.config.ts
index 502642da0533bf0aaa0701f8b767b287d8782ea1..5debe9f4993429ae3e76713846c8120e346c5c8a 100644
--- a/nav.config.ts
+++ b/nav.config.ts
@@ -20,7 +20,7 @@ const c: IConfig = {
// 网站关键字
keywords: '导航,前端资源,社区站点,设计师,实用工具,学习资源,运营,网络安全,node.js',
- // 默认主题: Light | Sim
+ // 默认主题: Light | Sim | Side
theme: 'Light',
// 搜索引擎列表, 为空时不显示搜索引擎
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3ac0edae9509704297c09a01de684c348072c168..e366ea35fb87b30e78a0cf5a65b70766a9af92e6 100644
--- a/src/app/app.module.ts
+++ b/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(
diff --git a/src/components/fixbar/index.component.ts b/src/components/fixbar/index.component.ts
index 58fdcdbc06358053c8464160671b7952e5bb8eac..3d40ef6b913c4b95c982cdce28cd525bca4ca97a 100644
--- a/src/components/fixbar/index.component.ts
+++ b/src/components/fixbar/index.component.ts
@@ -38,6 +38,10 @@ export class FixbarComponent {
{
name: '切换到 Sim',
url: '/sim'
+ },
+ {
+ name: '切换到 Side',
+ url: '/side'
}
]
diff --git a/src/styles.scss b/src/styles.scss
index 94c37a07f61219ab12a8aa776e99824e3e07c4fe..e696a53fa079d3991a222ea84322b5d24da74cdd 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -110,6 +110,7 @@ b {
// 折叠箭头
.down-arrow {
+ display: inline-block;
align-self: center;
margin-left: 15px;
cursor: pointer;
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 860d36fb553a2086613b83ddf3e28f1afa92c025..9f177cecd54836b06d64b4cbcce1e790861917ef 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -3,6 +3,7 @@
export type ThemeType =
| 'Light'
| 'Sim'
+ | 'Side'
export interface INavFourProp {
icon?: string | null
diff --git a/src/view/index/side/index.component.html b/src/view/index/side/index.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..4c90da03603072a27ac9ab38158bd6238c2ffe18
--- /dev/null
+++ b/src/view/index/side/index.component.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
{{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.title }} x {{ item.nav.length }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/view/index/side/index.component.scss b/src/view/index/side/index.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c120306e3af088c4888194a65e992f145b768a78
--- /dev/null
+++ b/src/view/index/side/index.component.scss
@@ -0,0 +1,73 @@
+.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;
+ }
+}
diff --git a/src/view/index/side/index.component.ts b/src/view/index/side/index.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..085ec4062b96254098ea88c4d62676a80ac0d197
--- /dev/null
+++ b/src/view/index/side/index.component.ts
@@ -0,0 +1,86 @@
+// 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
+ }
+ }
+}
diff --git a/src/view/index/sim/index.component.scss b/src/view/index/sim/index.component.scss
index 6c36d69e499030492d65d2ea137b97efe8e709b0..40b69463743cd4f886dbece34354d841b9534eaa 100644
--- a/src/view/index/sim/index.component.scss
+++ b/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;
}
}