44 * @author Obrymec - https://obrymec.vercel.app
55 * @supported DESKTOP, MOBILE
66 * @created 2025-07-22
7- * @updated 2025-08-18
7+ * @updated 2025-08-23
88 * @file header.tsx
9- * @version 0.0.5
9+ * @version 0.0.6
1010 */
1111
1212// React dependencies.
@@ -56,7 +56,7 @@ import {
5656import {
5757 POPPINS_SEMI_BOLD ,
5858 SCROLL_ORIGIN_ID ,
59- BREAKPOINT_316 ,
59+ BREAKPOINT_416 ,
6060 SF_SEMI_BOLD ,
6161 SF_MEDIUM
6262} from "@/common/constants/variables.ts" ;
@@ -139,7 +139,7 @@ export default function Header () {
139139 >
140140 { /** Vector icon */ }
141141 { icon != null && < Icon
142- display = { { base : "inline-block" , sm : "inline-block" , md : "none" } }
142+ display = { { base : "inline-block" , lg : "none" } }
143143 marginRight = { 2 }
144144 height = { 6 }
145145 width = { 6 }
@@ -324,7 +324,7 @@ export default function Header () {
324324 url = { appLogo }
325325 />
326326 { /** Company name */ }
327- { windowWidth > BREAKPOINT_316 && < Text
327+ { windowWidth > BREAKPOINT_416 && < Text
328328 fontFamily = { POPPINS_SEMI_BOLD }
329329 whiteSpace = "nowrap"
330330 lineHeight = { 0 }
@@ -333,16 +333,13 @@ export default function Header () {
333333 </ Flex >
334334 { /** Centered part */ }
335335 < Flex
336- display = { { base : "none" , sm : "none" , md : "inline-flex" } }
337336 columnGap = { { base : 2 , sm : 2 , md : 4 , lg : 6 , xl : 7 } }
337+ display = { { base : "none" , lg : "inline-flex" } }
338338 transition = "all .2s"
339339 alignItems = "center"
340340 > { buildOptions } </ Flex >
341341 { /** Right part */ }
342- < Flex
343- columnGap = { { base : 3 , sm : 4 } }
344- alignItems = "center"
345- >
342+ < Flex columnGap = { { base : 3 , sm : 4 } } alignItems = "center" >
346343 { /** Language selection */ }
347344 < ReactFlagsSelect
348345 onSelect = { ( code : string ) : void => switchLanguage ( code ) }
@@ -357,9 +354,9 @@ export default function Header () {
357354 />
358355 { /** Emburger menu */ }
359356 < Icon
360- display = { { base : "inline-block" , sm : "inline-block" , md : "none" } }
361357 onClick = { ( ) : void => displayMenu ( ! isMenuDisplayed ) }
362358 as = { isMenuDisplayed ? IoCloseOutline : RiMenu5Fill }
359+ display = { { base : "inline-block" , lg : "none" } }
363360 _hover = { { color : "primary.600" } }
364361 transition = "all .2s"
365362 color = "neutral.9"
@@ -380,7 +377,8 @@ export default function Header () {
380377 display = { {
381378 base : ( isMenuDisplayed ? "flex" : "none" ) ,
382379 sm : ( isMenuDisplayed ? "flex" : "none" ) ,
383- md : "none"
380+ md : ( isMenuDisplayed ? "flex" : "none" ) ,
381+ lg : "none"
384382 } }
385383 > { buildOptions } </ Flex >
386384 </ Flex > ;
0 commit comments