style: add smooth scrolling to the application

Selleo · Jul 22, 2024 · b09d11c · b09d11c
1 parent 650b50a
commit b09d11c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/examples/common_nestjs_remix/apps/web/app/modules/Dashboard/Settings/Settings.layout.tsx b/examples/common_nestjs_remix/apps/web/app/modules/Dashboard/Settings/Settings.layout.tsx
@@ -6,27 +6,32 @@ export default function SettingsLayout() {
   const { hash } = useLocation();
   const currentTab = replace(hash, "#", "") || "user-info";
 
+  const navigationItems = [
+    {
+      id: "user-info",
+      title: "User Info",
+    },
+    {
+      id: "change-password",
+      title: "Change Password",
+    },
+  ];
+
   return (
     <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr] p-4">
       <nav className="grid gap-4 text-sm text-muted-foreground">
         <h1 className="text-3xl font-semibold text-primary">Settings</h1>
-
-        <Link
-          to="#user-info"
-          className={cn({
-            "text-primary": currentTab === "user-info",
-          })}
-        >
-          User Info
-        </Link>
-        <Link
-          to="#change-password"
-          className={cn({
-            "text-primary": currentTab === "change-password",
-          })}
-        >
-          Change Password
-        </Link>
+        {navigationItems.map((item) => (
+          <Link
+            key={item.id}
+            to={`#${item.id}`}
+            className={cn({
+              "text-primary": currentTab === item.id,
+            })}
+          >
+            {item.title}
+          </Link>
+        ))}
       </nav>
       <Outlet />
     </div>

diff --git a/examples/common_nestjs_remix/apps/web/app/root.tsx b/examples/common_nestjs_remix/apps/web/app/root.tsx
@@ -10,7 +10,7 @@ import { Toaster } from "./components/ui/sonner";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className="scroll-smooth">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />