fix(blog): ∆ fixed menu button drawer box css issue with fixed property

yacosta738 · Nov 5, 2023 · 8766074 · 8766074
1 parent 55aeb6e
commit 8766074
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 41 deletions.
diff --git a/src/components/atoms/MenuButton.astro b/src/components/atoms/MenuButton.astro
@@ -1,31 +1,33 @@
 ---
-import { DRAWER_MENU_BUTTON_ID } from '@store:constants';
+import { DRAWER_MENU_BUTTON_ID, DRAWER_MENU_BUTTON_BOX_ID } from '@store:constants';
 
 interface Props{
 	drawerTarget: string;
 }
 const { drawerTarget } = Astro.props
 ---
 
-<svg
-	id={DRAWER_MENU_BUTTON_ID}
-	type='button'
-	data-drawer-target={drawerTarget}
-	data-drawer-placement='right'
-	class='ham hamRotate ham7'
-	viewBox='0 0 100 100'
-	width='60'
->
-	<path
-		class='line top'
-		d='m 70,33 h -40 c 0,0 -6,1.368796 -6,8.5 0,7.131204 6,8.5013 6,8.5013 l 20,-0.0013'></path>
-	<path class='line middle' d='m 70,50 h -40'></path>
-	<path
-		class='line bottom'
-		d='m 69.575405,67.073826 h -40 c -5.592752,0 -6.873604,-9.348582 1.371031,-9.348582 8.244634,0 19.053564,21.797129 19.053564,12.274756 l 0,-40'
-	></path>
-	<span class='sr-only'>Open or Close menu</span>
-</svg>
+<div id={DRAWER_MENU_BUTTON_BOX_ID}>
+	<svg
+		id={DRAWER_MENU_BUTTON_ID}
+		type='button'
+		data-drawer-target={drawerTarget}
+		data-drawer-placement='right'
+		class='ham hamRotate ham7'
+		viewBox='0 0 100 100'
+		width='60'
+	>
+		<path
+			class='line top'
+			d='m 70,33 h -40 c 0,0 -6,1.368796 -6,8.5 0,7.131204 6,8.5013 6,8.5013 l 20,-0.0013'></path>
+		<path class='line middle' d='m 70,50 h -40'></path>
+		<path
+			class='line bottom'
+			d='m 69.575405,67.073826 h -40 c -5.592752,0 -6.873604,-9.348582 1.371031,-9.348582 8.244634,0 19.053564,21.797129 19.053564,12.274756 l 0,-40'
+		></path>
+		<span class='sr-only'>Open or Close menu</span>
+	</svg>
+</div>
 
 <style lang='scss'>
 	.ham {

diff --git a/src/components/molecules/Drawer.astro b/src/components/molecules/Drawer.astro
@@ -6,7 +6,7 @@ import { DRAWER_MENU_ID, DRAWER_MENU_LABEL } from '@store:constants'
 setDefaultNamespace('hero')
 ---
 
-<drawer-menu data-identifier={DRAWER_MENU_ID} class='block lg:hidden'>
+<drawer-menu data-identifier={DRAWER_MENU_ID} class='lg:hidden'>
 	<!-- drawer init and toggle -->
 	<MenuButton drawerTarget={DRAWER_MENU_ID} />
 	<!-- drawer component -->
@@ -25,7 +25,8 @@ setDefaultNamespace('hero')
 				fill='currentColor'
 				viewBox='0 0 20 20'
 				xmlns='http://www.w3.org/2000/svg'
-				><path
+			>
+				<path
 					fill-rule='evenodd'
 					d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z'
 					clip-rule='evenodd'></path>
@@ -37,7 +38,7 @@ setDefaultNamespace('hero')
 </drawer-menu>
 
 <script>
-	import { DRAWER_MENU_BUTTON_ID } from '@store:constants'
+	import { DRAWER_MENU_BUTTON_ID, DRAWER_MENU_BUTTON_BOX_ID } from '@store:constants'
 	import { Drawer } from 'flowbite'
 	import type { DrawerOptions, DrawerInterface } from 'flowbite'
 
@@ -49,10 +50,12 @@ setDefaultNamespace('hero')
 			const $drawerMenuButtonElement: HTMLElement | null = this.querySelector(
 				`#${DRAWER_MENU_BUTTON_ID}`
 			)
+			const $drawerMenuButtonBoxElement: HTMLElement | null = this.querySelector(
+				`#${DRAWER_MENU_BUTTON_BOX_ID}`
+			)
 			const $menuDrawerElement: HTMLElement | null = this.querySelector(`#${identifier}`)
 
-			const classListDrawerMenuButton: string[] = [
-				'active-menu',
+			const classListDrawerMenuButtonBox: string[] = [
 				'z-[100]',
 				'absolute',
 				'top-0',
@@ -68,22 +71,22 @@ setDefaultNamespace('hero')
 				edge: false,
 				edgeOffset: '',
 				backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30',
-				onHide: () => {
-					$drawerMenuButtonElement?.classList.remove(...classListDrawerMenuButton)
-					$drawerMenuButtonElement?.removeAttribute('data-drawer-dismiss')
-					$drawerMenuButtonElement?.setAttribute(
-						'data-drawer-show',
-						$menuDrawerElement?.id || fallbackMenuDrawerId
-					)
-				},
-				onShow: () => {
-					$drawerMenuButtonElement?.classList.add(...classListDrawerMenuButton)
-					$drawerMenuButtonElement?.removeAttribute('data-drawer-show')
-					$drawerMenuButtonElement?.setAttribute(
-						'data-drawer-dismiss',
-						$menuDrawerElement?.id || fallbackMenuDrawerId
-					)
-				},
+				onHide: () =>
+					this.onHideDrawer(
+						$drawerMenuButtonElement,
+						$drawerMenuButtonBoxElement,
+						classListDrawerMenuButtonBox,
+						$menuDrawerElement,
+						fallbackMenuDrawerId
+					),
+				onShow: () =>
+					this.onShowDrawer(
+						$drawerMenuButtonElement,
+						$drawerMenuButtonBoxElement,
+						classListDrawerMenuButtonBox,
+						$menuDrawerElement,
+						fallbackMenuDrawerId
+					),
 				onToggle: () => {
 					$drawerMenuButtonElement?.classList.toggle('active-menu')
 				}
@@ -96,6 +99,39 @@ setDefaultNamespace('hero')
 				$drawerMenuButtonElement?.addEventListener('click', () => menuDrawer.toggle())
 			}
 		}
+
+		private onShowDrawer(
+			$drawerMenuButtonElement:  HTMLElement | null,
+			$drawerMenuButtonBoxElement:  HTMLElement | null,
+			classListDrawerMenuButton: string[],
+			$menuDrawerElement:  HTMLElement | null,
+			fallbackMenuDrawerId: string
+		) {
+			$drawerMenuButtonElement?.classList.add('active-menu')
+			$drawerMenuButtonBoxElement?.classList.add(...classListDrawerMenuButton)
+			$drawerMenuButtonElement?.removeAttribute('data-drawer-show')
+			$drawerMenuButtonElement?.setAttribute(
+				'data-drawer-dismiss',
+				$menuDrawerElement?.id || fallbackMenuDrawerId
+			)
+		}
+
+		private onHideDrawer(
+			$drawerMenuButtonElement: HTMLElement | null,
+			$drawerMenuButtonBoxElement: HTMLElement | null,
+			classListDrawerMenuButton: string[],
+			$menuDrawerElement:  HTMLElement | null,
+			fallbackMenuDrawerId: string
+		) {
+			$drawerMenuButtonElement?.classList.remove('active-menu')
+			$drawerMenuButtonBoxElement?.classList.remove(...classListDrawerMenuButton)
+			$drawerMenuButtonElement?.removeAttribute('data-drawer-dismiss')
+			$drawerMenuButtonElement?.setAttribute(
+				'data-drawer-show',
+				$menuDrawerElement?.id || fallbackMenuDrawerId
+			)
+		}
 	}
+
 	customElements.define('drawer-menu', DrawerMenu)
 </script>
diff --git a/src/store/constants.ts b/src/store/constants.ts
@@ -9,6 +9,7 @@ export const domain = 'https://yunielacosta.com'
 
 export const DRAWER_MENU_ID = `drawer-menu-${crypto.randomUUID()}`
 export const DRAWER_MENU_BUTTON_ID = 'drawer-menu-button'
+export const DRAWER_MENU_BUTTON_BOX_ID = 'drawer-menu-button-box'
 export const DRAWER_MENU_LABEL = 'drawer-menu-label'
 export const NAVBAR_HEADER = 'navbar-header'
 export const SEARCH_BUTTON_ID = `search-button-${crypto.randomUUID()}`