Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-12-25 07:04:11 +08:00
Code Issues Projects Releases Wiki Activity

feat: update header layout

Browse Source
This commit is contained in:
kunish 2023-08-28 22:28:30 +08:00
parent ad43bdaa9b
commit 07c82e87d8
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 52 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/Header.tsx
View File

@ -5,6 +5,7 @@ import {
IconHome,
IconNetwork,
IconNetworkOff,
IconPalette,
IconRuler,
IconSettings,
} from '@tabler/icons-solidjs'
@ -17,75 +18,69 @@ export const Header = () => {
const navigate = useNavigate()
return (
<div class="sticky inset-x-0 top-0 z-10 flex items-center rounded-md bg-base-200 px-4 py-2">
<ul class="menu rounded-box menu-horizontal sticky left-0 top-0 z-10 flex items-center justify-center gap-2 bg-base-200 p-2">
<Show when={location.pathname !== '/setup'}>
<ul class="menu rounded-box menu-horizontal">
<li>
<A class="tooltip tooltip-bottom" href="/" data-tip="Home">
<IconHome />
</A>
</li>
<li>
<A class="tooltip tooltip-bottom" href="/" data-tip="Home">
<IconHome />
</A>
</li>
<li>
<A
class="tooltip tooltip-bottom"
href="/proxies"
data-tip="Proxies"
>
<IconGlobe />
</A>
</li>
<li>
<A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies">
<IconGlobe />
</A>
</li>
<li>
<A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
<IconRuler />
</A>
</li>
<li>
<A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
<IconRuler />
</A>
</li>
<li>
<A
class="tooltip tooltip-bottom"
href="/conns"
data-tip="Connections"
>
<IconNetwork />
</A>
</li>
<li>
<A
class="tooltip tooltip-bottom"
href="/conns"
data-tip="Connections"
>
<IconNetwork />
</A>
</li>
<li>
<A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
<IconFileStack />
</A>
</li>
<li>
<A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
<IconFileStack />
</A>
</li>
<li>
<A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
<IconSettings />
</A>
</li>
<li>
<A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
<IconSettings />
</A>
</li>
<li>
<button
class="tooltip tooltip-bottom"
data-tip="Switch Endpoint"
onClick={() => {
setSelectedEndpoint('')
<li>
<button
class="tooltip tooltip-bottom"
data-tip="Switch Endpoint"
onClick={() => {
setSelectedEndpoint('')
navigate('/setup')
}}
>
<IconNetworkOff />
</button>
</li>
</ul>
navigate('/setup')
}}
>
<IconNetworkOff />
</button>
</li>
</Show>
<div class="drawer drawer-end ml-auto w-auto">
<div class="drawer drawer-end w-auto sm:ml-auto">
<input id="themes" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<label for="themes" class="btn drawer-button btn-sm m-2 uppercase">
Themes
<label for="themes" class="btn btn-primary drawer-button btn-sm">
<IconPalette />
</label>
</div>
@ -107,6 +102,6 @@ export const Header = () => {
</ul>
</div>
</div>
</div>
</ul>
)
}