Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-24 09:45:35 +08:00
Code Issues Projects Releases Wiki Activity

feat: hide drawer on menu click

Browse Source
This commit is contained in:
kunish 2023-08-31 02:21:41 +08:00
parent b056325b37
commit 7ce001caa1
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Header.tsx
View File

@ -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>
)} )}