LayoutGridMenuTopLeft

Este componente combina el diseño de menú superior y el menú lateral izquierdo, permitiendo una estructura flexible para mostrar contenido, alertas y un indicador de progreso de página.

Ejemplo

Importación

Para importar el componente LayoutGridMenuTopLeft, se puede hacer desde fenextjs

import { LayoutGridMenuTopLeft } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
useAlertHook	boolean	no	true	Indica si se debe renderizar el componente de alerta (AlertHook).
alertHookProps	AlertHookProps	no	{}	Propiedades para el componente AlertHook.
loader	boolean	no	false	Indica si la página está en estado de carga, mostrando un indicador de carga.
menuTop	ReactNode	no	undefined	Elemento del menú superior dentro del layout.
menuLeft	ReactNode	no	undefined	Elemento del menú lateral izquierdo dentro del layout.
menuLeftActive	boolean	no	true	Indica si el menú lateral izquierdo está activo.
menuLeftMovilActive	boolean	no	false	Indica si el menú lateral izquierdo está activo en dispositivos móviles.
useHeaderButtonMenu	boolean	no	false	Indica si el botón del menú en el header está habilitado.
usePageProgress	boolean	no	true	Indica si se debe mostrar la barra de progreso de la página.
className	string	no	''	Clase CSS personalizada para el contenedor del layout.
classNameLoader	string	no	''	Clase CSS personalizada para el indicador de carga.
classNameChildren	string	no	''	Clase CSS personalizada para el contenido de los hijos.
classNameMenuTop	string	no	''	Clase CSS personalizada para el menú superior.
classNameMenuLeft	string	no	''	Clase CSS personalizada para el menú lateral izquierdo.
classNameMenuLeftContent	string	no	''	Clase CSS personalizada para el contenido del menú lateral izquierdo.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Básico

<LayoutGridMenuTopLeft />

Con menú superior y lateral

<LayoutGridMenuTopLeft
  menuTop={<div>Menú Top</div>}
  menuLeft={<div>Menú Izquierdo</div>}
/>

Con barra de progreso deshabilitada

<LayoutGridMenuTopLeft usePageProgress={false} />

Con alertas personalizadas

<LayoutGridMenuTopLeft
  useAlertHook={true}
  alertHookProps={{ message: "Alerta" }}
/>

Gridmenutop Current