From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id F27DB1FF142 for ; Fri, 19 Jun 2026 09:45:06 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id D4A126EAC; Fri, 19 Jun 2026 09:45:06 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit-assets 1/2] nav: add classes for animated navigation drawer menus Date: Fri, 19 Jun 2026 09:44:27 +0200 Message-ID: <20260619074434.705653-2-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260619074434.705653-1-d.csapak@proxmox.com> References: <20260619074434.705653-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.049 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: LMIO32JGKOOMQF22YBI3B2P6PXSOJAFO X-Message-ID-Hash: LMIO32JGKOOMQF22YBI3B2P6PXSOJAFO X-MailFrom: d.csapak@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Yew framework devel list at Proxmox List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: to animate expanding/collapsing of menus in navigation drawers, we have to add some classes. Since we also want to be able to enable/disable animation, use a css variable for the transition that is set accordingly. The only broadly compatible CSS way to animate the height of something where the height is unknown ("auto"), is by using a grid layout and using a '1fr' row template for it. ("auto" height is not animatable, and calc-size only exists in chrome for now) The markup has to be changed in the rust code for this to work. Signed-off-by: Dominik Csapak --- scss/_nav.scss | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/scss/_nav.scss b/scss/_nav.scss index 08102d4..48cda9a 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -157,6 +157,36 @@ text-shadow: none !important; color: var(--pwt-color); } + + --pwt-transition-time: 0s; + + &.animated { + --pwt-transition-time: 0.1s; + } + + .pwt-nav-menu-item-arrow { + transition: var(--pwt-transition-time); + &.expanded { + --dir: -180deg; + transform: rotateZ(var(--dir)); + } + + [dir="rtl"] &.expanded { + --dir: 180deg; + } + } + + .pwt-nav-menu-animation-container { + transition: var(--pwt-transition-time); + overflow: hidden; + display: grid; + grid-template-rows: 0fr; + min-height: fit-content; + + &.expanded { + grid-template-rows: 1fr; + } + } } .pwt-nav-menu-icon { -- 2.47.3