refactor: fix name and state inconsistency in <ThemedLayoutV2>.

[salihozdemir]

useSiderVisible is deprecated, instead we created a new hook useSiderState for it. useSiderState similar to useSiderVisible but it returns more meaningful state names. However, useSiderVisible is still available for backward compatibility.

Updated Sider and HamburgerMenu components using useSiderState.

import { useSiderState } from '@refinedev/antd'; // or @refinedev/chakra-ui, @refinedev/mui, @refinedev/mantine
const {
    siderCollapsed,
    setSiderCollapsed,
    mobileSiderOpen,
    setMobileSiderOpen,
} = useSiderState();

Test plan (required)

Tests not affected.

Self Check before Merge

Please check all items below before review.

• Corresponding issues are created/updated or not needed
• Docs are updated/provided or not needed
• Examples are updated/provided or not needed
• TypeScript definitions are updated/provided or not needed
• Tests are updated/provided or not needed
• Changesets are provided or not needed

[changeset-bot]

🦋 Changeset detected

Latest commit: d4699ed

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for lighthearted-pastelito-e86ad1 ready!

Name	Link
🔨 Latest commit	d4699ed
🔍 Latest deploy log	https://app.netlify.com/sites/lighthearted-pastelito-e86ad1/deploys/647618657da6b3000813f29d
😎 Deploy Preview	https://deploy-preview-4404--lighthearted-pastelito-e86ad1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for refine-doc-live-previews ready!

Name	Link
🔨 Latest commit	d4699ed
🔍 Latest deploy log	https://app.netlify.com/sites/refine-doc-live-previews/deploys/647618656d2a940008cb68a6
😎 Deploy Preview	https://deploy-preview-4404--refine-doc-live-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for aquamarine-panda-e208bf ready!

Name	Link
🔨 Latest commit	d4699ed
🔍 Latest deploy log	https://app.netlify.com/sites/aquamarine-panda-e208bf/deploys/647618651941fb0008e5a558
😎 Deploy Preview	https://deploy-preview-4404--aquamarine-panda-e208bf.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for imaginative-sundae-1fd394 ready!

Name	Link
🔨 Latest commit	d4699ed
🔍 Latest deploy log	https://app.netlify.com/sites/imaginative-sundae-1fd394/deploys/647618651941fb0008e5a55d
😎 Deploy Preview	https://deploy-preview-4404--imaginative-sundae-1fd394.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for stupendous-taffy-33f80c ready!

Name	Link
🔨 Latest commit	d4699ed
🔍 Latest deploy log	https://app.netlify.com/sites/stupendous-taffy-33f80c/deploys/64761865852f710008223cdb
😎 Deploy Preview	https://deploy-preview-4404--stupendous-taffy-33f80c.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d4699ed. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

🟥 Failed Commands
lerna run cypress:run --scope base-material-ui
lerna run cypress:run --scope base-mantine
lerna run cypress:run --scope table-antd-use-table
lerna run cypress:run --scope base-chakra-ui
lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=upload-mantine-multipart --scope=upload-material-ui-base64 --scope=upload-material-ui-multipart --scope=upload-mui-base64 --scope=upload-mui-multipart --scope=use-infinite-list --scope=use-modal-antd --scope=use-simple-list-antd --scope=vite --scope=web3 --scope=with-c...

✅ Successfully ran 41 targets

• lerna run cypress:run --scope form-react-hook-form-use-form
• lerna run cypress:run --scope form-material-ui-use-steps-form
• lerna run cypress:run --scope form-material-ui-use-modal-form
• lerna run cypress:run --scope form-material-ui-use-form
• lerna run cypress:run --scope form-material-ui-use-drawer-form
• lerna run cypress:run --scope form-material-ui-mutation-mode
• lerna run cypress:run --scope form-mantine-use-steps-form
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=customization --scope=customization-footer --scope=customization-login --scope=customization-offlayout-area --scope=customization-rtl --scope=customization-sider --scope=customization-theme-antd --scope=customization-theme-chakra-ui --scope=customization-theme-mantine ...
• lerna run cypress:run --scope form-mantine-use-modal-form
• lerna run cypress:run --scope form-mantine-use-form
• lerna run cypress:run --scope form-mantine-use-drawer-form
• lerna run cypress:run --scope table-antd-use-update-many
• lerna run cypress:run --scope form-mantine-mutation-mode
• lerna run cypress:run --scope form-chakra-use-modal-form
• lerna run cypress:run --scope base-antd
• lerna run cypress:run --scope form-chakra-ui-use-form
• lerna run cypress:run --scope table-antd-use-editable-table
• lerna run cypress:run --scope form-chakra-ui-use-drawer-form
• lerna run cypress:run --scope form-chakra-ui-mutation-mode
• lerna run cypress:run --scope table-antd-use-delete-many
• lerna run cypress:run --scope form-antd-use-steps-form
• lerna run cypress:run --scope table-antd-table-filter
• lerna run cypress:run --scope form-antd-use-modal-form
• lerna run cypress:run --scope table-antd-advanced
• lerna run cypress:run --scope form-antd-use-form
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=access-control-casbin --scope=access-control-cerbos --scope=accessControl --scope=antd-audit-log --scope=antdAuditLog --scope=audit-log-provider --scope=auditLogProvider --scope=auth-antd --scope=auth-auth0 --scope=auth-chakra-ui --scope=auth-google-login --scope=auth-...
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=new-routing-example --scope=pixels --scope=pixels-admin --scope=react-location --scope=reactToastify --scope=real-world-example --scope=refine-week-invoice-generator --scope=remix --scope=search --scope=store --scope=storybook --scope=table --scope=table-antd-advanced ...
• lerna run cypress:run --scope form-antd-use-drawer-form
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=table-mui-data-grid-pro --scope=table-mui-table-filter --scope=table-mui-use-data-grid --scope=table-mui-use-delete-many --scope=table-mui-use-update-many --scope=table-react-table-advanced --scope=table-react-table-basic --scope=template-antd --scope=template-chakra-u...
• lerna run cypress:run --scope form-antd-mutation-mode
• lerna run cypress:run --scope form-save-and-continue
• lerna run cypress:run --scope form-react-hook-form-use-steps-form
• lerna run cypress:run --scope form-antd-custom-validation
• lerna run cypress:run --scope form-react-hook-form-use-modal-form
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=finefoods-antd --scope=finefoods-client --scope=finefoods-material-ui --scope=finefoods-mui --scope=form --scope=form-antd-custom-validation --scope=form-antd-mutation-mode --scope=form-antd-use-drawer-form --scope=form-antd-use-form --scope=form-antd-use-modal-form --...
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=form-react-hook-form-use-modal-form --scope=form-react-hook-form-use-steps-form --scope=form-save-and-continue --scope=i18n --scope=i18n-nextjs --scope=i18n-react --scope=import-export-antd --scope=import-export-mantine --scope=import-export-material-ui --scope=import-...
• lerna run build --include-dependencies --scope @refinedev/core --no-bail --scope=blog-mail-subscription --scope=blog-material-ui --scope=blog-material-ui-datagrid --scope=blog-mui-datagrid --scope=blog-next-refine-pwa --scope=blog-ra-chakra-tutorial --scope=blog-react-admin-mantine --scope=blog-react-aria --scope=blog-react-dnd --scope=blog-react-h...
• lerna run test --stream --scope @refinedev/* --scope create-refine-app
• lerna run build --ignore @pankod/refine-react-router --ignore=monorepo-* --ignore with-nx --scope @refinedev/* --scope create-refine-app
• lerna run build --include-dependencies --scope @refinedev/core --scope finefoods-antd
• lerna run build --include-dependencies --scope @refinedev/core --scope finefoods-material-ui

---

Sent with 💌 from NxCloud.

[alicanerdurmaz]

maybe we can change useSiderState name to useSider or useThemedSider.
with that name convention, we can add more features to this hook in the future.

@aliemir @BatuhanW @yildirayunlu what do you think?

[omeraplak]

it's a good idea

[salihozdemir]

useSiderState has more predictable than useSider or useThemedSider. I mean, the users can better know what the useSiderState hook does.

If we want to change the name to add something in the future we can do something more generic like useLayoutContext.

[aliemir]

Agree with @salihozdemir, useSiderState is more descriptive than useSider or useThemedSider which looks more like useMenu or useBreadcrumb and users might confuse them with useMenu.

We can call it useThemedLayoutContext, which matches with the name of the context as well (ThemedLayoutContext).

[aliemir]

General

• We've resolved the inconsistency issues throughout the UI packages
• State values are renamed properly and usable through the new hook
• Old values are deprecated but still functioning
• Implemented the useThemedLayoutContext hook.

@refinedev/antd

• Context is updated and uses the new names for the states.
• Old values are deprecated but aligned with the new state values.
• Users with swizzled siders can keep using without breaking changes + no need to update the variables if they don't want to.
• Users with swizzled layout can keep using the old context provider component without breaking changes or any need for an update. This means the initialSiderCollapsed still works as expected.
• Users can use new values and adjust their components to use them with no issues.
• We've updated the examples with the new hook and the new values.
• The old hooks is still working but deprecated.

@refinedev/mui

• Context is updated and uses the new names for the states.
• Old values are deprecated but aligned with the new state values.
• Users with swizzled siders can keep using without breaking changes + no need to update the variables if they don't want to.
• Users with swizzled layout can keep using the old context provider component without breaking changes or any need for an update. This means the initialSiderCollapsed still works as expected.
• Users can use new values and adjust their components to use them with no issues.
• We've updated the examples with the new hook and the new values.
• The old hooks is still working but deprecated.

@refinedev/chakra-ui

• Context is updated and uses the new names for the states.
• Old values are deprecated but aligned with the new state values.
• Users with swizzled siders can keep using without breaking changes + no need to update the variables if they don't want to.
• Users with swizzled layout can keep using the old context provider component without breaking changes or any need for an update. This means the initialSiderCollapsed still works as expected.
• Users can use new values and adjust their components to use them with no issues.
• We've updated the examples with the new hook and the new values.
• The old hooks is still working but deprecated.

@refinedev/mantine

• Context is updated and uses the new names for the states.
• Old values are deprecated but aligned with the new state values.
• Users with swizzled siders can keep using without breaking changes + no need to update the variables if they don't want to.
• Users with swizzled layout can keep using the old context provider component without breaking changes or any need for an update. This means the initialSiderCollapsed still works as expected.
• Users can use new values and adjust their components to use them with no issues.
• We've updated the examples with the new hook and the new values.
• The old hooks is still working but deprecated.

---

@salihozdemir Let's use the above checklist to make sure we're good to go.