Skip to content

Commit 0d1a5c6

Browse files
FgrReloadedFgrReloaded
committed
center the navbar links
1 parent b3ae7e2 commit 0d1a5c6

File tree

1 file changed

+73
-71
lines changed

1 file changed

+73
-71
lines changed

‎apps/web/src/app/(home)/_components/Navbar.tsx‎

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const Navbar = () => {
4141

4242
return (
4343
<nav
44-
className={`fixed top-0 right-0 z-[100] w-screen px-8 py-5 flex items-center sm:justify-between justify-center transition-all duration-300 ${
44+
className={`fixed top-0 right-0 z-[100] w-screen px-8 py-5 grid grid-cols-1 md:grid-cols-3 items-center transition-all duration-300 ${
4545
scrolled
4646
? "bg-transparent border-transparent"
4747
: "sm:bg-black/40 sm:backdrop-blur-xl sm:border-b border-blue-500/20"
@@ -62,82 +62,84 @@ const Navbar = () => {
6262
</span>
6363
</div>
6464

65-
<div
66-
className={`flex items-center backdrop-blur-md bg-black/40 rounded-md border border-blue-500/30 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
67-
scrolled ? "w-[420px]" : "sm:w-[280px] w-[350px]"
68-
}`}
69-
>
65+
<div className="flex justify-center">
7066
<div
71-
className="absolute transition-all duration-300 ease-in-out bg-blue-900/20 border border-blue-500/20 rounded-md py-2"
72-
style={bgStyles}
73-
/>
74-
<Link
75-
href="/"
76-
ref={(ref) => {
77-
linkRefs.current.home = ref;
78-
}}
79-
onMouseOver={() => setActiveLink("home")}
80-
className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative font-mono"
81-
>
82-
<span className="text-blue-500">~/</span>home
83-
</Link>
84-
<Link
85-
href="https://www.github.com/better-t-stack/create-better-t-stack"
86-
target="_blank"
87-
ref={(ref) => {
88-
linkRefs.current.github = ref;
89-
}}
90-
onMouseOver={() => setActiveLink("github")}
91-
onMouseLeave={() => setActiveLink("home")}
92-
className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
93-
>
94-
<PackageIcon pm="github" className="w-4 h-4" />{" "}
95-
<span className="max-sm:hidden">github</span>
96-
</Link>
97-
<Link
98-
href="https://www.npmjs.com/package/create-better-t-stack"
99-
target="_blank"
100-
ref={(ref) => {
101-
linkRefs.current.npm = ref;
102-
}}
103-
onMouseOver={() => setActiveLink("npm")}
104-
onMouseLeave={() => setActiveLink("home")}
105-
className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
106-
>
107-
<PackageIcon pm="npm" className="w-4 h-4 rounded-full" />{" "}
108-
<span className="max-sm:hidden">npm</span>
109-
</Link>
110-
<span
111-
className="text-blue-500 transition-all duration-300"
112-
style={{
113-
opacity: scrolled ? 1 : 0,
114-
transform: scrolled ? "translateY(0)" : "translateY(-8px)",
115-
}}
116-
>
117-
|
118-
</span>
119-
<Link
120-
href="/docs"
121-
ref={(ref) => {
122-
linkRefs.current.documentation = ref;
123-
}}
124-
onMouseOver={() => setActiveLink("documentation")}
125-
onMouseLeave={() => setActiveLink("home")}
126-
style={{
127-
transform: scrolled ? "translateY(0)" : "sm:translateY(-8px)",
128-
}}
129-
className={`hover:text-blue-300 transition-all duration-300 py-2 px-4 rounded-md font-mono ${
130-
scrolled
131-
? "sm:opacity-100 sm:translate-y-0"
132-
: "sm:opacity-0 sm:pointer-events-none"
67+
className={`flex items-center backdrop-blur-md bg-black/40 rounded-md border border-blue-500/30 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
68+
scrolled ? "w-[420px]" : "sm:w-[280px] w-[350px]"
13369
}`}
13470
>
135-
documentation
136-
</Link>
71+
<div
72+
className="absolute transition-all duration-300 ease-in-out bg-blue-900/20 border border-blue-500/20 rounded-md py-2"
73+
style={bgStyles}
74+
/>
75+
<Link
76+
href="/"
77+
ref={(ref) => {
78+
linkRefs.current.home = ref;
79+
}}
80+
onMouseOver={() => setActiveLink("home")}
81+
className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative font-mono"
82+
>
83+
<span className="text-blue-500">~/</span>home
84+
</Link>
85+
<Link
86+
href="https://www.github.com/better-t-stack/create-better-t-stack"
87+
target="_blank"
88+
ref={(ref) => {
89+
linkRefs.current.github = ref;
90+
}}
91+
onMouseOver={() => setActiveLink("github")}
92+
onMouseLeave={() => setActiveLink("home")}
93+
className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
94+
>
95+
<PackageIcon pm="github" className="w-4 h-4" />{" "}
96+
<span className="max-sm:hidden">github</span>
97+
</Link>
98+
<Link
99+
href="https://www.npmjs.com/package/create-better-t-stack"
100+
target="_blank"
101+
ref={(ref) => {
102+
linkRefs.current.npm = ref;
103+
}}
104+
onMouseOver={() => setActiveLink("npm")}
105+
onMouseLeave={() => setActiveLink("home")}
106+
className="text-gray-300 hover:text-blue-300 transition-colors py-2 px-4 rounded-md relative flex gap-2 items-center font-mono"
107+
>
108+
<PackageIcon pm="npm" className="w-4 h-4 rounded-full" />{" "}
109+
<span className="max-sm:hidden">npm</span>
110+
</Link>
111+
<span
112+
className="text-blue-500 transition-all duration-300"
113+
style={{
114+
opacity: scrolled ? 1 : 0,
115+
transform: scrolled ? "translateY(0)" : "translateY(-8px)",
116+
}}
117+
>
118+
|
119+
</span>
120+
<Link
121+
href="/docs"
122+
ref={(ref) => {
123+
linkRefs.current.documentation = ref;
124+
}}
125+
onMouseOver={() => setActiveLink("documentation")}
126+
onMouseLeave={() => setActiveLink("home")}
127+
style={{
128+
transform: scrolled ? "translateY(0)" : "sm:translateY(-8px)",
129+
}}
130+
className={`hover:text-blue-300 transition-all duration-300 py-2 px-4 rounded-md font-mono ${
131+
scrolled
132+
? "sm:opacity-100 sm:translate-y-0"
133+
: "sm:opacity-0 sm:pointer-events-none"
134+
}`}
135+
>
136+
documentation
137+
</Link>
138+
</div>
137139
</div>
138140

139141
<div
140-
className={`transition-opacity duration-300 ${
142+
className={`flex justify-end transition-opacity duration-300 ${
141143
scrolled ? "opacity-0 pointer-events-none" : "opacity-100"
142144
}`}
143145
>

0 commit comments

Comments
 (0)