Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-10 05:15:35 +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, IconHome,
IconNetwork, IconNetwork,
IconNetworkOff, IconNetworkOff,
IconPalette,
IconRuler, IconRuler,
IconSettings, IconSettings,
} from '@tabler/icons-solidjs' } from '@tabler/icons-solidjs'
@ -17,75 +18,69 @@ export const Header = () => {
const navigate = useNavigate() const navigate = useNavigate()
return ( 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'}> <Show when={location.pathname !== '/setup'}>
<ul class="menu rounded-box menu-horizontal"> <li>
<li> <A class="tooltip tooltip-bottom" href="/" data-tip="Home">
<A class="tooltip tooltip-bottom" href="/" data-tip="Home"> <IconHome />
<IconHome /> </A>
</A> </li>
</li>
<li> <li>
<A <A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies">
class="tooltip tooltip-bottom" <IconGlobe />
href="/proxies" </A>
data-tip="Proxies" </li>
>
<IconGlobe />
</A>
</li>
<li> <li>
<A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules"> <A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
<IconRuler /> <IconRuler />
</A> </A>
</li> </li>
<li> <li>
<A <A
class="tooltip tooltip-bottom" class="tooltip tooltip-bottom"
href="/conns" href="/conns"
data-tip="Connections" data-tip="Connections"
> >
<IconNetwork /> <IconNetwork />
</A> </A>
</li> </li>
<li> <li>
<A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs"> <A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
<IconFileStack /> <IconFileStack />
</A> </A>
</li> </li>
<li> <li>
<A class="tooltip tooltip-bottom" href="/config" data-tip="Config"> <A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
<IconSettings /> <IconSettings />
</A> </A>
</li> </li>
<li> <li>
<button <button
class="tooltip tooltip-bottom" class="tooltip tooltip-bottom"
data-tip="Switch Endpoint" data-tip="Switch Endpoint"
onClick={() => { onClick={() => {
setSelectedEndpoint('') setSelectedEndpoint('')
navigate('/setup') navigate('/setup')
}} }}
> >
<IconNetworkOff /> <IconNetworkOff />
</button> </button>
</li> </li>
</ul>
</Show> </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" /> <input id="themes" type="checkbox" class="drawer-toggle" />
<div class="drawer-content"> <div class="drawer-content">
<label for="themes" class="btn drawer-button btn-sm m-2 uppercase"> <label for="themes" class="btn btn-primary drawer-button btn-sm">
Themes <IconPalette />
</label> </label>
</div> </div>
@ -107,6 +102,6 @@ export const Header = () => {
</ul> </ul>
</div> </div>
</div> </div>
</div> </ul>
) )
} }