# tableberg/1.1.5/admin/src/components/Navigation.jsx

Tableberg – Simple Gutenberg Table Block, version 1.1.5. 48 lines.

- Page: https://pluginprobe.com/plugins/tableberg/1.1.5/code/admin/src/components/Navigation.jsx
- Raw: https://pluginprobe.com/plugins/tableberg/1.1.5/raw/admin/src/components/Navigation.jsx
- Modified: 2026-09-16T03:30:32+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/tableberg/1.1.5/code/admin/src/components/Navigation.jsx#L10-L20`.

```jsx
import React, { useEffect, useState } from "react";
import Route from "../inc/Route";
import NavigationHeaderButton from "./NavigationHeaderButton";

/**
 * Navigation component.
 *
 * @param {Object}        props                  component properties
 * @param {Array<Route>}  props.routes           routes array
 * @param {string | null} props.currentRoutePath current route path
 * @param {Function}      props.setRoute         set route path
 * @class
 */
function Navigation({ routes, currentRoutePath, setRoute }) {
    const [calculatedStyle, setCalculatedStyles] = useState({});

    /**
     * useEffect hook.
     */
    useEffect(() => {
        const style = {
            gridTemplateColumns: `repeat(${routes.length}, minmax(0,1fr))`,
        };
        setCalculatedStyles(style);
    }, [routes]);

    return (
        <div style={calculatedStyle} className={"tableberg-menu-navigation"}>
            {routes.map(routeObj => {
                return (
                    <NavigationHeaderButton
                        key={routeObj.getPath()}
                        title={routeObj.getTitle()}
                        targetPath={routeObj.getPath()}
                        isActive={currentRoutePath === routeObj.getPath()}
                        onClickHandler={setRoute}
                    />
                );
            })}
        </div>
    );
}

/**
 * @module Navigation
 */
export default Navigation;

```