Skip to main content
Version: v7.0.0

FAQ'S

Frequently Asked Questions​

Since we offer six different layouts, in this example, we’ll primarily focus on the Hydrogen layout for demonstration.


Go to src/layouts/hydrogen/sidebar.tsx and change the logo component here with your component.

src/layouts/hydrogen/sidebar.tsx
"use client";

import Link from "next/link";
import cn from "@core/utils/class-names";
import SimpleBar from "@core/ui/simplebar";
import Logo from "@core/components/logo";
import { SidebarMenu } from "./sidebar-menu";

export default function Sidebar({ className }: { className?: string }) {
  return (
    <aside
      className={cn(
        "fixed bottom-0 start-0 z-50 h-full w-[270px] border-e-2 border-gray-100 bg-white dark:bg-gray-100/50 2xl:w-72",
        className
      )}
    >
      <div className="sticky top-0 z-40 bg-gray-0/10 px-6 pb-5 pt-5 dark:bg-gray-100/5 2xl:px-8 2xl:pt-6">
        <Link
          href={"/"}
          aria-label="Site Logo"
          className="text-gray-800 hover:text-gray-900"
        >
          <Logo className="max-w-[155px]" />
        </Link>
      </div>

      <SimpleBar className="h-[calc(100%-80px)]">
        <SidebarMenu />
      </SimpleBar>
    </aside>
  );
}

How to change the site title for any page?​

In this example we are going to change the site title for home page. Go to src/app/(hydrogen)/page.tsx file. You will see something like this.

src/app/(hydrogen)/page.tsx
import FileDashboard from "@/app/shared/file/dashboard";
import { metaObject } from "@/config/site.config";

export const metadata = {
  ...metaObject(),
};

export default function FileDashboardPage() {
  return <FileDashboard />;
}

The highlighted code is the site title for the page. You can learn more about Next.js Metadata from Next.js Official Documentation.

This is the function that is used to generate the metadata for the page. You can change the title of the page by changing the title parameter of the metaObject function.

export const metaObject = (
  title?: string,
  openGraph?: OpenGraph,
  description: string = siteConfig.description
): Metadata => {
  return {
    title: title ? `${title} - Isomorphic Furyroad` : siteConfig.title,
    description,
    openGraph: openGraph ?? {
      title: title ? `${title} - Isomorphic Furyroad` : title,
      description,
      url: "https://isomorphic-furyroad.vercel.app",
      siteName: "Isomorphic Furyroad", // https://developers.google.com/search/docs/appearance/site-names
      images: {
        url: "https://s3.amazonaws.com/redqteam.com/isomorphic-furyroad/itemdep/isobanner.png",
        width: 1200,
        height: 630,
      },
      locale: "en_US",
      type: "website",
    },
  };
};