Skip to content

fix: keep sidebar visible in Firefox #1046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chethanuk wants to merge 1 commit into
base: main
Choose a base branch
from
+10 −17
Open

fix: keep sidebar visible in Firefox #1046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions crates/openfang-api/static/css/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
/* OpenFang Layout — Grid + Sidebar + Responsive */

[x-cloak] { display: none !important; }

.app-layout {
display: flex;
height: 100vh;
Expand Down
25 changes: 8 additions & 17 deletions crates/openfang-api/static/index_body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h3 style="margin:0 0 0.5rem;font-size:1.1rem">API Key Required</h3>

<div class="app-layout" :class="{ 'focus-mode': $store.app.focusMode }">
<!-- Sidebar -->
<nav class="sidebar" :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileMenuOpen }">
<nav class="sidebar" x-cloak :class="{ collapsed: sidebarCollapsed, 'mobile-open': mobileMenuOpen }">
<div class="sidebar-header">
<div class="sidebar-header-text">
<div class="sidebar-logo">
Expand Down Expand Up @@ -68,8 +68,7 @@ <h1>OPENFANG</h1>
<span class="nav-label">Agents</span>
<span class="nav-section-chevron" :style="collapsed ? '' : 'transform:rotate(90deg)'">&rsaquo;</span>
</div>
<template x-if="!collapsed">
<div x-transition>
<div x-show="!collapsed" x-cloak x-transition>
<a class="nav-item" :class="{ active: page === 'agents' }" @click="navigate('agents')" :aria-current="page === 'agents' ? 'page' : false">
<span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span>
<span class="nav-label">Chat</span>
Expand All @@ -88,7 +87,6 @@ <h1>OPENFANG</h1>
<span class="nav-label">Comms</span>
</a>
</div>
</template>
</div>

<!-- Automation -->
Expand All @@ -97,8 +95,7 @@ <h1>OPENFANG</h1>
<span class="nav-label">Automation</span>
<span class="nav-section-chevron" :style="collapsed ? '' : 'transform:rotate(90deg)'">&rsaquo;</span>
</div>
<template x-if="!collapsed">
<div x-transition>
<div x-show="!collapsed" x-cloak x-transition>
<a class="nav-item" :class="{ active: page === 'workflows' }" @click="navigate('workflows')" :aria-current="page === 'workflows' ? 'page' : false">
<span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M6 3v12M18 9a9 9 0 0 1-9 9"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/></svg></span>
<span class="nav-label">Workflows</span>
Expand All @@ -108,7 +105,6 @@ <h1>OPENFANG</h1>
<span class="nav-label">Scheduler</span>
</a>
</div>
</template>
</div>

<!-- Extensions -->
Expand All @@ -117,8 +113,7 @@ <h1>OPENFANG</h1>
<span class="nav-label">Extensions</span>
<span class="nav-section-chevron" :style="collapsed ? '' : 'transform:rotate(90deg)'">&rsaquo;</span>
</div>
<template x-if="!collapsed">
<div x-transition>
<div x-show="!collapsed" x-cloak x-transition>
<a class="nav-item" :class="{ active: page === 'channels' }" @click="navigate('channels')" :aria-current="page === 'channels' ? 'page' : false">
<span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M4 9h16M4 15h16M10 3l-2 18M16 3l-2 18"/></svg></span>
<span class="nav-label">Channels</span>
Expand All @@ -132,7 +127,6 @@ <h1>OPENFANG</h1>
<span class="nav-label">Hands</span>
</a>
</div>
</template>
</div>

<!-- Monitor -->
Expand All @@ -141,8 +135,7 @@ <h1>OPENFANG</h1>
<span class="nav-label">Monitor</span>
<span class="nav-section-chevron" :style="collapsed ? '' : 'transform:rotate(90deg)'">&rsaquo;</span>
</div>
<template x-if="!collapsed">
<div x-transition>
<div x-show="!collapsed" x-cloak x-transition>
<a class="nav-item" :class="{ active: page === 'analytics' }" @click="navigate('analytics')" :aria-current="page === 'analytics' ? 'page' : false">
<span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M18 20V10M12 20V4M6 20v-6"/></svg></span>
<span class="nav-label">Analytics</span>
Expand All @@ -152,7 +145,6 @@ <h1>OPENFANG</h1>
<span class="nav-label">Logs</span>
</a>
</div>
</template>
</div>

<!-- System -->
Expand All @@ -161,8 +153,7 @@ <h1>OPENFANG</h1>
<span class="nav-label">System</span>
<span class="nav-section-chevron" :style="collapsed ? '' : 'transform:rotate(90deg)'">&rsaquo;</span>
</div>
<template x-if="!collapsed">
<div x-transition>
<div x-show="!collapsed" x-cloak x-transition>
<a class="nav-item" :class="{ active: page === 'runtime' }" @click="navigate('runtime')" :aria-current="page === 'runtime' ? 'page' : false">
<span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></span>
<span class="nav-label">Runtime</span>
Expand All @@ -172,7 +163,6 @@ <h1>OPENFANG</h1>
<span class="nav-label">Settings</span>
</a>
</div>
</template>
</div>
</div>

Expand All @@ -186,7 +176,7 @@ <h1>OPENFANG</h1>
<div class="sidebar-toggle" @click="toggleSidebar()" x-text="sidebarCollapsed ? '\u276F' : '\u276E'"></div>
</nav>

<div class="sidebar-overlay" @click="mobileMenuOpen = false"></div>
<div class="sidebar-overlay" x-cloak @click="mobileMenuOpen = false"></div>

<!-- Main Content -->
<main class="main-content">
Expand Down Expand Up @@ -832,6 +822,7 @@ <h3 style="margin:0 0 8px;font-size:16px;font-weight:600">Select an agent to sta
</div>
</div>
</div>

</template>

<!-- MODE 2: Agent picker + Templates (no agent chatting) -->
Expand Down