From 44d0722cb64f2385b91f1df0ffd9646ba8e815ab Mon Sep 17 00:00:00 2001 From: overflowerror Date: Thu, 8 Aug 2024 19:48:01 +0200 Subject: [PATCH] feat: Change hamburger menu to close button when menu open on mobile --- html/styles/main.css | 27 +++++++++++++++++++++++---- view/layout.php | 3 ++- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/html/styles/main.css b/html/styles/main.css index c5ebd7d..d3d9cf1 100644 --- a/html/styles/main.css +++ b/html/styles/main.css @@ -328,9 +328,24 @@ h2 { right: 0; display: block; font-size: 40px; - padding: 10px; margin: 0; - transition: color 0.3s; + } + + nav .hamburger i { + position: absolute; + top: 5px; + right: 10px; + transition: opacity 0.3s; + } + + nav .hamburger .closed { + opacity: 1; + } + + nav .hamburger .open { + opacity: 0; + right: 12px; + color: white; } nav .hamburger .checkbox { @@ -348,8 +363,12 @@ h2 { background-color: black; } - nav:has(> .hamburger input[type="checkbox"]:checked) .hamburger { - color: white; + nav:has(> .hamburger input[type="checkbox"]:checked) .hamburger .open { + opacity: 1; + } + + nav:has(> .hamburger input[type="checkbox"]:checked) .hamburger .closed { + opacity: 0; } nav ul { diff --git a/view/layout.php b/view/layout.php index 2b882ce..5cff7ef 100644 --- a/view/layout.php +++ b/view/layout.php @@ -26,7 +26,8 @@