menu animation

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 (
     <>
       <div className="min-h-full">
@@ -43,7 +52,7 @@ export default function Layout({ children }: any) {
                     </div>
                     <div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
                       {navigation.map((item) => (
-                        <a
+                        <Link
                           key={item.name}
                           href={item.href}
                           className={classNames(
@@ -55,7 +64,7 @@ export default function Layout({ children }: any) {
                           aria-current={item.current ? "page" : undefined}
                         >
                           {item.name}
-                        </a>
+                        </Link>
                       ))}
                     </div>
                     {/* Search section */}
@@ -116,7 +125,7 @@ export default function Layout({ children }: any) {
                           {userNavigation.map((item) => (
                             <Menu.Item key={item.name}>
                               {({ active }) => (
-                                <a
+                                <Link
                                   href={item.href}
                                   className={classNames(
                                     active ? "bg-gray-100" : "",
@@ -124,7 +133,7 @@ export default function Layout({ children }: any) {
                                   )}
                                 >
                                   {item.name}
-                                </a>
+                                </Link>
                               )}
                             </Menu.Item>
                           ))}

apps/web/components/logo.tsx

@@ -1,6 +1,9 @@
+import Link from "next/link";
+
 export default function Logo(props: any) {
   return (
     <>
+      <Link href="/dashboard">
         <svg
           className="w-12"
           viewBox="0 0 88.6758041381836 32.18000030517578"
@@ -18,6 +21,7 @@ export default function Logo(props: any) {
             ></path>
           </g>
         </svg>
+      </Link>
     </>
   );
 }

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(" ");

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",

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 <Layout>{page}</Layout>;
+};
+
+export default DashboardPage;

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 <Layout>{page}</Layout>;
+};
+
+export default TeamPage;