feature(web): Introduce a new sticky navbar. Fixes 520 (#515)

* ui: add global header

* fix: design fixes

* fix: tests

* fix navbar background, hide y scrollbar and change sidebar footer to show version

---------

Co-authored-by: MohamedBassem <me@mbassem.com>

1 files changed, 17 insertions, 13 deletions

diff --git a/apps/web/app/dashboard/layout.tsx b/apps/web/app/dashboard/layout.tsx
index b0ac1f7d..cbd51245 100644
--- a/apps/web/app/dashboard/layout.tsx
+++ b/apps/web/app/dashboard/layout.tsx
@@ -1,3 +1,4 @@
+import Header from "@/components/dashboard/header/Header";
 import MobileSidebar from "@/components/dashboard/sidebar/ModileSidebar";
 import Sidebar from "@/components/dashboard/sidebar/Sidebar";
 import DemoModeBanner from "@/components/DemoModeBanner";
@@ -14,20 +15,23 @@ export default async function Dashboard({
   modal: React.ReactNode;
 }>) {
   return (
-    <div className="flex min-h-screen w-screen flex-col sm:h-screen sm:flex-row">
-      <ValidAccountCheck />
-      <div className="hidden flex-none sm:flex">
-        <Sidebar />
-      </div>
-      <main className="flex-1 bg-muted sm:overflow-y-auto">
-        {serverConfig.demoMode && <DemoModeBanner />}
-        <div className="block w-full sm:hidden">
-          <MobileSidebar />
-          <Separator />
+    <div>
+      <Header />
+      <div className="flex min-h-[calc(100vh-64px)] w-screen flex-col sm:h-[calc(100vh-64px)] sm:flex-row">
+        <ValidAccountCheck />
+        <div className="hidden flex-none sm:flex">
+          <Sidebar />
         </div>
-        {modal}
-        <div className="container min-h-screen p-4">{children}</div>
-      </main>
+        <main className="flex-1 bg-muted sm:overflow-y-auto">
+          {serverConfig.demoMode && <DemoModeBanner />}
+          <div className="block w-full sm:hidden">
+            <MobileSidebar />
+            <Separator />
+          </div>
+          {modal}
+          <div className="min-h-30 container p-4">{children}</div>
+        </main>
+      </div>
     </div>
   );
 }