Spaces:
Sleeping
Sleeping
Routing to pages
Browse files- app/(home)/dashboard/page.tsx +9 -0
- app/{page.tsx → (home)/layout.tsx} +33 -13
- app/(home)/mydata/page.tsx +9 -0
- app/(home)/reports/page.tsx +9 -0
- app/layout.tsx +1 -2
- middleware.ts +23 -0
app/(home)/dashboard/page.tsx
ADDED
@@ -0,0 +1,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
'use client';
|
2 |
+
import React from "react";
|
3 |
+
const Dashboard = () => {
|
4 |
+
return (
|
5 |
+
<div>dashboard route</div>
|
6 |
+
);
|
7 |
+
}
|
8 |
+
|
9 |
+
export default Dashboard;
|
app/{page.tsx → (home)/layout.tsx}
RENAMED
@@ -3,43 +3,61 @@ import React, { useState } from "react";
|
|
3 |
import {
|
4 |
MenuFoldOutlined,
|
5 |
MenuUnfoldOutlined,
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
} from '@ant-design/icons';
|
10 |
import { Button, Layout, Menu, theme } from 'antd';
|
|
|
11 |
const { Header, Sider, Content } = Layout;
|
12 |
|
13 |
-
|
|
|
|
|
|
|
|
|
14 |
const [collapsed, setCollapsed] = useState(false);
|
15 |
const {
|
16 |
token: { colorBgContainer, borderRadiusLG },
|
17 |
} = theme.useToken();
|
18 |
-
|
|
|
|
|
|
|
19 |
return (
|
20 |
<main className="flex min-h-screen">
|
21 |
<Layout>
|
22 |
<Sider trigger={null} collapsible collapsed={collapsed}>
|
23 |
<div className="demo-logo-vertical" />
|
24 |
<Menu
|
|
|
25 |
theme="dark"
|
26 |
mode="inline"
|
27 |
defaultSelectedKeys={['1']}
|
28 |
items={[
|
29 |
{
|
30 |
key: '1',
|
31 |
-
icon: <
|
32 |
-
label: '
|
|
|
|
|
|
|
33 |
},
|
34 |
{
|
35 |
key: '2',
|
36 |
-
icon: <
|
37 |
-
label: '
|
|
|
|
|
|
|
38 |
},
|
39 |
{
|
40 |
key: '3',
|
41 |
-
icon: <
|
42 |
-
label: '
|
|
|
|
|
|
|
43 |
},
|
44 |
]}
|
45 |
/>
|
@@ -66,10 +84,12 @@ export default function Home() {
|
|
66 |
borderRadius: borderRadiusLG,
|
67 |
}}
|
68 |
>
|
69 |
-
|
70 |
</Content>
|
71 |
</Layout>
|
72 |
</Layout>
|
73 |
</main >
|
74 |
);
|
75 |
-
}
|
|
|
|
|
|
3 |
import {
|
4 |
MenuFoldOutlined,
|
5 |
MenuUnfoldOutlined,
|
6 |
+
AuditOutlined,
|
7 |
+
DashboardOutlined,
|
8 |
+
DatabaseOutlined,
|
9 |
} from '@ant-design/icons';
|
10 |
import { Button, Layout, Menu, theme } from 'antd';
|
11 |
+
import { useRouter } from "next/navigation";
|
12 |
const { Header, Sider, Content } = Layout;
|
13 |
|
14 |
+
const Dashboard = ({
|
15 |
+
children,
|
16 |
+
}: {
|
17 |
+
children: React.ReactNode;
|
18 |
+
}) => {
|
19 |
const [collapsed, setCollapsed] = useState(false);
|
20 |
const {
|
21 |
token: { colorBgContainer, borderRadiusLG },
|
22 |
} = theme.useToken();
|
23 |
+
const router = useRouter();
|
24 |
+
function handleNav(route: string) {
|
25 |
+
router.push(route);
|
26 |
+
}
|
27 |
return (
|
28 |
<main className="flex min-h-screen">
|
29 |
<Layout>
|
30 |
<Sider trigger={null} collapsible collapsed={collapsed}>
|
31 |
<div className="demo-logo-vertical" />
|
32 |
<Menu
|
33 |
+
style={{ marginTop: '8rem' }}
|
34 |
theme="dark"
|
35 |
mode="inline"
|
36 |
defaultSelectedKeys={['1']}
|
37 |
items={[
|
38 |
{
|
39 |
key: '1',
|
40 |
+
icon: <DashboardOutlined />,
|
41 |
+
label: 'Dashboard',
|
42 |
+
onClick: () => {
|
43 |
+
handleNav('/dashboard');
|
44 |
+
}
|
45 |
},
|
46 |
{
|
47 |
key: '2',
|
48 |
+
icon: <DatabaseOutlined />,
|
49 |
+
label: 'My Data',
|
50 |
+
onClick: () => {
|
51 |
+
handleNav('/mydata');
|
52 |
+
}
|
53 |
},
|
54 |
{
|
55 |
key: '3',
|
56 |
+
icon: <AuditOutlined />,
|
57 |
+
label: 'Reports',
|
58 |
+
onClick: () => {
|
59 |
+
handleNav('/reports');
|
60 |
+
}
|
61 |
},
|
62 |
]}
|
63 |
/>
|
|
|
84 |
borderRadius: borderRadiusLG,
|
85 |
}}
|
86 |
>
|
87 |
+
{children}
|
88 |
</Content>
|
89 |
</Layout>
|
90 |
</Layout>
|
91 |
</main >
|
92 |
);
|
93 |
+
}
|
94 |
+
|
95 |
+
export default Dashboard;
|
app/(home)/mydata/page.tsx
ADDED
@@ -0,0 +1,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
'use client';
|
2 |
+
import React from "react";
|
3 |
+
const Dashboard = () => {
|
4 |
+
return (
|
5 |
+
<div>mydata route</div>
|
6 |
+
);
|
7 |
+
}
|
8 |
+
|
9 |
+
export default Dashboard;
|
app/(home)/reports/page.tsx
ADDED
@@ -0,0 +1,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
'use client';
|
2 |
+
import React from "react";
|
3 |
+
const Reports = () => {
|
4 |
+
return (
|
5 |
+
<div>reports route</div>
|
6 |
+
);
|
7 |
+
}
|
8 |
+
|
9 |
+
export default Reports;
|
app/layout.tsx
CHANGED
@@ -2,7 +2,6 @@ import type { Metadata } from "next";
|
|
2 |
import { Inter } from "next/font/google";
|
3 |
import "./globals.css";
|
4 |
import "./markdown.css";
|
5 |
-
import { AntdRegistry } from '@ant-design/nextjs-registry';
|
6 |
|
7 |
const inter = Inter({ subsets: ["latin"] });
|
8 |
|
@@ -18,7 +17,7 @@ export default function RootLayout({
|
|
18 |
}) {
|
19 |
return (
|
20 |
<html lang="en">
|
21 |
-
<body className={inter.className}
|
22 |
</html>
|
23 |
);
|
24 |
}
|
|
|
2 |
import { Inter } from "next/font/google";
|
3 |
import "./globals.css";
|
4 |
import "./markdown.css";
|
|
|
5 |
|
6 |
const inter = Inter({ subsets: ["latin"] });
|
7 |
|
|
|
17 |
}) {
|
18 |
return (
|
19 |
<html lang="en">
|
20 |
+
<body className={inter.className}>{children}</body>
|
21 |
</html>
|
22 |
);
|
23 |
}
|
middleware.ts
ADDED
@@ -0,0 +1,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { NextResponse } from 'next/server'
|
2 |
+
import type { NextRequest } from 'next/server'
|
3 |
+
|
4 |
+
// This function can be marked `async` if using `await` inside
|
5 |
+
export function middleware(request: NextRequest) {
|
6 |
+
if (request.nextUrl.pathname === '/') {
|
7 |
+
return NextResponse.redirect(new URL('/dashboard', request.url))
|
8 |
+
}
|
9 |
+
return NextResponse.next();
|
10 |
+
}
|
11 |
+
|
12 |
+
// Ensure the middleware is only called for relevant paths.
|
13 |
+
export const config = {
|
14 |
+
matcher: [
|
15 |
+
/*
|
16 |
+
* Match all request paths except for the ones starting with:
|
17 |
+
* - _next/static (static files)
|
18 |
+
* - _next/image (image optimization files)
|
19 |
+
* - favicon.ico (favicon file)
|
20 |
+
*/
|
21 |
+
'/((?!_next/static|_next/image|auth|monitoring|svgs|favicon.ico).*)',
|
22 |
+
],
|
23 |
+
};
|