-
Notifications
You must be signed in to change notification settings - Fork 0
/
layout.tsx
85 lines (73 loc) · 2.08 KB
/
layout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// This is the main layout of our app. It renders the header and the footer.
import { Head, Layout, useLocation } from "rakkasjs";
import { ReactNode } from "react";
// Vite supports CSS modules out of the box!
import css from "./layout.module.css";
const MainLayout: Layout = ({ children }) => (
<>
{/* Rakkas relies on react-helmet-async for managing the document head */}
{/* See their documentation: https://github.com/staylor/react-helmet-async#readme */}
<Head title="Rakkas Demo App" />
<header className={css.header}>
<a className={css.logo} href="/">
Rakkas Demo App
</a>
<nav className={css.nav}>
<ul>
<li>
<StyledLink href="/" activeClass={css.activeLink}>
Home
</StyledLink>
</li>
<li>
<StyledLink href="/about" activeClass={css.activeLink}>
About
</StyledLink>
</li>
<li>
<StyledLink href="/todo" activeClass={css.activeLink}>
Todo
</StyledLink>
</li>
</ul>
</nav>
</header>
<section className={css.main}>{children}</section>
<footer className={css.footer}>
<p>
Software and documentation: Copyright 2021 Fatih Aygün. MIT License.
</p>
<p>
Favicon: “Flamenco” by{" "}
<a href="https://thenounproject.com/term/flamenco/111303/">
gzz from Noun Project
</a>{" "}
(not affiliated).
<br />
Used under{" "}
<a href="https://creativecommons.org/licenses/by/2.0/">
Creative Commons Attribution Generic license (CCBY)
</a>
</p>
</footer>
</>
);
export default MainLayout;
interface StyledLinkProps {
href: string;
activeClass: string;
children: ReactNode;
}
function StyledLink(props: StyledLinkProps) {
const { current } = useLocation();
return (
<a
href={props.href}
className={
props.href === current.pathname ? props.activeClass : undefined
}
>
{props.children}
</a>
);
}