Skip to content

Commit e2d559b

Browse files
thesobercoderthesobercoder
committed
Added routes
1 parent 97d85bd commit e2d559b

File tree

9 files changed

+130
-59
lines changed

9 files changed

+130
-59
lines changed

data/menu.js renamed to components/sidebar.js

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
const TopMenuItems = [
1+
import Link from "next/link";
2+
3+
const items = [
24
{
35
icon: (
46
<svg
@@ -17,6 +19,7 @@ const TopMenuItems = [
1719
</svg>
1820
),
1921
name: "Inbox",
22+
route: "/",
2023
},
2124
{
2225
icon: (
@@ -36,6 +39,7 @@ const TopMenuItems = [
3639
</svg>
3740
),
3841
name: "Archive",
42+
route: "/archive",
3943
},
4044
{
4145
icon: (
@@ -55,6 +59,7 @@ const TopMenuItems = [
5559
</svg>
5660
),
5761
name: "Users",
62+
route: "/users",
5863
},
5964
{
6065
icon: (
@@ -74,6 +79,7 @@ const TopMenuItems = [
7479
</svg>
7580
),
7681
name: "Bookmark",
82+
route: "/bookmark",
7783
},
7884
{
7985
icon: (
@@ -93,6 +99,7 @@ const TopMenuItems = [
9399
</svg>
94100
),
95101
name: "Operator",
102+
route: "/operator",
96103
},
97104
{
98105
icon: (
@@ -112,9 +119,43 @@ const TopMenuItems = [
112119
</svg>
113120
),
114121
name: "Analytics",
122+
route: "/analytics",
115123
},
116124
];
117125

118-
export default {
119-
TopMenuItems,
126+
const VerticalTopMenu = () => {
127+
return (
128+
<div className={`flex flex-col space-y-8 items-center p-4`}>
129+
<a href="/" title="Intercom">
130+
<svg
131+
className="h-8 w-8"
132+
xmlns="http://www.w3.org/2000/svg"
133+
viewBox="0 0 20 20"
134+
fill="currentColor"
135+
>
136+
<path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" />
137+
</svg>
138+
</a>
139+
{items.map((i) => (
140+
<Link href={i.route}>
141+
<a
142+
className="focus:outline-none"
143+
title={i.name}
144+
key={i.name}
145+
aria-label={i.name}
146+
>
147+
{i.icon}
148+
</a>
149+
</Link>
150+
))}
151+
</div>
152+
);
120153
};
154+
155+
export default function Sidebar() {
156+
return (
157+
<div className="w-16 flex flex-col bg-gray-200 justify-between border border-r-2 border-gray-300">
158+
<VerticalTopMenu margin="mt-4" />
159+
</div>
160+
);
161+
}

‎components/submenu.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export default function Submenu() {
2+
return (
3+
<div className="w-64 bg-gray-100 p-4">
4+
<div className="flex flex-row justify-between items-center">
5+
<h1 className="text-2xl font-semibold">Inbox</h1>
6+
<svg
7+
xmlns="http://www.w3.org/2000/svg"
8+
className="w-4 h-4 flex-none"
9+
fill="none"
10+
viewBox="0 0 24 24"
11+
stroke="currentColor"
12+
>
13+
<path
14+
strokeLinecap="round"
15+
strokeLinejoin="round"
16+
strokeWidth={4}
17+
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
18+
/>
19+
</svg>
20+
</div>
21+
</div>
22+
);
23+
}

‎components/viewport.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Sidebar from "./sidebar";
2+
import Submenu from "./submenu";
3+
4+
export default function Viewport(props) {
5+
return (
6+
<div className="flex flex-row h-screen w-full">
7+
<Sidebar />
8+
<Submenu />
9+
<div className="flex-auto bg-white border border-l-2 border-gray-300 shadow-lg">
10+
{props.children}
11+
</div>
12+
</div>
13+
);
14+
}

‎pages/analytics.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Viewport from "../components/viewport";
2+
3+
export default function Home() {
4+
return (
5+
<Viewport>
6+
<h1>Analytics</h1>
7+
</Viewport>
8+
);
9+
}

‎pages/archive.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Viewport from "../components/viewport";
2+
3+
export default function Home() {
4+
return (
5+
<Viewport>
6+
<h1>Archive</h1>
7+
</Viewport>
8+
);
9+
}

‎pages/bookmark.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Viewport from "../components/viewport";
2+
3+
export default function Home() {
4+
return (
5+
<Viewport>
6+
<h1>Bookmark</h1>
7+
</Viewport>
8+
);
9+
}

‎pages/index.js‎

Lines changed: 4 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,9 @@
1-
import menu from "../data/menu";
2-
3-
const VerticalTopMenu = (props) => {
4-
return (
5-
<div className={`flex flex-col space-y-8 items-center p-4`}>
6-
<a href="/" title="Intercom">
7-
<svg
8-
className="h-8 w-8"
9-
xmlns="http://www.w3.org/2000/svg"
10-
viewBox="0 0 20 20"
11-
fill="currentColor"
12-
>
13-
<path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" />
14-
</svg>
15-
</a>
16-
{props.items.map((i) => (
17-
<button
18-
className="focus:outline-none"
19-
title={i.name}
20-
key={i.name}
21-
aria-label={i.name}
22-
>
23-
{i.icon}
24-
</button>
25-
))}
26-
</div>
27-
);
28-
};
1+
import Viewport from "../components/viewport";
292

303
export default function Home() {
314
return (
32-
<div className="flex flex-row h-screen w-full">
33-
<div className="w-16 flex flex-col bg-gray-200 justify-between border border-r-2 border-gray-300">
34-
<VerticalTopMenu margin="mt-4" items={menu.TopMenuItems} />
35-
{/* <VerticalMenuList margin="mb-4" items={topMenuItems} /> */}
36-
</div>
37-
<div className="w-64 bg-gray-100">
38-
<div className="flex flex-row w-full justify-between p-4 items-center">
39-
<span className="text-2xl font-black">Inbox</span>
40-
<svg
41-
xmlns="http://www.w3.org/2000/svg"
42-
className="w-4 h-4"
43-
fill="none"
44-
viewBox="0 0 24 24"
45-
stroke="currentColor"
46-
>
47-
<path
48-
strokeLinecap="round"
49-
strokeLinejoin="round"
50-
strokeWidth={4}
51-
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
52-
/>
53-
</svg>
54-
</div>
55-
</div>
56-
<div className="flex-auto bg-white border border-l-2 border-gray-300 shadow-lg">
57-
"colder"
58-
</div>
59-
</div>
5+
<Viewport>
6+
<h1>Index</h1>
7+
</Viewport>
608
);
619
}

‎pages/operator.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Viewport from "../components/viewport";
2+
3+
export default function Home() {
4+
return (
5+
<Viewport>
6+
<h1>Operator</h1>
7+
</Viewport>
8+
);
9+
}

‎pages/users.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Viewport from "../components/viewport";
2+
3+
export default function Home() {
4+
return (
5+
<Viewport>
6+
<h1>Users</h1>
7+
</Viewport>
8+
);
9+
}

0 commit comments

Comments
 (0)