Add NavBar

package.json

@@ -23,6 +23,7 @@
     "@react-aria/visually-hidden": "3.8.21",
     "@react-types/shared": "3.28.0",
     "@reecelucas/react-use-hotkeys": "^2.0.0",
+    "@types/react-resizable": "^3.0.8",
     "@uiw/react-codemirror": "^4.23.12",
     "@xyflow/react": "^12.6.3",
     "date-fns": "^4.1.0",
@@ -32,7 +33,7 @@
     "fast-json-patch": "^3.1.1",
     "framer-motion": "11.15.0",
     "i18next-browser-languagedetector": "^8.0.5",
-    "lodash": "^4.17.21", 
+    "lodash": "^4.17.21",
     "lucide-react": "^0.501.0",
     "next-themes": "^0.4.6",
     "node-sql-parser": "^5.3.9",
@@ -42,6 +43,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "^15.5.1",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "6.23.0",
     "react-tag-input": "^6.10.6",
     "sql-formatter": "^15.6.3",

src/components/navbar/navbar.tsx

@@ -0,0 +1,44 @@
+ 
+import { useDatabase } from "@/providers/database-provider/database-provider";
+import Menu from "../menu/menu";
+import RenameDatabase from "./rename-database";
+import LanguagesDropdown from "./languages-dropdown";
+
+
+
+const Navbar: React.FC = ({ }) => {
+    const { database } = useDatabase();
+    return (
+        <nav className="h-12 fixed z-50 bg-background w-full flex  items-center p-4 border-b  border-divider  ">
+            <img
+                src={`/stackrender.png`}
+                width={22}
+                alt="logo"
+            />
+            <h3 className="font-semibold ml-2 text-slate-900 text-sm dark:text-white">StackRender</h3>
+            <div className="ml-4  w-full">
+                <div className="flex w-full justify-between items-center gap-2">
+
+                    <Menu />
+                    <div className="  absolute left-[50%] -translate-x-[50%]">
+                        {database && <RenameDatabase database={database} />}
+                    </div>
+                    <div className="flex gap-2 items-center">
+                        <a className="gh-button text-font font-medium bg-background text-xs p-4 px-2 pr-2.5   flex justif-center items-center"
+                            target="_blank"
+                            href="https://github.com/stackrender/stackrender">
+                            <span className="gh-button__icon"></span>
+
+                        </a>
+
+                        <LanguagesDropdown />
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+    )
+}
+
+
+export default Navbar; 

src/pages/dashboard/dashboard-page.tsx

@@ -1,6 +1,7 @@
 
-import Sidebar from "@/components/sidebar/sidebar"; 
 import Navbar from "@/components/navbar/navbar";
+import Sidebar from "@/components/sidebar/sidebar"; 
+ 
 import { Outlet } from "react-router-dom";