Skip to content

Commit 12cc907

Browse files
veesoveeso
committed
fix: updated
1 parent dfb0950 commit 12cc907

File tree

20 files changed

+433
-183
lines changed

20 files changed

+433
-183
lines changed

‎app/not-found.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Container from '@/src/js/components/reusable/Container';
55

66
import Paragraph from '@/src/js/components/reusable/Paragraph';
77
import Link from '@/src/js/components/reusable/Link';
8+
import { Route } from '@/src/js/utils/routes';
89

910
const NotFound = () => {
1011
return (
@@ -16,9 +17,9 @@ const NotFound = () => {
1617
<Paragraph.Center>
1718
Non siamo stati in grado di trovare la pagina che stavi cercando.
1819
</Paragraph.Center>
19-
<Link.Default className="!text-brand text-xl" href="/">
20+
<Link.Next className="!text-brand text-xl" href={Route.HOME}>
2021
Torna alla home
21-
</Link.Default>
22+
</Link.Next>
2223
</Container.FlexCols>
2324
</Page.Body>
2425
</Page.BlankPage>

‎app/page.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@ import type { Metadata } from 'next';
33

44
import Page from '@/src/js/components/reusable/Page';
55
import { canonicalUrl } from '@/src/js/utils/seo';
6+
import { Route } from '@/src/js/utils/routes';
67

78
const TITLE = 'Next template';
89
const DESCRIPTION = '';
910

1011
export const metadata: Metadata = {
1112
title: TITLE,
1213
description: DESCRIPTION,
13-
metadataBase: new URL(canonicalUrl('')),
14+
metadataBase: new URL(canonicalUrl(Route.HOME)),
1415
alternates: {
15-
canonical: '/',
16+
canonical: new URL(canonicalUrl(Route.HOME)),
1617
},
1718
openGraph: {
1819
title: TITLE,

‎next.sh

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
cd "$(dirname "$0")" || exit 1
44

55
APP_NAME="next"
6+
MONIT_SERVICE="next"
67
PIDFILE="/var/run/$APP_NAME.pid"
78

89
info() {
@@ -51,7 +52,7 @@ stop() {
5152

5253
reload() {
5354
git pull origin main
54-
sudo monit restart expocats-web
55+
sudo monit restart $MONIT_SERVICE
5556
}
5657

5758
NODE=$(which node)

‎src/js/components/CookieBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const CookieBar = () => {
5454
sia cookie di parti terze per inviare messaggi promozionali sulla
5555
base dei comportamenti degli utenti. Può conoscere i dettagli
5656
consultando la nostra{' '}
57-
<Link.Paragraph href={Route.url(Route.COOKIE_POLICY)}>
57+
<Link.Paragraph href={Route.COOKIE_POLICY}>
5858
Cookie Policy.
5959
</Link.Paragraph>
6060
</Paragraph.Leading>

‎src/js/components/Topbar.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,7 @@ import * as React from 'react';
55
import Desktop from './Topbar/Desktop';
66
import Mobile from './Topbar/Mobile';
77
import { Route } from '../utils/routes';
8-
9-
interface MenuEntry {
10-
name: string;
11-
route?: Route;
12-
externalLink?: string;
13-
url?: string;
14-
}
8+
import { MenuEntry } from './Topbar/MenuEntries';
159

1610
export const MENU_ENTRIES: MenuEntry[] = [
1711
{
@@ -26,8 +20,8 @@ export const MENU_ENTRIES: MenuEntry[] = [
2620

2721
const Topbar = () => (
2822
<header>
29-
<Desktop />
30-
<Mobile />
23+
<Desktop entries={MENU_ENTRIES} />
24+
<Mobile entries={MENU_ENTRIES} />
3125
</header>
3226
);
3327

‎src/js/components/Topbar/Desktop.tsx

Lines changed: 17 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,32 @@
11
import * as React from 'react';
2-
import { useRouter } from 'next/navigation';
32
import Image from 'next/image';
43

54
import Container from '../reusable/Container';
65
import { Route } from '../../utils/routes';
7-
import { MENU_ENTRIES } from '../Topbar';
8-
import Link from './Link';
6+
import MenuEntries, { MenuEntry } from './MenuEntries';
97

10-
const Desktop = () => {
11-
const router = useRouter();
12-
13-
const goHome = () => {
14-
router.push(Route.url(Route.HOME));
15-
};
16-
17-
const entries = MENU_ENTRIES.map((entry) => {
18-
if (entry.route) {
19-
// check if entry.route is a Route object
20-
return (
21-
<Link.RouterLink key={entry.name} to={Route.url(entry.route)}>
22-
{entry.name}
23-
</Link.RouterLink>
24-
);
25-
} else if (entry.url) {
26-
return (
27-
<Link.RouterLink key={entry.name} to={entry.url}>
28-
{entry.name}
29-
</Link.RouterLink>
30-
);
31-
} else if (entry.externalLink) {
32-
return (
33-
<Link.NavLink key={entry.name} href={entry.externalLink}>
34-
{entry.name}
35-
</Link.NavLink>
36-
);
37-
} else {
38-
<></>;
39-
}
40-
});
41-
42-
return (
43-
<Container.FlexRow className="sm:hidden fixed bg-brand text-brandLight items-center gap-8 justify-center left-0 py-2 px-1 top-0 w-screen h-[80px] z-40 shadow-lg">
44-
<Container.FlexRow className="w-page justify-between items-center h-full gap-4">
45-
<Container.FlexRow>
46-
<Container.Flex className="items-center px-4">
8+
const Desktop = ({ entries }: { entries: MenuEntry[] }) => (
9+
<Container.FlexRow className="sm:hidden fixed bg-brand text-brandLight items-center gap-8 justify-center left-0 py-2 px-1 top-0 w-screen h-[80px] z-40 shadow-lg">
10+
<Container.FlexRow className="w-page justify-center items-center h-full gap-4">
11+
<Container.FlexRow>
12+
<Container.Flex className="items-center px-4">
13+
<a href={Route.url(Route.HOME)} className="cursor-pointer">
4714
<Image
48-
src={'https://placehold.co/48'}
15+
src={'https://placehold.co/64'}
4916
alt="logo"
5017
className="cursor-pointer"
5118
loading="eager"
52-
width={48}
53-
height={48}
54-
onClick={goHome}
19+
width={64}
20+
height={64}
5521
/>
56-
</Container.Flex>
57-
<nav className="flex gap-8 justify-between">{entries}</nav>
58-
</Container.FlexRow>
22+
</a>
23+
</Container.Flex>
24+
<nav className="flex gap-8 justify-between">
25+
<MenuEntries entries={entries} />
26+
</nav>
5927
</Container.FlexRow>
6028
</Container.FlexRow>
61-
);
62-
};
29+
</Container.FlexRow>
30+
);
6331

6432
export default Desktop;

‎src/js/components/Topbar/Link.tsx

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/js/components/Topbar/Menu/Dropdown.tsx

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
'use client';
2+
3+
import * as React from 'react';
4+
import * as Icon from 'react-feather';
5+
6+
import { DropdownEntry } from '../MenuEntries';
7+
import Link from './Link';
8+
import Container from '../../reusable/Container';
9+
10+
interface Props {
11+
name: string;
12+
entries: DropdownEntry[];
13+
}
14+
15+
const Dropdown = ({ name, entries }: Props) => {
16+
const [isOpen, setIsOpen] = React.useState(false);
17+
18+
const toggleDropdwon = () => {
19+
setIsOpen(!isOpen);
20+
};
21+
22+
const onClickOutside = () => {
23+
setIsOpen(false);
24+
};
25+
26+
return (
27+
<Container.Container className="relative">
28+
<DropdownButton
29+
name={name}
30+
isOpen={isOpen}
31+
onClick={toggleDropdwon}
32+
onHover={setIsOpen}
33+
>
34+
<DropdownMenu onClickOutside={onClickOutside} entries={entries} />
35+
</DropdownButton>
36+
</Container.Container>
37+
);
38+
};
39+
40+
const DropdownButton = ({
41+
name,
42+
isOpen,
43+
onClick,
44+
onHover,
45+
children,
46+
}: {
47+
name: string;
48+
isOpen: boolean;
49+
onClick: () => void;
50+
onHover: (hovered: boolean) => void;
51+
children?: React.ReactNode;
52+
}) => {
53+
const handleMouseEnter = () => {
54+
onHover(true);
55+
};
56+
57+
const handleMouseLeave = () => {
58+
onHover(false);
59+
};
60+
61+
return (
62+
<Container.Container
63+
onMouseEnter={handleMouseEnter}
64+
onMouseLeave={handleMouseLeave}
65+
>
66+
<Container.FlexRow className="relative items-center justify-between">
67+
<Link.NavLink onClick={onClick}>{name}</Link.NavLink>
68+
{isOpen ? (
69+
<Icon.ChevronUp
70+
className="text-brandLight sm:text-brand hover:text-bgContentHover sm:hover:text-brandHover hover:cursor-pointer"
71+
onClick={onClick}
72+
/>
73+
) : (
74+
<Icon.ChevronDown
75+
className="text-brandLight sm:text-brand hover:text-bgContentHover sm:hover:text-brandHover hover:cursor-pointer"
76+
onClick={onClick}
77+
/>
78+
)}
79+
</Container.FlexRow>
80+
{isOpen && children}
81+
</Container.Container>
82+
);
83+
};
84+
85+
const DropdownMenu = ({
86+
onClickOutside,
87+
entries,
88+
}: {
89+
onClickOutside: () => void;
90+
entries: DropdownEntry[];
91+
}) => {
92+
const dropdownRef = React.useRef<HTMLDivElement | null>(null);
93+
94+
React.useEffect(() => {
95+
const handleClickOutside = (event: MouseEvent) => {
96+
if (
97+
dropdownRef.current &&
98+
event.target instanceof Node &&
99+
!dropdownRef.current.contains(event.target)
100+
) {
101+
onClickOutside();
102+
}
103+
};
104+
105+
document.addEventListener('click', handleClickOutside);
106+
107+
return () => {
108+
// Rimuovi l'event listener quando il componente viene smontato
109+
document.removeEventListener('click', handleClickOutside);
110+
};
111+
}, []);
112+
113+
return (
114+
<Container.FlexCols className="animate__animated animate__fadeIn absolute left-[-75%] sm:left-0 top-[80px] sm:top-[30px] rounded-b-lg bg-brandLight shadow-xl h-fit w-[256px]">
115+
<div ref={dropdownRef}>
116+
{entries.map((entry) => (
117+
<DropdownItem key={entry.name} entry={entry} />
118+
))}
119+
</div>
120+
</Container.FlexCols>
121+
);
122+
};
123+
124+
const DropdownItem = ({ entry }: { entry: DropdownEntry }) => (
125+
<Container.Container className="hover:bg-bgContentHover px-4 py-4 sm:py-2">
126+
<DropdownLink entry={entry} />
127+
</Container.Container>
128+
);
129+
130+
const DropdownLink = ({ entry }: { entry: DropdownEntry }) => {
131+
if (entry.route) {
132+
// check if entry.route is a Route object
133+
return (
134+
<Link.DropdownLink key={entry.name} to={entry.route}>
135+
{entry.name}
136+
</Link.DropdownLink>
137+
);
138+
} else if (entry.url) {
139+
return (
140+
<Link.DropdownLink key={entry.name} to={entry.url}>
141+
{entry.name}
142+
</Link.DropdownLink>
143+
);
144+
} else if (entry.externalLink) {
145+
return (
146+
<Link.DropdownLink key={entry.name} to={entry.externalLink}>
147+
{entry.name}
148+
</Link.DropdownLink>
149+
);
150+
} else {
151+
return <></>;
152+
}
153+
};
154+
155+
export default Dropdown;

0 commit comments

Comments
 (0)