Skip to content

Commit 2357ad9

Browse files
heydoyouknowme0geekysilento
heydoyouknowme0
authored and
geekysilento
committed
added external prop
1 parent ed31c15 commit 2357ad9

File tree

5 files changed

+125
-96
lines changed

5 files changed

+125
-96
lines changed

‎app/[locale]/header.tsx‎

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,15 @@ export default async function Header({ locale }: { locale: string }) {
113113
{ label: text.placement, href: 'training-and-placement' },
114114
// { label: text.alumni, href: 'alumni' },
115115
{ label: text.activities, href: 'student-activities' },
116+
{
117+
label: text.alumni,
118+
href: 'https://nitkkraa.org',
119+
isExternal: true,
120+
},
121+
{
122+
label: text.research,
123+
href: 'research',
124+
},
116125
];
117126

118127
return (
@@ -137,11 +146,12 @@ export default async function Header({ locale }: { locale: string }) {
137146
<NavigationMenuList
138147
className={cn('hidden grow lg:flex', 'gap-4 xl:gap-5 2xl:gap-6')}
139148
>
140-
{items.map(({ label, href, listItems }, index) => (
149+
{items.map(({ label, href, isExternal, listItems }, index) => (
141150
<NavigationMenuCustomListItem
142151
key={index}
143152
triggerName={label}
144153
locale={locale}
154+
isExternal={isExternal}
145155
listItems={listItems}
146156
href={href}
147157
imageDetails={{
@@ -262,26 +272,32 @@ export default async function Header({ locale }: { locale: string }) {
262272
</SwitchNavButton>
263273
</header>
264274
<ul className="nav-column-default space-y-4 text-base font-semibold">
265-
{items.map(({ label, href, listItems }, index) => (
266-
<li key={index} className="w-fit">
267-
{listItems ? (
268-
<SwitchNavButton
269-
className="text-left text-shade-dark"
270-
column={href}
271-
text={label + '>'}
272-
variant="link"
273-
/>
274-
) : (
275-
<NavButton
276-
asChild
277-
className="text-left text-shade-dark"
278-
variant="link"
279-
>
280-
<Link href={`/${locale}/${href}`}>{label}</Link>
281-
</NavButton>
282-
)}
283-
</li>
284-
))}
275+
{items.map(
276+
({ isExternal, label, href, listItems }, index) => (
277+
<li key={index} className="w-fit">
278+
{listItems ? (
279+
<SwitchNavButton
280+
className="text-left text-shade-dark"
281+
column={href}
282+
text={label + '>'}
283+
variant="link"
284+
/>
285+
) : (
286+
<NavButton
287+
asChild
288+
className="text-left text-shade-dark"
289+
variant="link"
290+
>
291+
<Link
292+
href={isExternal ? href : `/${locale}/${href}`}
293+
>
294+
{label}
295+
</Link>
296+
</NavButton>
297+
)}
298+
</li>
299+
)
300+
)}
285301
</ul>
286302
<MobileSubNavMenu locale={locale} {...items[0]} />
287303
<MobileSubNavMenu locale={locale} {...items[1]} />

‎components/ui/navigation-menu.tsx‎

Lines changed: 85 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -122,88 +122,98 @@ const NavigationMenuCustomListItem = React.forwardRef<
122122
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item> & {
123123
locale: string;
124124
triggerName: string;
125-
listItems?: {
126-
title: string;
127-
description: string;
128-
href: string;
129-
}[];
130-
imageDetails?: {
131-
src: string;
132-
alt: string;
133-
href: string;
134-
};
125+
isExternal?: boolean;
135126
href?: string;
127+
listItems?: { title: string; description: string; href: string }[];
128+
imageDetails?: { src: string; alt: string; href: string };
136129
}
137-
>(({ imageDetails, listItems, triggerName, href, locale, ...props }, ref) => {
138-
if (!listItems) {
130+
>(
131+
(
132+
{
133+
imageDetails,
134+
listItems,
135+
triggerName,
136+
href,
137+
isExternal,
138+
locale,
139+
...props
140+
},
141+
ref
142+
) => {
143+
if (!listItems) {
144+
return (
145+
<NavigationMenuItem {...props} ref={ref}>
146+
<Link
147+
href={isExternal ? href! : `/${locale}/${href}`}
148+
legacyBehavior
149+
passHref
150+
>
151+
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
152+
{triggerName}
153+
</NavigationMenuLink>
154+
</Link>
155+
</NavigationMenuItem>
156+
);
157+
}
158+
const imageHeight = listItems.length > 4 ? 4 : listItems.length;
139159
return (
140160
<NavigationMenuItem {...props} ref={ref}>
141-
<Link href={`/${locale}/${href}`} legacyBehavior passHref>
142-
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
143-
{triggerName}
144-
</NavigationMenuLink>
145-
</Link>
161+
<NavigationMenuTrigger>{triggerName}</NavigationMenuTrigger>
162+
<NavigationMenuContent className="flex max-h-[calc(100vh-82px)] gap-4 p-6 xl:gap-6 2xl:gap-8">
163+
{imageDetails && (
164+
<Link href={`/${locale}/${href}`} passHref legacyBehavior>
165+
<NavigationMenuLink
166+
className="group relative flex select-none flex-col justify-end overflow-hidden rounded-xl no-underline outline-none"
167+
style={{ minWidth: `${70 * imageHeight}px` }}
168+
>
169+
<Image
170+
className="absolute inset-0 z-0 h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-125"
171+
alt=""
172+
src={imageDetails.src}
173+
width={0}
174+
height={0}
175+
/>
176+
<section className="relative z-30 flex h-full w-full flex-col justify-end rounded-xl bg-gradient-to-b from-primary-500/0 to-primary-500 p-2 focus:shadow-md">
177+
<h5 className="!mb-0 origin-bottom-left text-shade-light transition-transform duration-500 ease-in-out group-hover:scale-150">
178+
{imageDetails.alt + '→'}
179+
</h5>
180+
</section>
181+
</NavigationMenuLink>
182+
</Link>
183+
)}
184+
<ul
185+
className={cn(
186+
'grid grid-flow-col auto-rows-max gap-4 xl:gap-6 2xl:gap-8'
187+
)}
188+
style={{
189+
gridTemplateRows: `repeat(${imageHeight}, minmax(0, 1fr))`,
190+
}}
191+
>
192+
{listItems.map(({ title, description, href }, index) => (
193+
<li key={index}>
194+
<NavigationMenuLink asChild>
195+
<Link
196+
className={cn(
197+
'group block w-56 select-none space-y-1 rounded-xl p-3 leading-none no-underline outline-none transition-colors transition-transform duration-500 ease-in-out hover:scale-110 hover:bg-neutral-50 focus:bg-neutral-50'
198+
)}
199+
href={`/${locale}/${href}`}
200+
>
201+
<h6 className="font-sans font-semibold leading-none text-shade-dark group-hover:text-primary-500 group-focus:text-primary-500">
202+
{title}
203+
</h6>
204+
<p className="line-clamp-2 overflow-ellipsis text-sm leading-snug text-neutral-700 group-hover:text-primary-500 group-focus:text-primary-500">
205+
{description}
206+
</p>
207+
</Link>
208+
</NavigationMenuLink>
209+
</li>
210+
))}
211+
</ul>
212+
</NavigationMenuContent>
146213
</NavigationMenuItem>
147214
);
148215
}
149-
const imageHeight = listItems.length > 4 ? 4 : listItems.length;
150-
return (
151-
<NavigationMenuItem {...props} ref={ref}>
152-
<NavigationMenuTrigger>{triggerName}</NavigationMenuTrigger>
153-
<NavigationMenuContent className="flex max-h-[calc(100vh-82px)] gap-4 p-6 xl:gap-6 2xl:gap-8">
154-
{imageDetails && (
155-
<Link href={`/${locale}/${href}`} passHref legacyBehavior>
156-
<NavigationMenuLink
157-
className="group relative flex select-none flex-col justify-end overflow-hidden rounded-xl no-underline outline-none"
158-
style={{ minWidth: `${70 * imageHeight}px` }}
159-
>
160-
<Image
161-
className="absolute inset-0 z-0 h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-125"
162-
alt=""
163-
src={imageDetails.src}
164-
width={0}
165-
height={0}
166-
/>
167-
<section className="relative z-30 flex h-full w-full flex-col justify-end rounded-xl bg-gradient-to-b from-primary-500/0 to-primary-500 p-2 focus:shadow-md">
168-
<h5 className="!mb-0 origin-bottom-left text-shade-light transition-transform duration-500 ease-in-out group-hover:scale-150">
169-
{imageDetails.alt + '→'}
170-
</h5>
171-
</section>
172-
</NavigationMenuLink>
173-
</Link>
174-
)}
175-
<ul
176-
className={cn(
177-
'grid grid-flow-col auto-rows-max gap-4 xl:gap-6 2xl:gap-8'
178-
)}
179-
style={{
180-
gridTemplateRows: `repeat(${imageHeight}, minmax(0, 1fr))`,
181-
}}
182-
>
183-
{listItems.map(({ title, description, href }, index) => (
184-
<li key={index}>
185-
<NavigationMenuLink asChild>
186-
<Link
187-
className={cn(
188-
'group block w-56 select-none space-y-1 rounded-xl p-3 leading-none no-underline outline-none transition-colors transition-transform duration-500 ease-in-out hover:scale-110 hover:bg-neutral-50 focus:bg-neutral-50'
189-
)}
190-
href={`/${locale}/${href}`}
191-
>
192-
<h6 className="font-sans font-semibold leading-none text-shade-dark group-hover:text-primary-500 group-focus:text-primary-500">
193-
{title}
194-
</h6>
195-
<p className="line-clamp-2 overflow-ellipsis text-sm leading-snug text-neutral-700 group-hover:text-primary-500 group-focus:text-primary-500">
196-
{description}
197-
</p>
198-
</Link>
199-
</NavigationMenuLink>
200-
</li>
201-
))}
202-
</ul>
203-
</NavigationMenuContent>
204-
</NavigationMenuItem>
205-
);
206-
});
216+
);
207217
NavigationMenuCustomListItem.displayName = 'NavigationMenuCustomListItem';
208218

209219
export {

‎i18n/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -386,6 +386,7 @@ const text: Translations = {
386386
academics: 'Academics',
387387
faculty: 'Faculty & Staff',
388388
placement: 'Training & Placement',
389+
research: 'Research',
389390
alumni: 'Alumni',
390391
activities: 'Student Activities',
391392
logo: 'Logo',

‎i18n/hi.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,7 @@ const text: Translations = {
395395
academics: 'शैक्षिक',
396396
faculty: 'संकाय और कर्मचारी',
397397
placement: 'प्रशिक्षण एवं नियुक्ति',
398+
research: 'अनुसंधान',
398399
activities: 'छात्र गतिविधियाँ',
399400
alumni: 'भूतपूर्व छात्र',
400401
logo: 'प्रतीक चिन्ह',

‎i18n/translations.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,7 @@ export interface Translations {
222222
academics: string;
223223
faculty: string;
224224
placement: string;
225+
research: string;
225226
alumni: string;
226227
activities: string;
227228
logo: string;

0 commit comments

Comments
 (0)