Using state to set styles

[jenkshields]

Kia ora!

I'm trying to use theme-ui and useState to implement a popover menu, and I'd love to double check syntax!

Here's the line in particular:

transform: `${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'}`

open is a state variable that has been passed to the component. Is this syntax correct?

Full code for context:

Layout.js

/** @jsxImportSource theme-ui */
import { useState } from "react"
import Burger from "./burger"
import Menu from "./menu"

const Layout = ({ children }) => {
    const [open, setOpen] = useState(false)

    return (
        <>
            <header sx={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr 1fr',
            }}>
                <div sx={{
                    gridColumn: '1/2',
                }}>
                    <Burger open={open} setOpen={setOpen} />
                    <Menu open={open} setOpen={setOpen} />
                </div>
                <h1 sx={{
                    variant: "text.h1",
                    gridColumn: '2/3',
                    textAlign: 'center',
                }}>Be There</h1>
            </header>
            <div>
                {children}
            </div>
        </>
    )
}

export default Layout

burger.js

/** @jsxImportSource theme-ui */

const BurgerDiv = () => (
    <div sx={{
        width: '2rem',
        height: '0.25rem',
        borderRadius: '10px',
        transition: 'all 0.3s linear',
        position: 'relative',
        transformOrigin: '1px',
        bg: 'primary',
    }} />
)

const Burger = ({ open, setOpen }) => {
    return (
        <button
            open={open}
            onClick={() => setOpen(!open)}
            sx={{
                position: 'absolute',
                top: '5%',
                left: '2rem',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-around',
                width: '2rem',
                height: '2rem',
                background: 'transparent',
                border: 'none',
                cursor: 'pointer',
                padding: '0',
                zIndex: '10',
        }} >
            <BurgerDiv />
            <BurgerDiv />
            <BurgerDiv />
        </button>
    )
}

export default Burger

menu.js

/** @jsxImportSource theme-ui */

const Menu = ({ open }) => {
    return (
        <nav
            open={open}
            sx={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                height: '100vh',
                textAlign: 'left',
                padding: '2rem',
                position: 'absolute',
                top: '0',
                left: '0',
                transition: 'transform 0.3s ease-in-out',
                bg: 'primary',
                transform: `${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'}`,
            }}
        >
            <a href="/" sx={{
        variant: 'text.nav',
    }}>About</a>
            <a href="/" sx={{
        variant: 'text.nav'
    }}>Resources</a>
            <a href="/" sx={{
        variant: 'text.nav',
    }}>Contact</a>
        </nav>
    )
}

export default Menu

[atanasster]

@jenkshields you dont need to create a function inside the style, just pass a string.

Something more like
transform: open ? 'translateX(0)' : 'translateX(-100%)'

[jenkshields]

Thank you so much! This fixed it, along with making sure I was passing the variable to the divs.