dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Added navbar

Browse Source
This commit is contained in:
LukeGus
2025-08-14 01:47:22 -05:00
parent 1b076cc612
commit 07367b24b6
3 changed files with 66 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/App.tsx
View File

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

19
src/ui/Navigation/TopNavbar.tsx Normal file
View File

@@ -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>
)
}

2
src/ui/SSH/Manager/SSHManager.tsx
View File

@@ -58,7 +58,7 @@ export function SSHManager({onSelectView}: ConfigEditorProps): React.ReactElemen
<div> <div>
<div className="flex w-full h-screen overflow-hidden"> <div className="flex w-full h-screen overflow-hidden">
<div <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' : '' sidebarState === 'collapsed' ? 'ml-6' : ''
}`}> }`}>
<Tabs value={activeTab} onValueChange={handleTabChange} <Tabs value={activeTab} onValueChange={handleTabChange}