Spaces:
Paused
Paused
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store as sidebarStore } from "/components/sidebar/sidebar-store.js"; | |
| </script> | |
| </head> | |
| <body> | |
| <div class="icons-section" id="hide-button" x-data> | |
| <!-- Sidebar Toggle Button --> | |
| <button id="toggle-sidebar" class="toggle-sidebar-button" @click="$store.sidebar.toggle()" aria-label="Toggle Sidebar" aria-expanded="false"> | |
| <span aria-hidden="true"> | |
| <!-- Hamburger Icon --> | |
| <svg id="sidebar-hamburger-svg" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="CurrentColor"> | |
| <path d="M3 13h18v-2H3v2zm0 4h18v-2H3v2zm0-8h18V7H3v2z"></path> | |
| </svg> | |
| </span> | |
| </button> | |
| <div id="logo-container"> | |
| <a href="https://github.com/agent0ai/agent-zero" target="_blank" rel="noopener noreferrer"> | |
| <img src="./public/splash.jpg" alt="a0" width="22" height="22"> | |
| </a> | |
| </div> | |
| </div> | |
| <style> | |
| /* Sidebar toggle button + logo container (migrated) */ | |
| .toggle-sidebar-button { | |
| height: 2.6rem; | |
| width: 2.6rem; | |
| background-color: var(--color-background); | |
| border: 0.1rem solid var(--color-border); | |
| border-radius: var(--spacing-xs); | |
| color: var(--color-text); | |
| opacity: 0.8; | |
| cursor: pointer; | |
| left: var(--spacing-md); | |
| padding: 0.47rem 0.56rem; | |
| position: absolute; | |
| top: var(--spacing-md); | |
| z-index: 999; | |
| -webkit-transition: all var(--transition-speed) ease-in-out; | |
| transition: all var(--transition-speed) ease-in-out; | |
| } | |
| .toggle-sidebar-button:hover { background-color: var(--color-secondary); opacity: 1; } | |
| .toggle-sidebar-button:active { opacity: 0.5; } | |
| #sidebar-hamburger-svg { -webkit-transition: all var(--transition-speed) ease; transition: all var(--transition-speed) ease; } | |
| .toggle-sidebar-button:active #sidebar-hamburger-svg { -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } | |
| #logo-container { | |
| display: -webkit-flex; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| position: fixed; | |
| left: 4.6rem; | |
| top: var(--spacing-md); | |
| z-index: 1004; | |
| -webkit-transition: margin-left var(--transition-speed) ease-in-out; | |
| transition: margin-left var(--transition-speed) ease-in-out; | |
| } | |
| #logo-container a { color: inherit; text-decoration: none; } | |
| #logo-container img { border-radius: var(--spacing-xs); width: auto; height: 2.6rem; -webkit-transition: filter 0.3s ease; transition: filter 0.3s ease; } | |
| .light-mode #logo-container img { -webkit-filter: invert(100%) grayscale(100%); filter: invert(100%) grayscale(100%); } | |
| @media (max-width: 768px) { | |
| .toggle-sidebar-button { position: fixed; left: var(--spacing-md); z-index: 1004; } | |
| #logo-container { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1004; } | |
| } | |
| </style> | |
| </body> | |
| </html> | |