Spaces:

praneeth-hakeem-patrick
/

frontend

Sleeping

App Files Files Community

hakeemsyd commited on May 31, 2024

Commit

d1ecc97

1 Parent(s): f65afef

Routing to pages

Browse files

Files changed (6) hide show

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 Viewed

	@@ -0,0 +1,9 @@

+'use client';
+import React from "react";
+const Dashboard = () => {
+  return (
+    <div>dashboard route</div>
+  );
+}
+export default Dashboard;

app/{page.tsx → (home)/layout.tsx} RENAMED Viewed

@@ -3,43 +3,61 @@ import React, { useState } from "react";
 import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
-  UploadOutlined,
-  UserOutlined,
-  VideoCameraOutlined,
 } from '@ant-design/icons';
 import { Button, Layout, Menu, theme } from 'antd';
 const { Header, Sider, Content } = Layout;
-export default function Home() {
   const [collapsed, setCollapsed] = useState(false);
   const {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();
   return (
     <main className="flex min-h-screen">
       <Layout>
         <Sider trigger={null} collapsible collapsed={collapsed}>
           <div className="demo-logo-vertical" />
           <Menu
             theme="dark"
             mode="inline"
             defaultSelectedKeys={['1']}
             items={[
               {
                 key: '1',
-                icon: <UserOutlined />,
-                label: 'nav 1',
               },
               {
                 key: '2',
-                icon: <VideoCameraOutlined />,
-                label: 'nav 2',
               },
               {
                 key: '3',
-                icon: <UploadOutlined />,
-                label: 'nav 3',
               },
             ]}
           />
@@ -66,10 +84,12 @@ export default function Home() {
               borderRadius: borderRadiusLG,
             }}
           >
-            Content
           </Content>
         </Layout>
       </Layout>
     </main >
   );
-}

 import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
+  AuditOutlined,
+  DashboardOutlined,
+  DatabaseOutlined,
 } from '@ant-design/icons';
 import { Button, Layout, Menu, theme } from 'antd';
+import { useRouter } from "next/navigation";
 const { Header, Sider, Content } = Layout;
+const Dashboard = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
   const [collapsed, setCollapsed] = useState(false);
   const {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();
+  const router = useRouter();
+  function handleNav(route: string) {
+    router.push(route);
+  }
   return (
     <main className="flex min-h-screen">
       <Layout>
         <Sider trigger={null} collapsible collapsed={collapsed}>
           <div className="demo-logo-vertical" />
           <Menu
+            style={{ marginTop: '8rem' }}
             theme="dark"
             mode="inline"
             defaultSelectedKeys={['1']}
             items={[
               {
                 key: '1',
+                icon: <DashboardOutlined />,
+                label: 'Dashboard',
+                onClick: () => {
+                  handleNav('/dashboard');
+                }
               },
               {
                 key: '2',
+                icon: <DatabaseOutlined />,
+                label: 'My Data',
+                onClick: () => {
+                  handleNav('/mydata');
+                }
               },
               {
                 key: '3',
+                icon: <AuditOutlined />,
+                label: 'Reports',
+                onClick: () => {
+                  handleNav('/reports');
+                }
               },
             ]}
           />
               borderRadius: borderRadiusLG,
             }}
           >
+            {children}
           </Content>
         </Layout>
       </Layout>
     </main >
   );
+}
+export default Dashboard;

app/(home)/mydata/page.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+'use client';
+import React from "react";
+const Dashboard = () => {
+  return (
+    <div>mydata route</div>
+  );
+}
+export default Dashboard;

app/(home)/reports/page.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+'use client';
+import React from "react";
+const Reports = () => {
+  return (
+    <div>reports route</div>
+  );
+}
+export default Reports;

app/layout.tsx CHANGED Viewed

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import "./markdown.css";
-import { AntdRegistry } from '@ant-design/nextjs-registry';
 const inter = Inter({ subsets: ["latin"] });
@@ -18,7 +17,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}><AntdRegistry>{children}</AntdRegistry></body>
     </html>
   );
 }

 import { Inter } from "next/font/google";
 import "./globals.css";
 import "./markdown.css";
 const inter = Inter({ subsets: ["latin"] });
 }) {
   return (
     <html lang="en">
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }

middleware.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+// This function can be marked `async` if using `await` inside
+export function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname === '/') {
+    return NextResponse.redirect(new URL('/dashboard', request.url))
+  }
+  return NextResponse.next();
+}
+// Ensure the middleware is only called for relevant paths.
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     */
+    '/((?!_next/static|_next/image|auth|monitoring|svgs|favicon.ico).*)',
+  ],
+};