diff --git a/apps/web/components/layout.tsx b/apps/web/components/layout.tsx index c093d7b84..402ca4642 100644 --- a/apps/web/components/layout.tsx +++ b/apps/web/components/layout.tsx @@ -1,5 +1,8 @@ import { Fragment } from "react"; import { Disclosure, Menu, Transition } from "@headlessui/react"; +import Link from "next/link"; +import { useRouter } from "next/router"; + import { Bars3Icon, BellIcon, @@ -15,12 +18,12 @@ const user = { "https://pbs.twimg.com/profile_images/1382036502390181888/4BT30oTM_400x400.jpg", }; const navigation = [ - { name: "Dashboard", href: "/", current: true }, - { name: "Team", href: "/", current: false }, - { name: "Settings", href: "settings" }, + { name: "Dashboard", href: "/dashboard", current: true }, + { name: "Team", href: "/team", current: false }, + { name: "Settings", href: "/settings" }, ]; const userNavigation = [ - { name: "Your Profile", href: "#" }, + { name: "Your Profile", href: "/settings" }, { name: "Sign out", href: "/login" }, ]; @@ -29,6 +32,12 @@ function classNames(...classes: any) { } export default function Layout({ children }: any) { + const router = useRouter(); + + navigation.forEach((element) => { + element.current = element.href == router.route; + }); + return ( <>
@@ -43,7 +52,7 @@ export default function Layout({ children }: any) {
{navigation.map((item) => ( - {item.name} - + ))}
{/* Search section */} @@ -116,7 +125,7 @@ export default function Layout({ children }: any) { {userNavigation.map((item) => ( {({ active }) => ( - {item.name} - + )} ))} diff --git a/apps/web/components/logo.tsx b/apps/web/components/logo.tsx index 3598aee90..9bce939fa 100644 --- a/apps/web/components/logo.tsx +++ b/apps/web/components/logo.tsx @@ -1,23 +1,27 @@ +import Link from "next/link"; + export default function Logo(props: any) { return ( <> - - - - - - + + + + + + + + ); } diff --git a/apps/web/components/settings.tsx b/apps/web/components/settings.tsx index 307f28c6c..f2ca94d91 100644 --- a/apps/web/components/settings.tsx +++ b/apps/web/components/settings.tsx @@ -24,15 +24,8 @@ const subNavigation = [ { name: "Profile", href: "#", icon: UserCircleIcon, current: true }, { name: "Account", href: "#", icon: CogIcon, current: false }, { name: "Password", href: "#", icon: KeyIcon, current: false }, - { name: "Notifications", href: "#", icon: BellIcon, current: false }, - { name: "Billing", href: "#", icon: CreditCardIcon, current: false }, { name: "Integrations", href: "#", icon: SquaresPlusIcon, current: false }, ]; -const userNavigation = [ - { name: "Your Profile", href: "#" }, - { name: "Settings", href: "#" }, - { name: "Sign out", href: "#" }, -]; function classNames(...classes: any) { return classes.filter(Boolean).join(" "); diff --git a/apps/web/next.config.js b/apps/web/next.config.js index 5a488ab4b..c2454efe3 100644 --- a/apps/web/next.config.js +++ b/apps/web/next.config.js @@ -1,5 +1,14 @@ /** @type {import('next').NextConfig} */ const nextConfig = { + async redirects() { + return [ + { + source: "/", + destination: "/dashboard", + permanent: true, + }, + ]; + }, reactStrictMode: true, swcMinify: true, distDir: "build", diff --git a/apps/web/pages/dashboard.tsx b/apps/web/pages/dashboard.tsx new file mode 100644 index 000000000..a342b8be3 --- /dev/null +++ b/apps/web/pages/dashboard.tsx @@ -0,0 +1,14 @@ +import type { ReactElement } from "react"; +import Layout from "../components/layout"; +import Settings from "../components/settings"; +import type { NextPageWithLayout } from "./_app"; + +const DashboardPage: NextPageWithLayout = () => { + return <>This is the dashboard page.; +}; + +DashboardPage.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +export default DashboardPage; diff --git a/apps/web/pages/team.tsx b/apps/web/pages/team.tsx new file mode 100644 index 000000000..c7a4c1c83 --- /dev/null +++ b/apps/web/pages/team.tsx @@ -0,0 +1,14 @@ +import type { ReactElement } from "react"; +import Layout from "../components/layout"; +import Settings from "../components/settings"; +import type { NextPageWithLayout } from "./_app"; + +const TeamPage: NextPageWithLayout = () => { + return <>This is the team page; +}; + +TeamPage.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +export default TeamPage;