Tab Behavior, Search Bar Error, and Sidebar Configuration in Fumadocs UI

[Shubham-EV]

Issues

1. When I click on different tab items, other tabs with the same name change. When I click on one, the others should not change.

2024-06-20.04-43-41.mp4

2. When I cloned this repository fumadocs-ui-template and ran npm i I got this error on clicking search bar

2024-06-20.04-50-59.mp4

3. I am not able to understand how to configure the sidebar exactly. For example, consider this template: fumadocs-ui-template. What code should I modify and how?and also I find the hover sidebar animation laggy. How can I disable it?

2024-06-20.04-54-53.mp4

The same issue applies to other components. What code should I modify or create, and how should I configure them?
For eg - nextra have theme.config.tsx where I can modify or create custom components . I am not able to understand how to create or modify components in fumadocs.

You have indeed provided code for configuration of component but where should I put them?

In which file I should put it?

4. This feature is also absent in fumadocs but present in nextra.

WhatsApp.Video.2024-06-20.at.05.19.14_1a7a8008.mp4

and also when I type ```java . It don't give logo for java but for other programming language like js, cpp I get logo in syntax highlighting.

[fuma-nama]

1. This is a feature called shared value. It is enabled there, so that after choosing a content source, users don't have to switch the other tabs again to see examples for their content source. You can check the docs.
2. Cannot reproduce this problem on CodeSandbox, please provide a minimal reproducible repo.
3. You can read the docs before opening a question: https://fumadocs.vercel.app/docs/ui/blocks/layout, it is also answered in the FAQ section of Getting Started page. A simple walk through on the files of template should find docs/layout.tsx for docs layout.
4. Java icon is not allowed: Removal of Java Coffee Cup Logo simple-icons/simple-icons#7374. This is reported by Oracle so I'm not planning to add it

[Shubham-EV]

1. Thanks
2. I think I am getting the error in @types/node:20.14.6 and search bar works fine on @types/node:20.14.5
3. How to disable that hover sidebar open animation only? I want to keep collapsible: true but disable that animation?. Please add another property to disable it as well.
4. Thanks (but what about that code expandable button? I uploaded a video about it too. It is present in nextra

and is their any way to change placeholder text of serch bar?

[fuma-nama]

I'm not planning to add the expend button to code blocks, it feels a bit useless and I want to focus on something else. I'll recommend to disable the collapsible sidebar if the animation caused some problems

[Shubham-EV]

Are you planning to add a banner? It is useful for announcing something like new version.

[fuma-nama]

Just add a little element with sticky position to the top of body, I think people would love a fully customisable banner since its code is quite simple.

[Shubham-EV]

Yeah, I tried creating a banner, but I'm just not able to make the state persistent after clicking the close button because I'm a newbie. It would be nice if you could consider adding this in future updates in a proper way :)

For reference, this was my banner.tsx

"use client";
import React, { useState } from "react";

const Banner = () => {
  const [showBanner, setShowBanner] = useState(true);

  const handleClose = () => {
    setShowBanner(false);
  };

  return (
    showBanner && (
      <div className="sticky top-0 tw h-10 text-[14px] font-semibold flex items-center px-4 bg-gray-800 text-white">
        <div className="flex-grow text-center">Banner</div>
        <button onClick={handleClose} className="focus:outline-none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-x text-gray-300 hover:text-white"
          >
            <path d="M18 6 6 18" />
            <path d="m6 6 12 12" />
          </svg>
        </button>
      </div>
    )
  );
};

export default Banner;

and I used this component in my layout.tsx

import { RootProvider } from "fumadocs-ui/provider";
import "fumadocs-ui/style.css";
import { Inter } from "next/font/google";
import type { ReactNode } from "react";

import "fumadocs-ui/style.css";
import Banner from "./banner/banner";

const inter = Inter({
  subsets: ["latin"],
});

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={inter.className} suppressHydrationWarning>
      <body>
        <RootProvider>
          <Banner />
          {children}
        </RootProvider>
      </body>
    </html>
  );
}

Output:-

[fuma-nama]

I see, maybe add this as a component in Fumadocs UI?

[Shubham-EV]

yes that would be great.

[fuma-nama]

Added the banner component, it avoids the flash (layout shift) and allows the state to be persisted, feel free to check it out

[fuma-nama]

and is their any way to change placeholder text of serch bar?

Use the I18n Provider, it's a part of Fumadocs UI to replace certain translations of the labels

[Shubham-EV]

Thanks :)