Added navbar

src/App.tsx

@@ -1,14 +1,15 @@
-import React, { useState, useEffect } from "react"
-import { LeftSidebar } from "@/ui/Navigation/LeftSidebar.tsx"
-import { Homepage } from "@/ui/Homepage/Homepage.tsx"
-import { Terminal } from "@/ui/SSH/Terminal/Terminal.tsx"
-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 React, {useState, useEffect} from "react"
+import {LeftSidebar} from "@/ui/Navigation/LeftSidebar.tsx"
+import {Homepage} from "@/ui/Homepage/Homepage.tsx"
+import {Terminal} from "@/ui/SSH/Terminal/Terminal.tsx"
+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 });
+const API = axios.create({baseURL: apiBase});
 
 function getCookie(name: string) {
     return document.cookie.split('; ').reduce((r, v) => {
@@ -51,12 +52,12 @@ function App() {
                 setAuthLoading(false);
             }
         }
-        
+
         checkAuth()
 
         const handleStorageChange = () => checkAuth()
         window.addEventListener('storage', handleStorageChange)
-        
+
         return () => window.removeEventListener('storage', handleStorageChange)
     }, [])
 
@@ -71,38 +72,41 @@ function App() {
     }
 
     return (
-        <LeftSidebar
-            onSelectView={handleSelectView}
-            disabled={!isAuthenticated || authLoading}
-            isAdmin={isAdmin}
-            username={username}
-        >
-            {mountedViews.has("homepage") && (
-                <div style={{display: view === "homepage" ? "block" : "none"}}>
-                    <Homepage onSelectView={handleSelectView} />
-                </div>
-            )}
-            {mountedViews.has("ssh_manager") && (
-                <div style={{display: view === "ssh_manager" ? "block" : "none"}}>
-                    <SSHManager onSelectView={handleSelectView} />
-                </div>
-            )}
-            {mountedViews.has("terminal") && (
-                <div style={{display: view === "terminal" ? "block" : "none"}}>
-                    <Terminal onSelectView={handleSelectView} />
-                </div>
-            )}
-            {mountedViews.has("tunnel") && (
-                <div style={{display: view === "tunnel" ? "block" : "none"}}>
-                    <SSHTunnel onSelectView={handleSelectView} />
-                </div>
-            )}
-            {mountedViews.has("config_editor") && (
-                <div style={{display: view === "config_editor" ? "block" : "none"}}>
-                    <ConfigEditor onSelectView={handleSelectView} />
-                </div>
-            )}
-        </LeftSidebar>
+        <div>
+            <LeftSidebar
+                onSelectView={handleSelectView}
+                disabled={!isAuthenticated || authLoading}
+                isAdmin={isAdmin}
+                username={username}
+            >
+                {mountedViews.has("homepage") && (
+                    <div style={{display: view === "homepage" ? "block" : "none"}}>
+                        <Homepage onSelectView={handleSelectView}/>
+                    </div>
+                )}
+                {mountedViews.has("ssh_manager") && (
+                    <div style={{display: view === "ssh_manager" ? "block" : "none"}}>
+                        <SSHManager onSelectView={handleSelectView}/>
+                    </div>
+                )}
+                {mountedViews.has("terminal") && (
+                    <div style={{display: view === "terminal" ? "block" : "none"}}>
+                        <Terminal onSelectView={handleSelectView}/>
+                    </div>
+                )}
+                {mountedViews.has("tunnel") && (
+                    <div style={{display: view === "tunnel" ? "block" : "none"}}>
+                        <SSHTunnel onSelectView={handleSelectView}/>
+                    </div>
+                )}
+                {mountedViews.has("config_editor") && (
+                    <div style={{display: view === "config_editor" ? "block" : "none"}}>
+                        <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}