mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-01-23 13:34:54 +03:00
Merge pull request #1405 from vitorRibeiro7/hotfix-game-minimun-specs-accordion
fix: fix css bug on requirements details style
This commit is contained in:
commit
8a30e946e3
@ -1,5 +1,5 @@
|
|||||||
import { ChevronDownIcon } from "@primer/octicons-react";
|
import { ChevronDownIcon } from "@primer/octicons-react";
|
||||||
import { useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
import * as styles from "./sidebar-section.css";
|
import * as styles from "./sidebar-section.css";
|
||||||
|
|
||||||
@ -11,6 +11,15 @@ export interface SidebarSectionProps {
|
|||||||
export function SidebarSection({ title, children }: SidebarSectionProps) {
|
export function SidebarSection({ title, children }: SidebarSectionProps) {
|
||||||
const content = useRef<HTMLDivElement>(null);
|
const content = useRef<HTMLDivElement>(null);
|
||||||
const [isOpen, setIsOpen] = useState(true);
|
const [isOpen, setIsOpen] = useState(true);
|
||||||
|
const [height, setHeight] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (content.current && content.current.scrollHeight !== height) {
|
||||||
|
setHeight(isOpen ? content.current.scrollHeight : 0);
|
||||||
|
} else if (!isOpen) {
|
||||||
|
setHeight(0);
|
||||||
|
}
|
||||||
|
}, [isOpen, children, height]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@ -26,7 +35,7 @@ export function SidebarSection({ title, children }: SidebarSectionProps) {
|
|||||||
<div
|
<div
|
||||||
ref={content}
|
ref={content}
|
||||||
style={{
|
style={{
|
||||||
maxHeight: isOpen ? `${content.current?.scrollHeight}px` : "0",
|
maxHeight: `${height}px`,
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
transition: "max-height 0.4s cubic-bezier(0, 1, 0, 1)",
|
transition: "max-height 0.4s cubic-bezier(0, 1, 0, 1)",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
|
Loading…
Reference in New Issue
Block a user