impl command menu and change theme colors

src/app/components/navbar.tsx

@@ -2,13 +2,14 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ReactElement } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { HrefButton } from "./href-button";
 import Logo from "./logo";
 import { ToggleThemeButton } from "./theme-toggle-button";
 import { GithubStar } from "@/app/components/github-star";
 import { Card } from "@/app/components/card";
 import { cn } from "@/app/common/utils";
+import { CommandMenu } from "@/app/components/command-menu";
 
 type Page = {
   /**
@@ -42,7 +43,8 @@ const pages: Page[] = [
 ];
 
 export default function NavBar(): ReactElement {
-  const path = usePathname();
+  const path: string = usePathname();
+  const isDocs: boolean = path ? path.includes("/docs") : false;
 
   return (
     <Card
@@ -50,15 +52,17 @@ export default function NavBar(): ReactElement {
       classNameContent="p-0 relative rounded-lg flex justify-between items-center gap-3 px-3 bg-opacity-85 h-12"
     >
       {/* Left */}
-      <div className="z-50">
+      <div className={cn("flex flex-row items-center gap-2 z-50", isDocs ? "w-full md:w-fit" : "w-fit")}>
         <Link href="/" className="flex items-center gap-2">
           <Logo />
-          <p className="hidden md:block text-lg font-semibold">Minecraft Utilities</p>
         </Link>
+
+        {/* Command Menu */}
+        <CommandMenu className={cn(isDocs ? "" : "hidden md:inline-flex")} />
       </div>
 
       {/* Links */}
-      <div className="absolute inset-x-0 flex justify-center">
+      <div className={cn("absolute inset-x-0 justify-center", isDocs ? "hidden md:flex" : "flex")}>
         <div className="flex gap-4">
           {pages.map((page, index) => {
             const isActive: boolean = path ? path.includes(page.url) : false;
@@ -79,7 +83,7 @@ export default function NavBar(): ReactElement {
       {/* Right */}
       <div className="flex gap-4 items-center z-50">
         <ToggleThemeButton />
-        <GithubStar />
+        <GithubStar className={isDocs ? "hidden md:flex" : "hidden"} />
       </div>
     </Card>
   );