mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat: hide drawer on menu click
This commit is contained in:
parent
b056325b37
commit
7ce001caa1
@ -10,7 +10,8 @@ import {
|
|||||||
IconRuler,
|
IconRuler,
|
||||||
IconSettings,
|
IconSettings,
|
||||||
} from '@tabler/icons-solidjs'
|
} from '@tabler/icons-solidjs'
|
||||||
import { For, ParentComponent, Show } from 'solid-js'
|
import { For, ParentComponent, Show, createSignal } from 'solid-js'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { themes } from '~/constants'
|
import { themes } from '~/constants'
|
||||||
import { setCurTheme, setSelectedEndpoint } from '~/signals'
|
import { setCurTheme, setSelectedEndpoint } from '~/signals'
|
||||||
|
|
||||||
@ -100,6 +101,8 @@ export const Header = () => {
|
|||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const [openedDrawer, setOpenedDrawer] = createSignal(false)
|
||||||
|
|
||||||
const onSwitchEndpointClick = () => {
|
const onSwitchEndpointClick = () => {
|
||||||
setSelectedEndpoint('')
|
setSelectedEndpoint('')
|
||||||
navigate('/setup')
|
navigate('/setup')
|
||||||
@ -108,8 +111,14 @@ export const Header = () => {
|
|||||||
return (
|
return (
|
||||||
<ul class="navbar rounded-box sticky inset-x-0 top-2 z-10 mx-2 mt-2 flex w-auto items-center justify-center bg-base-300 px-4">
|
<ul class="navbar rounded-box sticky inset-x-0 top-2 z-10 mx-2 mt-2 flex w-auto items-center justify-center bg-base-300 px-4">
|
||||||
<div class="navbar-start gap-4">
|
<div class="navbar-start gap-4">
|
||||||
<div class="drawer w-auto lg:hidden">
|
<div class={twMerge('drawer w-auto lg:hidden', '')}>
|
||||||
<input id="navs" type="checkbox" class="drawer-toggle" />
|
<input
|
||||||
|
id="navs"
|
||||||
|
type="checkbox"
|
||||||
|
class="drawer-toggle"
|
||||||
|
onChange={(e) => setOpenedDrawer(e.target.checked)}
|
||||||
|
checked={openedDrawer()}
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="drawer-content flex items-center">
|
<div class="drawer-content flex items-center">
|
||||||
<label for="navs" class="btn btn-circle drawer-button btn-sm">
|
<label for="navs" class="btn btn-circle drawer-button btn-sm">
|
||||||
@ -123,7 +132,7 @@ export const Header = () => {
|
|||||||
<ul class="menu rounded-box min-h-full w-2/5 gap-2 bg-base-300 pt-20 shadow">
|
<ul class="menu rounded-box min-h-full w-2/5 gap-2 bg-base-300 pt-20 shadow">
|
||||||
<For each={navs()}>
|
<For each={navs()}>
|
||||||
{({ href, name }) => (
|
{({ href, name }) => (
|
||||||
<li>
|
<li onClick={() => setOpenedDrawer(false)}>
|
||||||
<A href={href}>{name}</A>
|
<A href={href}>{name}</A>
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user