Skip to content

Commit 1c4f540

Browse files
xjh22222228xjh22222228
committed
feat: implement responsive sidebar component with collapsible functionality
- Added a new SidebarComponent to manage navigation and sidebar display. - Integrated SidebarComponent into various views (light, mobile, sim, super, side). - Updated styles for the sidebar to ensure responsiveness and proper display on mobile devices. - Modified existing components to utilize the new sidebar structure, enhancing the overall layout. - Added conditional rendering for buttons based on user login status in create-web component. - Refactored HTML structure in multiple components for better semantic organization. - Improved accessibility and user experience with better handling of sidebar visibility and interactions.
1 parent 420755e commit 1c4f540

22 files changed

+1946
-2376
lines changed

‎package.json‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,18 @@
2323
"type": "module",
2424
"private": true,
2525
"dependencies": {
26-
"@angular/animations": "^19.2.11",
27-
"@angular/common": "^19.2.11",
28-
"@angular/compiler": "^19.2.11",
29-
"@angular/core": "^19.2.11",
30-
"@angular/forms": "^19.2.11",
31-
"@angular/platform-browser": "^19.2.11",
32-
"@angular/platform-browser-dynamic": "^19.2.11",
33-
"@angular/router": "^19.2.11",
34-
"@angular/service-worker": "^19.2.11",
26+
"@angular/animations": "^20.1.0",
27+
"@angular/common": "^20.1.0",
28+
"@angular/compiler": "^20.1.0",
29+
"@angular/core": "^20.1.0",
30+
"@angular/forms": "^20.1.0",
31+
"@angular/platform-browser": "^20.1.0",
32+
"@angular/platform-browser-dynamic": "^20.1.0",
33+
"@angular/router": "^20.1.0",
34+
"@angular/service-worker": "^20.1.0",
3535
"axios": "^1.10.0",
3636
"chrome-finder": "^1.0.7",
37-
"cron": "^4.3.1",
37+
"cron": "^4.3.2",
3838
"dayjs": "^1.11.13",
3939
"express": "^5.1.0",
4040
"file-saver": "^2.0.5",
@@ -43,20 +43,20 @@
4343
"localforage": "^1.10.0",
4444
"lz-string": "^1.5.0",
4545
"mitt": "^3.0.1",
46-
"ng-zorro-antd": "^19.3.1",
46+
"ng-zorro-antd": "^20.0.0",
4747
"nprogress": "^0.2.0",
48-
"puppeteer": "^24.10.2",
48+
"puppeteer": "^24.12.1",
4949
"qs": "^6.14.0",
5050
"rough-notation": "^0.5.1",
5151
"rxjs": "~7.8.2",
52-
"sharp": "^0.34.2",
52+
"sharp": "^0.34.3",
5353
"zone.js": "~0.15.1"
5454
},
5555
"devDependencies": {
56-
"@angular-devkit/build-angular": "^19.2.12",
57-
"@angular/cli": "^19.2.12",
58-
"@angular/compiler-cli": "^19.2.11",
59-
"@tailwindcss/postcss": "^4.1.10",
56+
"@angular-devkit/build-angular": "^20.1.0",
57+
"@angular/cli": "^20.1.0",
58+
"@angular/compiler-cli": "^20.1.0",
59+
"@tailwindcss/postcss": "^4.1.11",
6060
"@types/compression": "^1.8.1",
6161
"@types/file-saver": "^2.0.7",
6262
"@types/jasmine": "~5.1.8",
@@ -71,12 +71,12 @@
7171
"info-web": "^0.0.46",
7272
"jasmine-core": "~5.8.0",
7373
"lint-staged": "^16.1.2",
74-
"nodemailer": "^7.0.3",
75-
"oxlint": "^1.3.0",
74+
"nodemailer": "^7.0.5",
75+
"oxlint": "^1.6.0",
7676
"pm2": "^6.0.8",
7777
"postcss": "^8.5.6",
78-
"prettier": "^3.6.0",
79-
"tailwindcss": "^4.1.10",
78+
"prettier": "^3.6.2",
79+
"tailwindcss": "^4.1.11",
8080
"tslib": "^2.8.1",
8181
"tsx": "^4.20.3",
8282
"typescript": "~5.8.3"

‎pnpm-lock.yaml‎

Lines changed: 1453 additions & 1921 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/card/index.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@
304304
nz-tooltip
305305
>
306306
<ng-template #titleTemplate let-thing>
307-
<p>{{ dataSource.__name__ || dataSource.name }}</p>
307+
<div>{{ dataSource.__name__ || dataSource.name }}</div>
308308
{{ dataSource.__desc__ || dataSource.desc }}
309309
<tag-list
310310
[data]="dataSource.tags"

‎src/components/create-web/index.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
</nz-form-item>
4242
<ng-template #suffixButton>
4343
<button
44+
*ngIf="isLogin"
4445
[disabled]="!title"
4546
[nzLoading]="translating"
4647
nz-button
@@ -243,6 +244,7 @@
243244
{{ $t('_cancel') }}
244245
</button>
245246
<button
247+
*ngIf="isLogin"
246248
[disabled]="!desc"
247249
nz-button
248250
nzType="primary"

‎src/components/sidebar/index.component.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<nz-sider
2+
class="sider-compnent"
3+
[class.showSidebar]="openSidebar"
4+
nzCollapsible
5+
[(nzCollapsed)]="isCollapsed"
6+
[nzTrigger]="null"
7+
>
8+
<div
9+
*ngIf="openSidebar"
10+
class="mask block md:hidden"
11+
(click)="toggleSidebar(false)"
12+
></div>
13+
14+
<div class="mobile-collapse flex md:hidden" (click)="toggleSidebar()">
15+
<nz-icon
16+
*ngIf="!openSidebar"
17+
nzType="double-right"
18+
nzTheme="outline"
19+
class="text-base !text-gray-500"
20+
/>
21+
<nz-icon
22+
*ngIf="openSidebar"
23+
nzType="double-left"
24+
nzTheme="outline"
25+
class="text-base !text-gray-500"
26+
/>
27+
</div>
28+
29+
<div
30+
class="logo dark-bg dark-border-color2 pointer-events-none md:pointer-events-auto"
31+
(click)="handleCollapsed()"
32+
>
33+
<ng-content *ngIf="logoImage; else noLogo">
34+
<img
35+
[src]="commonService.settings().favicon"
36+
class="logo-img"
37+
*ngIf="isCollapsed; else noCollased"
38+
/>
39+
<ng-template #noCollased>
40+
<img class="pointer-events-none" [src]="logoImage" />
41+
</ng-template>
42+
</ng-content>
43+
44+
<ng-template #noLogo>
45+
<img [src]="commonService.settings().favicon" class="logo-img" />
46+
<span class="web-title" *ngIf="!isCollapsed">{{
47+
commonService.settings().sideTitle || commonService.title()
48+
}}</span>
49+
</ng-template>
50+
</div>
51+
52+
<ul nz-menu nzMode="inline" class="sider dark-bg select-none auto-scrollbar">
53+
<li
54+
nz-submenu
55+
*ngFor="
56+
let item of commonService.navs();
57+
index as pageIdx;
58+
trackBy: commonService.trackByItem
59+
"
60+
(nzOpenChange)="openMenu(item)"
61+
[nzTitle]="titleTpl"
62+
[nzOpen]="item.id === menuOpenId"
63+
>
64+
<ng-template #titleTpl>
65+
<app-logo
66+
*ngIf="item.icon"
67+
[src]="item.icon"
68+
class="mr-2.5 flex-center sideicon"
69+
[size]="25"
70+
[radius]="0"
71+
[name]="item.title"
72+
/>
73+
<span class="menu-title ellipsis">{{
74+
isCollapsed && item.icon
75+
? ''
76+
: isCollapsed && !item.icon
77+
? item.title
78+
: item.title
79+
}}</span>
80+
</ng-template>
81+
82+
<ul>
83+
<li
84+
nz-menu-item
85+
*ngFor="
86+
let el of item.nav;
87+
let idIdx = index;
88+
trackBy: commonService.trackByItem
89+
"
90+
[nzSelected]="
91+
commonService.oneIndex === pageIdx &&
92+
commonService.twoIndex === idIdx
93+
"
94+
(click)="onClickNav(el)"
95+
>
96+
<app-logo
97+
*ngIf="el.icon"
98+
[src]="el.icon"
99+
class="mr-2 flex-center"
100+
[size]="25"
101+
[radius]="0"
102+
[name]="el.title"
103+
/>
104+
<span class="ellipsis">{{ el.title }}</span>
105+
106+
<div
107+
*ngIf="
108+
commonService.oneIndex === pageIdx &&
109+
commonService.twoIndex === idIdx
110+
"
111+
(click)="commonService.onCollapseAll($event)"
112+
class="collapse-wrapper"
113+
>
114+
<i
115+
*ngIf="!isCollapsed"
116+
class="iconfont iconweibiaoti25 collapseIcon"
117+
[class.active]="commonService.collapsed"
118+
>
119+
</i>
120+
</div>
121+
</li>
122+
</ul>
123+
</li>
124+
</ul>
125+
</nz-sider>

‎src/components/sidebar/index.component.scss‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@media (max-width: 768px) {
2+
.sider-compnent {
3+
position: fixed !important;
4+
top: 0 !important;
5+
left: 0 !important;
6+
transform: translateX(-100%);
7+
width: 220px !important;
8+
max-width: 220px !important;
9+
}
10+
}
11+
12+
:host {
13+
position: sticky;
14+
top: 0;
15+
left: 0;
16+
height: 100svh;
17+
z-index: 32;
18+
}
19+
20+
.sider-compnent {
21+
height: 100svh;
22+
background-color: #fff;
23+
width: 200px;
24+
display: block;
25+
&.showSidebar {
26+
transform: translateX(0);
27+
}
28+
.mask {
29+
z-index: -1;
30+
position: fixed;
31+
top: 0;
32+
left: 0;
33+
width: 100vw;
34+
height: 100vh;
35+
backdrop-filter: blur(3px);
36+
}
37+
::ng-deep {
38+
.ant-layout-sider-children {
39+
display: flex;
40+
flex-direction: column;
41+
}
42+
.ant-menu.ant-menu-inline-collapsed {
43+
& > .ant-menu-submenu {
44+
> .ant-menu-submenu-title {
45+
padding: 0 !important;
46+
text-align: center;
47+
}
48+
}
49+
.sideicon {
50+
margin-right: 0;
51+
}
52+
}
53+
}
54+
.collapse-wrapper {
55+
position: absolute;
56+
right: 0;
57+
top: 0;
58+
padding: 0 15px;
59+
.collapseIcon {
60+
display: block;
61+
transform: rotate(-270deg);
62+
&.active {
63+
transform: rotate(-360deg);
64+
}
65+
}
66+
}
67+
68+
.ant-menu-item {
69+
padding-right: 40px;
70+
padding-left: 38px !important;
71+
}
72+
.mobile-collapse {
73+
position: absolute;
74+
top: 50px;
75+
right: -40px;
76+
width: 40px;
77+
height: 40px;
78+
box-shadow: 2px 0 8px #00000026;
79+
background-color: #fff;
80+
border-radius: 0 4px 4px 0;
81+
justify-content: center;
82+
align-items: center;
83+
cursor: pointer;
84+
}
85+
.menu-title {
86+
max-width: 130px;
87+
}
88+
.logo {
89+
z-index: 11;
90+
width: 100%;
91+
background-color: #fff;
92+
white-space: nowrap;
93+
overflow: hidden;
94+
text-overflow: ellipsis;
95+
cursor: pointer;
96+
user-select: none;
97+
text-align: center;
98+
line-height: 70px;
99+
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
100+
img {
101+
max-height: 50px;
102+
}
103+
.logo-img {
104+
width: 50px;
105+
height: 50px;
106+
pointer-events: none;
107+
}
108+
.web-title {
109+
font-weight: bold;
110+
font-size: 20px;
111+
margin-left: 8px;
112+
vertical-align: middle;
113+
}
114+
}
115+
.sider {
116+
height: 100%;
117+
overflow: hidden;
118+
overflow-y: auto;
119+
flex: 1;
120+
padding-bottom: 30px;
121+
}
122+
}
123+
124+
::ng-deep {
125+
.ant-menu-title-content {
126+
display: inline-flex;
127+
align-items: center;
128+
}
129+
}

0 commit comments

Comments
 (0)