Skip to content

Commit 342e448

Browse files
NoeTerrierNoeTerrier
committed
feat: add socials and language to naviguation bar side menu
1 parent ff66849 commit 342e448

14 files changed

+152
-94
lines changed

‎app/src/components/AssociationDescription.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import DirectusImage from "./DirectusImage";
22
import SocialsList from "./SocialsList";
3-
import { getTranslation } from "@/locales";
3+
import { getTranslation, locale } from "@/locales";
44
import styles from "@/styles/AssociationDescription.module.scss";
55
import { Association, PublicFiles, SocialLink } from "@/types/aliases";
66
import Link from "next/link";
@@ -17,7 +17,7 @@ export default function AssociationDescription({
1717
publicFiles: PublicFiles[];
1818
}) {
1919
const router = useRouter();
20-
const translation = getTranslation(association, router.locale);
20+
const translation = getTranslation(association, locale(router));
2121

2222
return (
2323
<div className="page">
@@ -31,11 +31,11 @@ export default function AssociationDescription({
3131
) : (
3232
<></>
3333
)}
34-
{getTranslation(f, router.locale).name}
34+
{getTranslation(f, locale(router)).name}
3535
</Link>
3636
))}
3737
</div>
38-
<SocialsList socials={socialLinks}></SocialsList>
38+
<SocialsList socials={socialLinks} />
3939
</div>
4040
</div>
4141
);

‎app/src/components/NavigationBar.tsx

+29-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
import SocialsList from "./SocialsList";
12
import Corner from "@/assets/corner.svg";
23
import Burger from "@/assets/icons/burger_menu_icon.svg";
34
import Lang from "@/assets/icons/lang.svg";
45
import { locale, translate } from "@/locales";
56
import styles from "@/styles/NavigationBar.module.scss";
6-
import { Commission } from "@/types/aliases";
7+
import { Commission, SocialLink } from "@/types/aliases";
78
import { Schema } from "@/types/schema";
89
import Link from "next/link";
910
import { useRouter } from "next/router";
@@ -30,13 +31,21 @@ function SideMenu({
3031
headToggle: toggle,
3132
children,
3233
visible,
34+
langs,
35+
socials,
3336
className,
3437
}: {
3538
headToggle: any;
3639
children: any;
3740
visible: boolean;
41+
langs: {
42+
code?: string | undefined;
43+
name?: string | null | undefined;
44+
}[];
45+
socials: SocialLink[];
3846
className?: string;
3947
}) {
48+
const router = useRouter();
4049
return (
4150
<>
4251
<Burger
@@ -49,6 +58,22 @@ function SideMenu({
4958
>
5059
<div className={styles.sideMenu + " " + (className || "")}>
5160
{children}
61+
<div className={styles.sideMenuLangs}>
62+
<Lang className={styles.sideLang} />
63+
{langs.map((l) => (
64+
<div
65+
key={l.code}
66+
className={styles.langItem}
67+
onClick={() => {
68+
router.push(router.asPath, undefined, { locale: l.code });
69+
toggle();
70+
}}
71+
>
72+
{l.name}
73+
</div>
74+
))}
75+
<SocialsList socials={socials} light={true} />
76+
</div>
5277
</div>
5378
</div>
5479
</>
@@ -57,6 +82,7 @@ function SideMenu({
5782

5883
export default function NavigationBar(props: {
5984
commissions?: Commission[];
85+
socials?: SocialLink[];
6086
langs: Schema["languages"];
6187
}) {
6288
const [menuVisible, setMenuVisible] = useState(false);
@@ -191,6 +217,8 @@ export default function NavigationBar(props: {
191217
<SideMenu
192218
headToggle={toggleMenu}
193219
visible={menuVisible}
220+
langs={props.langs}
221+
socials={props.socials || []}
194222
className={styles.burgerContainer}
195223
>
196224
{entries}

‎app/src/components/NewsCard.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Button from "./Button";
22
import DirectusImage from "./DirectusImage";
3-
import { getTranslation } from "@/locales";
3+
import { getTranslation, locale } from "@/locales";
44
import styles from "@/styles/NewsCard.module.scss";
55
import { News } from "@/types/aliases";
66
import Link from "next/link";
@@ -15,7 +15,7 @@ export default function NewsCard({
1515
}) {
1616
const router = useRouter();
1717

18-
const translation = getTranslation(news, router.locale);
18+
const translation = getTranslation(news, locale(router));
1919
return (
2020
<Link
2121
href={`/news/${news.slug}`}
@@ -38,7 +38,7 @@ export default function NewsCard({
3838
: ""}
3939
</p>
4040
</div>
41-
<Button className={styles.button} text=">" size="small" />
41+
<Button className={styles.button} text=">" />
4242
</div>
4343
</Link>
4444
);

‎app/src/pages/404.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function NotFound() {
1919
plural: false,
2020
})}
2121
</h4>
22-
<Button text="Home" onClick={() => router.push("/")} size="large" />
22+
<Button text="Home" onClick={() => router.push("/")} />
2323
</div>
2424
</>
2525
);

‎app/src/pages/_app.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default function App({ Component, pageProps }: AppProps) {
1414
<NavigationBar
1515
commissions={pageProps.layoutProps?.commissions}
1616
langs={pageProps.layoutProps?.langs}
17+
socials={pageProps.layoutProps?.socialLinks}
1718
/>
1819
<div
1920
className="main"

‎app/src/pages/commissions.tsx

+16-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import CommissionCard from "@/components/CommissionCard";
22
import { directus, populateLayoutProps } from "@/directus";
33
import { locale, translate } from "@/locales";
4-
import styles from "@/styles/CommissionsPage.module.scss";
4+
import commissionsStyle from "@/styles/CommissionsPage.module.scss";
5+
import listPageStyle from "@/styles/ListPage.module.scss";
56
import { Commission } from "@/types/aliases";
67
import { readItems } from "@directus/sdk";
78
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
@@ -12,16 +13,20 @@ export default function Commissions(
1213
) {
1314
const router = useRouter();
1415
return (
15-
<div className={styles.commissionsList}>
16+
<div className={listPageStyle.page}>
1617
<h1>
1718
{translate("commission", locale(router), {
1819
capitalize: true,
1920
plural: true,
2021
})}
2122
</h1>
22-
<div className={styles.list}>
23+
<div className={commissionsStyle.list}>
2324
{props.commissions.map((c) => (
24-
<CommissionCard className={styles.card} key={c.id} commission={c} />
25+
<CommissionCard
26+
className={commissionsStyle.card}
27+
key={c.id}
28+
commission={c}
29+
/>
2530
))}
2631
</div>
2732
</div>
@@ -31,10 +36,11 @@ export default function Commissions(
3136
export const getServerSideProps: GetServerSideProps<{
3237
commissions: Commission[];
3338
}> = populateLayoutProps(async (_) => {
34-
const c = await directus().request(
35-
readItems("commissions", {
36-
fields: ["*", { translations: ["*"] }],
37-
})
38-
);
39-
return { props: { commissions: c } };
39+
return {
40+
props: {
41+
commissions: await directus().request(
42+
readItems("commissions", { fields: ["*", { translations: ["*"] }] })
43+
),
44+
},
45+
};
4046
});

‎app/src/pages/index.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ import MembersList from "@/components/MembersList";
88
import NewsCard from "@/components/NewsCard";
99
import PartnersList from "@/components/PartnersList";
1010
import { directus, populateLayoutProps } from "@/directus";
11-
import { getTranslation, queryTranslations, translate } from "@/locales";
11+
import {
12+
getTranslation,
13+
locale,
14+
queryTranslations,
15+
translate,
16+
} from "@/locales";
1217
import styles from "@/styles/Homepage.module.scss";
1318
import {
1419
Association,
@@ -28,7 +33,7 @@ export default function Home(
2833
props: InferGetServerSidePropsType<typeof getServerSideProps>
2934
) {
3035
const router = useRouter();
31-
const translation = getTranslation(props.association, router.locale);
36+
const translation = getTranslation(props.association, locale(router));
3237

3338
var orderedPartners = props.partners.reduce(
3439
(list: [PartnerCategory, Partner[]][], partner: Partner) => {
@@ -65,7 +70,6 @@ export default function Home(
6570
</div>
6671
<Button
6772
text={translate("moreNews", router.locale)}
68-
size="small"
6973
onClick={() => router.push("/news")}
7074
/>
7175
</div>

‎app/src/pages/news.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import NewsCard from "@/components/NewsCard";
22
import { directus, populateLayoutProps } from "@/directus";
33
import { queryTranslations } from "@/locales";
4-
import styles from "@/styles/NewsPage.module.scss";
4+
import listPageStyle from "@/styles/ListPage.module.scss";
5+
import newsStyle from "@/styles/NewsPage.module.scss";
56
import { News } from "@/types/aliases";
67
import { readItems } from "@directus/sdk";
78
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
@@ -10,11 +11,13 @@ export default function NewsComponent(
1011
props: InferGetServerSidePropsType<typeof getServerSideProps>
1112
) {
1213
return (
13-
<div className={styles.pageList}>
14+
<div className={listPageStyle.page}>
1415
<h1>News</h1>
15-
{props.news.map((n) => (
16-
<NewsCard key={(n as any).id} news={n} />
17-
))}
16+
<div className={newsStyle.list}>
17+
{props.news.map((n) => (
18+
<NewsCard key={(n as any).id} news={n} />
19+
))}
20+
</div>
1821
</div>
1922
);
2023
}

‎app/src/styles/CommissionsPage.module.scss

+8-34
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,15 @@
1-
@use "./utilities/variables";
2-
@use "./utilities/glass";
3-
4-
.commissionsList {
5-
@extend .glass;
6-
background-color: transparent;
7-
1+
.list {
82
display: flex;
9-
flex-direction: column;
10-
row-gap: 1em;
11-
12-
align-items: center;
13-
14-
margin-top: 6rem;
15-
padding: 2rem;
16-
border-radius: 3rem;
17-
padding-bottom: 2rem;
3+
flex-wrap: wrap;
4+
align-items: stretch;
185

19-
width: 80%;
6+
gap: 2rem;
207

21-
h1 {
22-
color: variables.$dark-title-color;
8+
&:last-child {
9+
justify-content: center; /* Center the last line */
2310
}
24-
25-
.list {
11+
.card {
2612
width: 100%;
27-
28-
display: flex;
29-
flex-wrap: wrap;
30-
align-items: stretch;
31-
32-
gap: 2rem;
33-
34-
&:last-child {
35-
justify-content: center; /* Center the last line */
36-
}
37-
.card {
38-
width: 25rem;
39-
}
13+
max-width: 25rem;
4014
}
4115
}

‎app/src/styles/ListPage.module.scss

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@use "./utilities/variables";
2+
@use "./utilities/glass";
3+
4+
.page {
5+
@extend .glass;
6+
background-color: transparent;
7+
8+
display: flex;
9+
flex-direction: column;
10+
row-gap: 1em;
11+
12+
align-items: center;
13+
width: 80%;
14+
15+
margin-top: calc(variables.$navbar-height);
16+
padding: 2rem;
17+
border-radius: 3rem;
18+
19+
h1 {
20+
@extend .glass;
21+
color: variables.$title-color;
22+
border-radius: 3rem;
23+
width: fit-content;
24+
padding-left: 2rem;
25+
padding-right: 2rem;
26+
}
27+
28+
@media (max-width: 800px) {
29+
width: 95%;
30+
border-radius: 0;
31+
}
32+
}

0 commit comments

Comments
 (0)