@@ -24,98 +24,107 @@ export default function AppNavbar() {
2424 const location = useLocation ( )
2525
2626 return (
27- < Navbar
28- shouldHideOnScroll
29- isMenuOpen = { isMenuOpen }
30- onMenuOpenChange = { setIsMenuOpen }
31- className = "w-full max-w-[1080px] h-full rounded-full border-small dark:border-primary-200/40 dark:bg-background/60 shadow-medium backdrop-blur-md mt-2"
32- >
33- < NavbarContent >
34- < NavbarMenuToggle
35- aria-label = { isMenuOpen ? 'Close menu' : 'Open menu' }
36- className = "sm:hidden"
37- />
38- < NavbarBrand as = "li" className = "gap-3 max-w-fit" >
27+ < div className = "flex flex-row flex-nowrap justify-center sticky top-0 z-40" >
28+ < Navbar
29+ shouldHideOnScroll
30+ isMenuOpen = { isMenuOpen }
31+ onMenuOpenChange = { setIsMenuOpen }
32+ className = "w-full max-w-[1080px] h-full rounded-full border-small dark:border-primary-200/40 dark:bg-background/60 shadow-medium backdrop-blur-md mt-2 "
33+ >
34+ < NavbarContent >
35+ < NavbarMenuToggle
36+ aria-label = { isMenuOpen ? 'Close menu' : 'Open menu' }
37+ className = "sm:hidden"
38+ />
39+ < NavbarBrand as = "li" className = "gap-3 max-w-fit" >
40+ < Link
41+ color = "foreground"
42+ className = "flex items-center justify-start"
43+ href = "/home"
44+ >
45+ < Avatar
46+ src = "/logo.svg"
47+ alt = "Maddons logo"
48+ className = "w-8 h-8 object-contain bg-transparent"
49+ />
50+ < p className = "text-tiny ml-0 mr-1 font-bold uppercase text-inherit md:text-base" >
51+ addon Manager
52+ </ p >
53+ < Chip
54+ color = "primary"
55+ variant = "flat"
56+ size = "sm"
57+ className = "hidden sm:flex"
58+ >
59+ on Dev👩🏽💻
60+ </ Chip >
61+ </ Link >
62+ </ NavbarBrand >
63+ </ NavbarContent >
64+ < NavbarContent className = "hidden gap-4 sm:flex" justify = "center" >
65+ { siteConfig . navItems . map ( ( item , index ) => (
66+ < NavbarItem key = { `${ item . href } -${ index } ` } >
67+ < Link
68+ color = {
69+ location . pathname === item . href ? 'foreground' : 'foreground'
70+ }
71+ href = { item . href }
72+ className = { `${
73+ location . pathname === item . href
74+ ? 'text-default-500 font-semibold'
75+ : ''
76+ } `}
77+ onPress = { ( ) => window . scrollTo ( { top : 0 , behavior : 'smooth' } ) }
78+ >
79+ { item . label }
80+ </ Link >
81+ </ NavbarItem >
82+ ) ) }
83+ < Resources items = { siteConfig . navItemsAccord } />
3984 < Link
85+ href = "https://maddonsmanager.featurebase.app/"
86+ isExternal
87+ showAnchorIcon
4088 color = "foreground"
41- className = "flex items-center justify-start"
42- href = "/home"
4389 >
44- < Avatar
45- src = "/logo.svg"
46- alt = "Maddons logo"
47- className = "w-8 h-8 object-contain bg-transparent"
48- />
49- < p className = "text-tiny ml-0 mr-1 font-bold uppercase text-inherit md:text-base" >
50- addon Manager
51- </ p >
52- < Chip color = "primary" variant = "flat" size = "sm" className = "hidden sm:flex" >
53- on Dev👩🏽💻
54- </ Chip >
90+ Request
5591 </ Link >
56- </ NavbarBrand >
57- </ NavbarContent >
58- < NavbarContent className = "hidden gap-4 sm:flex" justify = "center" >
59- { siteConfig . navItems . map ( ( item , index ) => (
60- < NavbarItem key = { `${ item . href } -${ index } ` } >
61- < Link
62- color = { location . pathname === item . href ? 'foreground' : 'foreground' }
63- href = { item . href }
64- className = { `${
65- location . pathname === item . href
66- ? 'text-default-500 font-semibold'
67- : ''
68- } `}
69- onPress = { ( ) => window . scrollTo ( { top : 0 , behavior : 'smooth' } ) }
70- >
71- { item . label }
92+ </ NavbarContent >
93+ < NavbarContent justify = "end" >
94+ < NavbarItem className = " gap-2 flex" >
95+ < Link isExternal aria-label = "Discord" href = { siteConfig . links . discord } >
96+ < DiscordIcon className = "text-default-500" />
7297 </ Link >
73- </ NavbarItem >
74- ) ) }
75- < Resources items = { siteConfig . navItemsAccord } />
76- < Link
77- href = "https://maddonsmanager.featurebase.app/"
78- isExternal
79- showAnchorIcon
80- color = "foreground"
81- >
82- Request
83- </ Link >
84- </ NavbarContent >
85- < NavbarContent justify = "end" >
86- < NavbarItem className = " gap-2 flex" >
87- < Link isExternal aria-label = "Discord" href = { siteConfig . links . discord } >
88- < DiscordIcon className = "text-default-500" />
89- </ Link >
90- < Link isExternal aria-label = "Twitter" href = { siteConfig . links . twitter } >
91- < TwitterIcon className = "w-5 h-5 text-default-500" />
92- </ Link >
93- < Link isExternal aria-label = "Github" href = { siteConfig . links . github } >
94- < GithubIcon className = "w-5 h-5 text-default-500" />
95- </ Link >
96- < Divider orientation = "vertical" className = "h-auto mr-4 ml-2" />
97- < ThemeSwitch />
98- </ NavbarItem >
99- </ NavbarContent >
100- < NavbarMenu className = "top-[calc(var(--navbar-height)/2)] mx-auto mt-9 max-h-[40vh] max-w-[80vw] rounded-large border-small border-primary-200/20 bg-background/60 py-6 shadow-medium backdrop-blur-md" >
101- { siteConfig . navMenuItems . map ( ( item , index ) => (
102- < NavbarMenuItem key = { `${ item } -${ index } ` } >
103- < Link
104- color = { location . pathname === item . href ? 'primary' : 'foreground' }
105- className = { `${
106- location . pathname === item . href
107- ? 'text-default-500 font-medium'
108- : ''
109- } `}
110- href = { item . href }
111- size = "lg"
112- onPress = { ( ) => setIsMenuOpen ( false ) }
113- >
114- { item . label }
98+ < Link isExternal aria-label = "Twitter" href = { siteConfig . links . twitter } >
99+ < TwitterIcon className = "w-5 h-5 text-default-500" />
100+ </ Link >
101+ < Link isExternal aria-label = "Github" href = { siteConfig . links . github } >
102+ < GithubIcon className = "w-5 h-5 text-default-500" />
115103 </ Link >
116- </ NavbarMenuItem >
117- ) ) }
118- </ NavbarMenu >
119- </ Navbar >
104+ < Divider orientation = "vertical" className = "h-auto mr-4 ml-2" />
105+ < ThemeSwitch />
106+ </ NavbarItem >
107+ </ NavbarContent >
108+ < NavbarMenu className = "top-[calc(var(--navbar-height)/2)] mx-auto mt-9 max-h-[40vh] max-w-[80vw] rounded-large border-small border-primary-200/20 bg-background/60 py-6 shadow-medium backdrop-blur-md" >
109+ { siteConfig . navMenuItems . map ( ( item , index ) => (
110+ < NavbarMenuItem key = { `${ item } -${ index } ` } >
111+ < Link
112+ color = { location . pathname === item . href ? 'primary' : 'foreground' }
113+ className = { `${
114+ location . pathname === item . href
115+ ? 'text-default-500 font-medium'
116+ : ''
117+ } `}
118+ href = { item . href }
119+ size = "lg"
120+ onPress = { ( ) => setIsMenuOpen ( false ) }
121+ >
122+ { item . label }
123+ </ Link >
124+ </ NavbarMenuItem >
125+ ) ) }
126+ </ NavbarMenu >
127+ </ Navbar >
128+ </ div >
120129 )
121130}
0 commit comments