@@ -121,44 +121,55 @@ const Navbar = ({ unread }: { unread: number }) => {
121
121
</ Box >
122
122
{ /* 导航列表 */ }
123
123
< Box flex = { 1 } >
124
- { navbarList . map ( ( item ) => (
125
- < Box
126
- key = { item . link }
127
- { ...itemStyles }
128
- { ...( item . activeLink . includes ( router . pathname )
129
- ? {
130
- color : 'primary.600' ,
131
- bg : 'white' ,
132
- boxShadow :
133
- '0px 0px 1px 0px rgba(19, 51, 107, 0.08), 0px 4px 4px 0px rgba(19, 51, 107, 0.05)'
134
- }
135
- : {
136
- color : 'myGray.500' ,
137
- bg : 'transparent' ,
138
- _hover : {
139
- bg : isSecondNavbarPage ? 'white' : 'rgba(255,255,255,0.9)'
124
+ { navbarList . map ( ( item ) => {
125
+ const isActive = item . activeLink . includes ( router . pathname ) ;
126
+ return (
127
+ < Box
128
+ key = { item . link }
129
+ { ...itemStyles }
130
+ { ...( isActive
131
+ ? {
132
+ bg : 'white' ,
133
+ boxShadow :
134
+ '0px 0px 1px 0px rgba(19, 51, 107, 0.08), 0px 4px 4px 0px rgba(19, 51, 107, 0.05)'
140
135
}
141
- } ) }
142
- { ...( item . link !== router . asPath
143
- ? {
144
- onClick : ( ) => router . push ( item . link )
145
- }
146
- : { } ) }
147
- >
148
- < MyIcon
149
- name = {
150
- item . activeLink . includes ( router . pathname )
151
- ? ( item . activeIcon as any )
152
- : ( item . icon as any )
153
- }
154
- width = { '20px' }
155
- height = { '20px' }
156
- />
157
- < Box fontSize = { '12px' } transform = { 'scale(0.9)' } mt = { '5px' } lineHeight = { 1 } >
158
- { item . label }
136
+ : {
137
+ bg : 'transparent' ,
138
+ _hover : {
139
+ bg : isSecondNavbarPage ? 'white' : 'rgba(255,255,255,0.9)'
140
+ }
141
+ } ) }
142
+ { ...( item . link !== router . asPath
143
+ ? {
144
+ onClick : ( ) => router . push ( item . link )
145
+ }
146
+ : { } ) }
147
+ >
148
+ < MyIcon
149
+ { ...( isActive
150
+ ? {
151
+ name : item . activeIcon as any ,
152
+ color : 'primary.600'
153
+ }
154
+ : {
155
+ name : item . icon as any ,
156
+ color : 'myGray.400'
157
+ } ) }
158
+ width = { '20px' }
159
+ height = { '20px' }
160
+ />
161
+ < Box
162
+ fontSize = { '12px' }
163
+ transform = { 'scale(0.9)' }
164
+ mt = { '5px' }
165
+ lineHeight = { 1 }
166
+ color = { isActive ? 'primary.700' : 'myGray.500' }
167
+ >
168
+ { item . label }
169
+ </ Box >
159
170
</ Box >
160
- </ Box >
161
- ) ) }
171
+ ) ;
172
+ } ) }
162
173
</ Box >
163
174
164
175
{ unread > 0 && (
@@ -191,10 +202,10 @@ const Navbar = ({ unread }: { unread: number }) => {
191
202
{ ...itemStyles }
192
203
{ ...hoverStyle }
193
204
mt = { 0 }
194
- color = { 'myGray.500 ' }
205
+ color = { 'myGray.400 ' }
195
206
height = { '48px' }
196
207
>
197
- < Avatar src = { item . avatar } borderRadius = { 'md' } />
208
+ < Avatar src = { item . avatar } borderRadius = { 'md' } width = { '26px' } height = { '26px' } />
198
209
</ Link >
199
210
</ MyTooltip >
200
211
) ) }
@@ -208,7 +219,7 @@ const Navbar = ({ unread }: { unread: number }) => {
208
219
{ ...itemStyles }
209
220
{ ...hoverStyle }
210
221
mt = { 0 }
211
- color = { 'myGray.500 ' }
222
+ color = { 'myGray.400 ' }
212
223
height = { '48px' }
213
224
>
214
225
< MyIcon name = { 'common/gitInlight' } width = { '26px' } height = { '26px' } />
0 commit comments