@@ -204,62 +204,69 @@ export const Header: React.FC = () => {
204204
205205 return (
206206 < header
207- className = "w-full border-0 border-b border-solid border-b-stone-100 h-12 flex items-center justify-between text-sm px-4 fixed top-0 z-30 "
207+ className = "fixed top-0 z-30 w-full overflow-hidden border-0 border-b border-solid border-b-stone-100"
208208 style = { {
209+ height : "var(--app-header-offset)" ,
209210 background : "rgba(255,255,255,.5)" ,
210211 backdropFilter : "blur(8px)" ,
211- paddingTop : "var(--safe-area-inset-top)" ,
212+ paddingTop : "var(--safe-area-inset-top, 0px )" ,
212213 } }
213214 >
214- < a
215- href = "https://github.com/moayuisuda "
216- target = "_blank"
217- rel = "noopener noreferrer"
218- className = "font-thin font-mono text-inherit hidden md:block"
215+ < div
216+ className = "relative flex items-center justify-between px-4 text-sm "
217+ style = { {
218+ height : "var(--app-header-height)" ,
219+ } }
219220 >
220- BY MOAYUISUDA
221- </ a >
221+ < a
222+ href = "https://github.com/moayuisuda"
223+ target = "_blank"
224+ rel = "noopener noreferrer"
225+ className = "hidden font-mono font-thin text-inherit md:block"
226+ >
227+ BY MOAYUISUDA
228+ </ a >
222229
223- < Link legacyBehavior href = "/" >
224- < img
225- className = "block cursor-pointer static md:absolute"
226- src = "/pics/logo.svg"
227- alt = ""
228- style = { {
229- left : "calc(50% - 70px)" ,
230- } }
231- height = { 36 }
232- />
233- </ Link >
230+ < Link legacyBehavior href = "/" >
231+ < img
232+ className = "static block h-9 w-auto cursor-pointer md:absolute"
233+ src = "/pics/logo.svg"
234+ alt = ""
235+ style = { {
236+ left : "calc(50% - 70px)" ,
237+ } }
238+ />
239+ </ Link >
234240
235- < Space >
236- < Menu
237- overflowedIndicator = { < UnorderedListOutlined /> }
238- className = "flex items-center w-28 lg:w-auto justify-end "
239- style = { {
240- lineHeight : "36px" ,
241- minWidth : 0 ,
242- flex : "auto" ,
243- } }
244- mode = "horizontal"
245- items = { menuItemsMap [ locale ] }
246- />
247- { isLoggedIn && (
248- < div className = "flex items-center mr-2 " >
249- < div
250- style = { {
251- marginRight : - 2 ,
252- marginTop : - 8 ,
253- } }
254- className = { getStatusDotStyle ( ) }
255- title = { getStatusTitle ( ) }
256- > </ div >
257- < CloudSyncOutlined style = { { fontSize : 16 , marginTop : 2 } } />
241+ < Space align = "center" >
242+ < Menu
243+ overflowedIndicator = { < UnorderedListOutlined /> }
244+ className = "flex items-center justify-end w-28 lg:w-auto"
245+ style = { {
246+ lineHeight : "36px" ,
247+ minWidth : 0 ,
248+ flex : "auto" ,
249+ } }
250+ mode = "horizontal"
251+ items = { menuItemsMap [ locale ] }
252+ />
253+ { isLoggedIn && (
254+ < div className = "mr-2 flex items-center" >
255+ < div
256+ style = { {
257+ marginRight : - 2 ,
258+ marginTop : - 8 ,
259+ } }
260+ className = { getStatusDotStyle ( ) }
261+ title = { getStatusTitle ( ) }
262+ > </ div >
263+ < CloudSyncOutlined style = { { fontSize : 16 , marginTop : 2 } } />
258264
259- { /* <span className="text-xs text-gray-600">{user.name}</span> */ }
260- </ div >
261- ) }
262- </ Space >
265+ { /* <span className="text-xs text-gray-600">{user.name}</span> */ }
266+ </ div >
267+ ) }
268+ </ Space >
269+ </ div >
263270 </ header >
264271 ) ;
265272} ;
0 commit comments