مثال بـ CSS Modules

.submenuWrapper {  display: grid;  grid-template-rows: 0fr;  transition: grid-template-rows 0.3s ease;}.submenuWrapper.open {  grid-template-rows: 1fr;}.submenuContent {  overflow: hidden;}.item {  padding: 8px 16px;}.chevron {  transition: transform 0.3s ease;}.chevron.open {  transform: rotate(180deg);}

import { useState } from "react";import styles from "./Sidebar.module.css";export default function Sidebar() {  const [open, setOpen] = useState(false);  return (    <div>      <button onClick={() => setOpen(!open)} className={styles.item}>        Settings        <span className={`${styles.chevron} ${open ? styles.open : ""}`}>▾</span>      </button>      <div className={`${styles.submenuWrapper} ${open ? styles.open : ""}`}>        <div className={styles.submenuContent}>          <div className={styles.item}>Profile</div>          <div className={styles.item}>Billing</div>          <div className={styles.item}>Security</div>        </div>      </div>    </div>  );}