src/App.tsx

@@ -6,6 +6,7 @@ import { SSHTunnel } from "@/ui/SSH/Tunnel/SSHTunnel.tsx"
 import {ConfigEditor} from "@/ui/SSH/Config Editor/ConfigEditor.tsx"
 import {SSHManager} from "@/ui/SSH/Manager/SSHManager.tsx"
 import axios from "axios"
+import {TopNavbar} from "@/ui/Navigation/TopNavbar.tsx";
 
 const apiBase = import.meta.env.DEV ? "http://localhost:8081/users" : "/users";
 const API = axios.create({baseURL: apiBase});
@@ -71,6 +72,7 @@ function App() {
     }
 
     return (
+        <div>
             <LeftSidebar
                 onSelectView={handleSelectView}
                 disabled={!isAuthenticated || authLoading}
@@ -102,7 +104,9 @@ function App() {
                         <ConfigEditor onSelectView={handleSelectView}/>
                     </div>
                 )}
+                <TopNavbar/>
             </LeftSidebar>
+        </div>
     )
 }
 

src/ui/Navigation/TopNavbar.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useSidebar } from "@/components/ui/sidebar";
+
+export function TopNavbar(): React.ReactElement {
+    const { state } = useSidebar();
+    
+    return (
+        <div 
+            className="fixed z-10 h-[50px] bg-[#18181b] border border-[#303032] rounded-lg transition-[left] duration-200 ease-linear"
+            style={{
+                top: "0.5rem",
+                left: state === "collapsed" ? "calc(1.5rem + 0.5rem)" : "calc(16rem + 0.5rem)",
+                right: "0.5rem"
+            }}
+        >
+
+        </div>
+    )
+}

src/ui/SSH/Manager/SSHManager.tsx

@@ -58,7 +58,7 @@ export function SSHManager({onSelectView}: ConfigEditorProps): React.ReactElemen
         <div>
             <div className="flex w-full h-screen overflow-hidden">
                 <div
-                    className={`flex-1 bg-[#18181b] m-[8px] text-white p-4 pt-0 rounded-lg border border-[#303032] flex flex-col min-h-0 ${
+                    className={`flex-1 bg-[#18181b] m-[8px] text-white p-4 pt-0 rounded-lg border mt-18.5 border-[#303032] flex flex-col min-h-0 ${
                         sidebarState === 'collapsed' ? 'ml-6' : ''
                     }`}>
                     <Tabs value={activeTab} onValueChange={handleTabChange}