Skip to content

Commit 351dc92

Browse files
haricnugrahaharicnugraha
authored
feat: change colored logo (#25)
1 parent 7a90cf9 commit 351dc92

File tree

8 files changed

+298
-355
lines changed

8 files changed

+298
-355
lines changed

‎app/(inferenceai)/inferenceai/components/nav.tsx‎

Lines changed: 92 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import Image from "next/image";
44
import Link from "next/link";
55
import { cn } from "@/app/utils/tailwind";
6-
import { ReactNode, useState } from "react";
6+
import { useState } from "react";
77
import {
88
NavigationMenu,
99
NavigationMenuItem,
@@ -25,116 +25,100 @@ export default function Nav({
2525
const [isOpen, setIsOpen] = useState(false);
2626

2727
return (
28-
<StickyNavigationMain isMenuOpen={isOpen}>
29-
{({ shouldBeWhite }) => (
30-
<>
31-
<NavContainer>
32-
<Link
33-
href={
34-
type === "inferenceai"
35-
? "/inferenceai"
36-
: "/inferenceai/rag-chatbot"
37-
}
38-
className="flex items-center">
39-
<InferenceAI isOpen={isOpen} />
40-
</Link>
28+
<StickyNavigationMain>
29+
<div className={cn("w-full px-4 py-5 md:px-8", isOpen && "bg-white")}>
30+
<div className="mx-auto flex w-full max-w-7xl flex-wrap items-center justify-between transition-all duration-300 group-data-[scroll='false']:border-none">
31+
<Link
32+
href={
33+
type === "inferenceai"
34+
? "/inferenceai"
35+
: "/inferenceai/rag-chatbot"
36+
}
37+
className="flex items-center">
38+
<InferenceAI isOpen={isOpen} />
39+
</Link>
4140

42-
<CenterNavItems>
43-
<NavigationMenu className="mx-8 xl:mx-0">
44-
<NavigationMenuList className="flex gap-5">
45-
{(type === "inferenceai"
46-
? navInferenceai(lang)
47-
: navRagChatbot(lang)
48-
).map((item, idx) => (
49-
<NavigationMenuItem key={idx} className="text-center">
50-
<Link
51-
href={item.href}
52-
className={cn(
53-
shouldBeWhite
54-
? "text-inferenceai-indigo hover:text-hyperjump-blue"
55-
: "text-white hover:text-hyperjump-blue",
56-
"text-lg font-medium transition-colors xl:text-xl"
57-
)}>
58-
{item.label}
59-
</Link>
60-
</NavigationMenuItem>
61-
))}
62-
</NavigationMenuList>
63-
</NavigationMenu>
64-
</CenterNavItems>
65-
66-
<RightNavItems>
67-
<HeroCTAButton lang={lang} />
68-
</RightNavItems>
69-
70-
{/* Mobile Toggle */}
71-
<div className="flex items-center xl:hidden">
72-
<button
73-
onClick={() => setIsOpen(!isOpen)}
74-
className="ml-3 p-2"
75-
aria-label="Toggle menu">
76-
<svg
77-
className="h-6 w-6"
78-
fill="none"
79-
stroke={shouldBeWhite ? "black" : "white"}
80-
viewBox="0 0 24 24"
81-
xmlns="http://www.w3.org/2000/svg">
82-
{isOpen ? (
83-
<path
84-
strokeLinecap="round"
85-
strokeLinejoin="round"
86-
strokeWidth={2}
87-
d="M6 18L18 6M6 6l12 12"
88-
/>
89-
) : (
90-
<path
91-
strokeLinecap="round"
92-
strokeLinejoin="round"
93-
strokeWidth={2}
94-
d="M4 6h16M4 12h16M4 18h16"
95-
/>
96-
)}
97-
</svg>
98-
</button>
99-
</div>
100-
</NavContainer>
101-
102-
{/* Mobile Menu */}
103-
{isOpen && (
104-
<div className="bg-white shadow-md xl:hidden">
105-
<div className="mx-auto flex w-full flex-col space-y-4 px-4 py-5 md:px-8">
41+
<CenterNavItems>
42+
<NavigationMenu className="mx-8 xl:mx-0">
43+
<NavigationMenuList className="flex gap-5">
10644
{(type === "inferenceai"
10745
? navInferenceai(lang)
10846
: navRagChatbot(lang)
109-
).map((item, idx) => (
110-
<Link
111-
key={idx}
112-
href={item.href}
113-
className="text-2xl text-inferenceai-indigo hover:text-hyperjump-blue"
114-
onClick={() => setIsOpen(false)}>
115-
{item.label}
116-
</Link>
47+
).map(({ href, label }) => (
48+
<NavigationMenuItem key={href} className="text-center">
49+
<Link
50+
href={href}
51+
className="text-lg font-medium transition-colors group-[[data-scroll=false]]:text-white group-[[data-scroll=true]]:text-inferenceai-indigo group-[[data-scroll=false]]:hover:text-hyperjump-blue group-[[data-scroll=true]]:hover:text-hyperjump-blue xl:text-xl">
52+
{label}
53+
</Link>
54+
</NavigationMenuItem>
11755
))}
118-
<HeroCTAButton lang={lang} />
119-
</div>
120-
</div>
121-
)}
122-
</>
123-
)}
124-
</StickyNavigationMain>
125-
);
126-
}
56+
</NavigationMenuList>
57+
</NavigationMenu>
58+
</CenterNavItems>
12759

128-
export function NavContainer({ children }: { children: ReactNode }) {
129-
return (
130-
<div className="w-full px-4 py-5 md:px-8">
131-
<div
132-
className={cn(
133-
"mx-auto flex w-full max-w-7xl flex-wrap items-center justify-between transition-all duration-300 group-data-[scroll='false']:border-none"
134-
)}>
135-
{children}
60+
<RightNavItems>
61+
<HeroCTAButton lang={lang} />
62+
</RightNavItems>
63+
64+
{/* Mobile Toggle */}
65+
<div className="flex items-center xl:hidden">
66+
<button
67+
onClick={() => setIsOpen(!isOpen)}
68+
className="ml-3 p-2"
69+
aria-label="Toggle menu">
70+
<svg
71+
className={cn(
72+
"h-6 w-6",
73+
isOpen
74+
? "stroke-black"
75+
: "stroke-white group-[[data-scroll=true]]:stroke-black"
76+
)}
77+
fill="none"
78+
viewBox="0 0 24 24"
79+
xmlns="http://www.w3.org/2000/svg">
80+
{isOpen ? (
81+
<path
82+
strokeLinecap="round"
83+
strokeLinejoin="round"
84+
strokeWidth={2}
85+
d="M6 18L18 6M6 6l12 12"
86+
/>
87+
) : (
88+
<path
89+
strokeLinecap="round"
90+
strokeLinejoin="round"
91+
strokeWidth={2}
92+
d="M4 6h16M4 12h16M4 18h16"
93+
/>
94+
)}
95+
</svg>
96+
</button>
97+
</div>
98+
</div>
13699
</div>
137-
</div>
100+
101+
{/* Mobile Menu */}
102+
{isOpen && (
103+
<div className="bg-white shadow-md xl:hidden">
104+
<div className="mx-auto flex w-full flex-col space-y-4 px-4 py-5 md:px-8">
105+
{(type === "inferenceai"
106+
? navInferenceai(lang)
107+
: navRagChatbot(lang)
108+
).map(({ href, label }) => (
109+
<Link
110+
key={href}
111+
href={href}
112+
className="text-2xl text-inferenceai-indigo hover:text-hyperjump-blue"
113+
onClick={() => setIsOpen(false)}>
114+
{label}
115+
</Link>
116+
))}
117+
<HeroCTAButton lang={lang} />
118+
</div>
119+
</div>
120+
)}
121+
</StickyNavigationMain>
138122
);
139123
}
140124

@@ -163,9 +147,8 @@ function InferenceAI({ isOpen }: { isOpen: boolean }) {
163147
width={187}
164148
height={32}
165149
className={cn(
166-
"h-8",
167-
isOpen && "hidden",
168-
"group-data-[scroll='true']:hidden"
150+
"h-8 group-data-[scroll='true']:hidden",
151+
isOpen && "hidden"
169152
)}
170153
/>
171154
<Image
@@ -174,9 +157,8 @@ function InferenceAI({ isOpen }: { isOpen: boolean }) {
174157
width={187}
175158
height={32}
176159
className={cn(
177-
"hidden h-8",
178-
isOpen && "block",
179-
"group-data-[scroll='true']:block"
160+
"hidden h-8 group-data-[scroll='true']:block",
161+
isOpen && "block"
180162
)}
181163
/>
182164
</>

‎app/(main)/[lang]/language-picker.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function LanguagePicker({
2828
"flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium transition-colors",
2929
isActive
3030
? isOpen
31-
? "bg-hyperjump-black"
31+
? "bg-hyperjump-blue"
3232
: "text-white group-data-[scroll='false']:bg-white group-data-[scroll='true']:bg-hyperjump-blue group-data-[scroll='false']:text-hyperjump-black group-data-[scroll='true']:text-white"
3333
: isOpen
3434
? "text-hyperjump-black"
@@ -62,9 +62,7 @@ export function LanguagePickerServices({
6262
className={cn(
6363
"flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium transition-colors",
6464
isActive
65-
? isOpen
66-
? "bg-hyperjump-black"
67-
: "bg-hyperjump-blue text-white"
65+
? "bg-hyperjump-blue text-white"
6866
: isOpen
6967
? "text-hyperjump-black"
7068
: "text-hyperjump-black group-data-[scroll='true']:text-hyperjump-black"

‎app/(main)/[lang]/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function MainLangLayout({
1414
return (
1515
<>
1616
<ScrollObserver />
17-
<Nav lang={params.lang as SupportedLanguage} />
17+
<Nav isTransparent lang={params.lang as SupportedLanguage} />
1818
<Hero lang={params.lang as SupportedLanguage} />
1919
{children}
2020
<Footer lang={params.lang as SupportedLanguage} />

‎app/(services)/services/[lang]/layout.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export default function ServicesLangLayout({
1515
<div className="bg-white">
1616
<ScrollObserver />
1717
<Nav
18-
type="services"
1918
className="xxl:max-w-7xl max-w-6xl"
2019
lang={params.lang as SupportedLanguage}
2120
/>

‎app/(smdd)/smdd2024/[lang]/nav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function Nav({ lang }: { lang: SupportedLanguage }) {
1212
<StickyNavigation>
1313
<NavContainer className="container">
1414
<div className="px-2 xl:px-0">
15-
<HyperjumpLogo />
15+
<HyperjumpLogo isTransparent isOpen={false} />
1616
</div>
1717

1818
<RightNavItems>

0 commit comments

Comments
 (0)