Skip to content

Commit 93f308c

Browse files
OliEfrOliEfr
authored
Merge pull request #24 from thomsste/redesign
Modern redesign of entire website
2 parents 158c432 + 68617a5 commit 93f308c

35 files changed

+2580
-1141
lines changed

‎components/Layout.tsx‎

Lines changed: 123 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,138 @@
1-
import type { NextPage } from 'next'
2-
import Head from 'next/head'
3-
import Link from 'next/link'
4-
import { Divider, Layout, Space } from 'antd'
5-
import { useTranslation, useSelectedLanguage } from 'next-export-i18n'
6-
import styles from '../styles/Layout.module.scss'
7-
import { FaGithub, FaEnvelope } from 'react-icons/fa'
8-
import { SiMatrix } from 'react-icons/si'
9-
import { useEffect } from 'react'
10-
import ResponsiveMenu, { MenuItem } from './ResponsiveMenu'
1+
import type { NextPage } from "next";
2+
import Head from "next/head";
3+
import Link from "next/link";
4+
import { Divider, Layout, Space } from "antd";
5+
import { useTranslation, useSelectedLanguage } from "next-export-i18n";
6+
import styles from "../styles/Layout.module.scss";
7+
import { FaGithub, FaEnvelope } from "react-icons/fa";
8+
import { SiMatrix } from "react-icons/si";
9+
import { useEffect } from "react";
10+
import ResponsiveMenu, { MenuItem } from "./ResponsiveMenu";
1111

12-
const { Header, Content, Footer } = Layout
12+
const { Header, Content, Footer } = Layout;
1313

1414
interface LayoutProps {
15-
siteKey?: string
16-
site?: string
15+
siteKey?: string;
16+
site?: string;
1717
}
1818

19-
const TUfastLayout: NextPage<LayoutProps> = ({children, site, siteKey}) => {
19+
const TUfastLayout: NextPage<LayoutProps> = ({ children, site, siteKey }) => {
20+
const { t } = useTranslation();
2021

21-
const { t } = useTranslation()
22+
const { lang } = useSelectedLanguage();
2223

23-
const { lang } = useSelectedLanguage()
24+
useEffect(() => {
25+
document.documentElement.lang = lang;
26+
}, [lang]);
2427

25-
useEffect(() => {
26-
document.documentElement.lang = lang
27-
}, [lang])
28+
const linksObj = [
29+
{ text: "Github", href: "https://github.com/TUfast-TUD", icon: FaGithub },
30+
{
31+
text: "[email protected]",
32+
href: "mailto:[email protected]",
33+
icon: FaEnvelope,
34+
},
35+
{ text: "Datenschutz", href: "/datenschutz", icon: () => <></> },
36+
];
2837

29-
const linksObj = [
30-
{ text: 'Github', href: 'https://github.com/TUfast-TUD', icon: FaGithub },
31-
{ text: '[email protected]', href: 'mailto:[email protected]', icon: FaEnvelope },
32-
{ text: 'Matrix', href: 'https://matrix.to/#/#tu-fast:tu-dresden.de', icon: SiMatrix },
33-
{ text: 'Datenschutz', href: '/datenschutz', icon: () => <></> },
34-
]
38+
const links = linksObj.map((link) => (
39+
<div className={styles.links} key={link.text}>
40+
<link.icon />
41+
{["#", "/"].includes(link.href.charAt(0)) ? (
42+
<Link href={link.href}>{link.text}</Link>
43+
) : (
44+
<a href={link.href} target={"_blank"} rel="noreferrer">
45+
{link.text}
46+
</a>
47+
)}
48+
</div>
49+
));
3550

36-
const links = linksObj.map(link => (
37-
<div className={styles.links} key={link.text}>
38-
<link.icon/>
39-
{['#', '/'].includes(link.href.charAt(0)) ? <Link href={link.href}>{link.text}</Link> : <a href={link.href} target={'_blank'} rel="noreferrer">{link.text}</a>}
40-
</div>
41-
))
42-
43-
44-
const menuItems: MenuItem[] = [
45-
{
46-
key: 'project',
47-
href: '/#project',
48-
text: t('nav.projectAndVision'),
49-
},
50-
// {
51-
// key: 'project',
52-
// href: '/project',
53-
// text: t('nav.projectAndVision')
54-
// },
55-
{
56-
key: 'team',
57-
href: '/team',
58-
text: 'Team',
59-
},
60-
{
61-
key: 'jobs',
62-
href: '/jobs',
63-
text: t('nav.jobs'),
64-
},
65-
// {
66-
// key: 'blog',
67-
// href: '/blog',
68-
// text: 'Blog',
69-
// },
70-
]
51+
const menuItems: MenuItem[] = [
52+
{
53+
key: "home",
54+
href: "/#home",
55+
text: "Home",
56+
},
57+
{
58+
key: "Funktionen",
59+
href: "/#features",
60+
text: t("nav.features"),
61+
},
62+
{
63+
key: "project",
64+
href: "/#project",
65+
text: t("nav.projectAndVision"),
66+
},
67+
// {
68+
// key: 'project',
69+
// href: '/project',
70+
// text: t('nav.projectAndVision')
71+
// },
72+
{
73+
key: "team",
74+
href: "/#team",
75+
text: "Team",
76+
},
77+
{
78+
key: "jobs",
79+
href: "/#mitmachen",
80+
text: t("nav.jobs"),
81+
},
82+
// {
83+
// key: 'blog',
84+
// href: '/blog',
85+
// text: 'Blog',
86+
// },
87+
];
7188

72-
return <>
73-
<Head>
74-
<title>{site ? `${site} - ` : ''}TUfast - Das Produktivitäts-Tool für TU Dresden Studierende 🚀</title>
75-
<meta name="description" content="TUfast ist ein Browser-Addon, dass den Alltag von Studierenden an der TU Dresden erleichtert. Es kann unter anderem automaisch Logins vornehmen und Benachrichtigungen für neue E-Mail geben." />
76-
<link rel="icon" href="/favicon.png" />
77-
</Head>
78-
<Layout className={styles.layout}>
79-
<Header className={styles.navbar}>
80-
<ResponsiveMenu menuItems={menuItems} siteKey={siteKey} />
81-
</Header>
89+
return (
90+
<>
91+
<Head>
92+
<title>
93+
{site ? `${site} - ` : ""}TUfast - Das Produktivitäts-Tool für TU
94+
Dresden Studierende 🚀
95+
</title>
96+
<meta
97+
name="description"
98+
content="TUfast ist ein Browser-Addon, dass den Alltag von Studierenden an der TU Dresden erleichtert. Es kann unter anderem automaisch Logins vornehmen und Benachrichtigungen für neue E-Mail geben."
99+
/>
100+
<link
101+
rel="icon"
102+
type="image/png"
103+
href="/favicon/favicon-96x96.png"
104+
sizes="96x96"
105+
/>
106+
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
107+
<link rel="shortcut icon" href="/favicon/favicon.ico" />
108+
<link
109+
rel="apple-touch-icon"
110+
sizes="180x180"
111+
href="/favicon/apple-touch-icon.png"
112+
/>
113+
<meta name="apple-mobile-web-app-title" content="TUfast" />
114+
<link rel="manifest" href="/favicon/site.webmanifest" />
115+
</Head>
116+
<Layout className={styles.layout}>
117+
<div className={styles.inner}>
118+
<Header className={styles.navbar}>
119+
<ResponsiveMenu menuItems={menuItems} siteKey={siteKey} />
120+
</Header>
82121

83-
<Content className={styles.mainContainer}>
84-
{ children }
85-
</Content>
122+
<Content className={styles.mainContainer}>{children}</Content>
86123

87-
<Footer style={{ textAlign: 'center' }}>
88-
<Space split={<Divider type="vertical" />} style={{flexWrap: 'wrap', justifyContent: 'center'}}>
89-
{ links }
90-
</Space>
91-
</Footer>
92-
</Layout>
124+
<Footer className={styles.footer}>
125+
<Space
126+
split={<Divider type="vertical" />}
127+
style={{ flexWrap: "wrap", justifyContent: "center" }}
128+
>
129+
{links}
130+
</Space>
131+
</Footer>
132+
</div>
133+
</Layout>
93134
</>
94-
}
135+
);
136+
};
95137

96-
export default TUfastLayout
138+
export default TUfastLayout;

0 commit comments

Comments
 (0)