From 759a5e4852814067b59d34d6466e843ca30eda73 Mon Sep 17 00:00:00 2001
From: mikewegele <mike.wegele@iav.de>
Date: Fri, 15 Nov 2024 08:42:31 +0100
Subject: [PATCH 1/2] bug: fix regex expression

---
 example/package-lock.json                     |   7 +-
 example/src/Layout.tsx                        |   4 +-
 package.json                                  |   1 +
 .../tabs/simpleNavbarTab/simpleNavbarTab.tsx  | 262 +++++++++---------
 4 files changed, 131 insertions(+), 143 deletions(-)

diff --git a/example/package-lock.json b/example/package-lock.json
index 57a689d8..017b5ea5 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -33,7 +33,7 @@
     },
     "../build": {
       "name": "@iavofficial/frontend-framework",
-      "version": "0.1.0",
+      "version": "1.1.0",
       "license": "Apache-2.0",
       "dependencies": {
         "i18next": "^22.4.13",
@@ -61,14 +61,9 @@
         "@types/node": "^18.15.5",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
-        "@typescript-eslint/eslint-plugin": "^8.6.0",
-        "@typescript-eslint/parser": "^8.6.0",
         "aws-amplify": "^6.3.4",
         "babel-plugin-inline-react-svg": "^2.0.2",
         "conventional-changelog-conventionalcommits": "^8.0.0",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react": "^7.36.1",
-        "eslint-plugin-react-hooks": "^4.6.2",
         "jest": "^29.7.0",
         "prettier": "^3.3.2",
         "semantic-release": "^24.1.0",
diff --git a/example/src/Layout.tsx b/example/src/Layout.tsx
index 140f22fd..575166e2 100644
--- a/example/src/Layout.tsx
+++ b/example/src/Layout.tsx
@@ -59,7 +59,7 @@ function Layout() {
 
     const views = [
         new BasicContentWrapper(
-            "/example1/",
+            "/",
             simpleNavbarTabFactory({
                 disabled: false,
                 name: "Example without Translation",
@@ -226,7 +226,7 @@ function Layout() {
     return (
         <UILayer
             tabAndContentWrappers={views}
-            startingPoint="/example1/"
+            startingPoint="/"
             authenticationView={BasicAuthenticationView}
             settingsMenuOptions={settingsMenuOptions}
             documentsLabelKey="Legal_documents"
diff --git a/package.json b/package.json
index 8276cad8..d41b1e5d 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   ],
   "scripts": {
     "devmode": "./scripts/windows/devmode_build.bat",
+    "devmode:windows": ".\\scripts\\windows\\devmode_build.bat",
     "build": "tsc --build --clean && tsc --build && npx babel ./src --out-dir ./build --extensions .ts,.tsx --copy-files",
     "test": "jest --passWithNoTests",
     "run-example": "./scripts/windows/setup_and_run_example.bat",
diff --git a/src/components/navbar/tabs/simpleNavbarTab/simpleNavbarTab.tsx b/src/components/navbar/tabs/simpleNavbarTab/simpleNavbarTab.tsx
index f6403b96..3e4938b8 100644
--- a/src/components/navbar/tabs/simpleNavbarTab/simpleNavbarTab.tsx
+++ b/src/components/navbar/tabs/simpleNavbarTab/simpleNavbarTab.tsx
@@ -24,146 +24,138 @@ import {GroupableNavbarTab, NavbarTabProps} from "../typesNavbarTab";
 import {ColorSettingsContext} from "../../../../contexts/colorsettings";
 import {SimpleNavbarTabCollapsed} from "./simpleNavbarTabCollapsed";
 import {SimpleNavbarTabUnfolded} from "./simpleNavbarTabUnfolded";
-import {
-  determineCurrentColor,
-  determineCurrentColorInsideGroup,
-} from "../../../../utils/determineCurrentColor";
-import {
-  DEFAULT_ELEMENTSIZE,
-  GAB_NAVBAR_UNFOLDED,
-  NAVBAR_WIDTH_UNFOLDED,
-} from "../../../../constants";
+import {determineCurrentColor, determineCurrentColorInsideGroup,} from "../../../../utils/determineCurrentColor";
+import {DEFAULT_ELEMENTSIZE, GAB_NAVBAR_UNFOLDED, NAVBAR_WIDTH_UNFOLDED,} from "../../../../constants";
 import {InjectedOptionsGroupableByWrapperToTab} from "../../types/typesInjectedOptions";
 
 export interface NestedNavbarTabProps {
-  additionalClassNames: string;
-  setHovering: (state: boolean) => void;
-  style: object;
-  iconColor: string;
-  name: string;
-  icon?: ReactElement;
+    additionalClassNames: string;
+    setHovering: (state: boolean) => void;
+    style: object;
+    iconColor: string;
+    name: string;
+    icon?: ReactElement;
 }
 
 export const SimpleNavbarTab: GroupableNavbarTab = (
-  props: NavbarTabProps<InjectedOptionsGroupableByWrapperToTab> & {},
+    props: NavbarTabProps<InjectedOptionsGroupableByWrapperToTab> & {},
 ) => {
-  const navbarCollapsed = props.frameworkInjectedOptions.navbarCollapsed;
-  const path = props.frameworkInjectedOptions.path;
-  const insideActiveGroup = props.frameworkInjectedOptions.groupActive;
-
-  const [hovering, setHovering] = useState(false);
-  const colorSettingsContext = useContext(ColorSettingsContext);
-  const t = useTranslator();
-
-  // Use useMemo to improve performance.
-  const regex = useMemo(() => {
-    let regexString = path;
-    // Escape all slashes
-    regexString = regexString.replaceAll("/", "\\/");
-    // Add ^ to match the beginning of the path. Add * for allowing other characters.
-    regexString = `^${regexString}.*`;
-    return new RegExp(regexString);
-  }, [path]);
-
-  const active = regex.test(useLocation().pathname);
-
-  const tabBackgroundDefaultColor =
-    colorSettingsContext.currentColors.navbar.content.default
-      .tabBackgroundDefaultColor;
-  const tabBackgroundHoverColor =
-    colorSettingsContext.currentColors.navbar.content.hover
-      .tabBackgroundHoverColor;
-  const tabBackgroundActiveColor =
-    colorSettingsContext.currentColors.navbar.content.active
-      .tabBackgroundActiveColor;
-  const insideActiveGroupColor =
-    colorSettingsContext.currentColors.navbar.content.insideActiveGroupColor;
-
-  const fontDefaultColor =
-    colorSettingsContext.currentColors.navbar.content.default
-      .tabFontDefaultColor;
-  const fontHoverColor =
-    colorSettingsContext.currentColors.navbar.content.hover.tabFontHoverColor;
-  const fontActiveColor =
-    colorSettingsContext.currentColors.navbar.content.active.tabFontActiveColor;
-
-  const iconDefaultColor =
-    colorSettingsContext.currentColors.navbar.content.default
-      .tabIconDefaultColor;
-  const iconHoverColor =
-    colorSettingsContext.currentColors.navbar.content.hover.tabIconHoverColor;
-  const iconActiveColor =
-    colorSettingsContext.currentColors.navbar.content.active.tabIconActiveColor;
-
-  const tabState = {
-    isActive: active,
-    isHovering: hovering,
-    isDisabled: props.disabled,
-    isInsideActiveGroup: insideActiveGroup,
-  };
-
-  const backgroundColor = determineCurrentColorInsideGroup(tabState, {
-    activeColor: tabBackgroundActiveColor,
-    hoverColor: tabBackgroundHoverColor,
-    defaultColor: tabBackgroundDefaultColor,
-    insideActiveGroupColor: insideActiveGroupColor,
-  });
-
-  const fontColor = determineCurrentColor(tabState, {
-    activeColor: fontActiveColor,
-    hoverColor: fontHoverColor,
-    defaultColor: fontDefaultColor,
-  });
-
-  const iconColor = determineCurrentColor(tabState, {
-    defaultColor: iconDefaultColor,
-    hoverColor: iconHoverColor,
-    activeColor: iconActiveColor,
-  });
-
-  const tabStyleDefault = {
-    width: navbarCollapsed
-      ? `${DEFAULT_ELEMENTSIZE}px`
-      : `${NAVBAR_WIDTH_UNFOLDED - 2 * GAB_NAVBAR_UNFOLDED}px`,
-    cursor: active || props.disabled ? "default" : "pointer",
-    backgroundColor: backgroundColor,
-    color: fontColor,
-    opacity: props.disabled ? 0.5 : 1,
-  };
-
-  const additionalClassNames = !insideActiveGroup ? "navbar-tab-space" : "";
-
-  const nestedProps = {
-    style: tabStyleDefault,
-    setHovering: setHovering,
-    icon: props.icon,
-    name: props.name instanceof Function ? props.name(t) : props.name,
-    additionalClassNames: additionalClassNames,
-    iconColor: iconColor,
-  };
-
-  const navbarTab = navbarCollapsed ? (
-    <SimpleNavbarTabCollapsed {...nestedProps} />
-  ) : (
-    <SimpleNavbarTabUnfolded {...nestedProps} />
-  );
-
-  const styleHidden = props.hidden ? {display: "none"} : {};
-
-  return (
-    <div style={styleHidden}>
-      {props.disabled ? (
-        <>{navbarTab}</>
-      ) : (
-        <Link
-          style={{
-            textDecoration: "none",
-          }}
-          to={path}
-        >
-          {navbarTab}
-        </Link>
-      )}
-    </div>
-  );
+    const navbarCollapsed = props.frameworkInjectedOptions.navbarCollapsed;
+    const path = props.frameworkInjectedOptions.path;
+    const insideActiveGroup = props.frameworkInjectedOptions.groupActive;
+
+    const [hovering, setHovering] = useState(false);
+    const colorSettingsContext = useContext(ColorSettingsContext);
+    const t = useTranslator();
+
+    const regex = useMemo(() => {
+        let regexString = path;
+        // Escape slashes
+        regexString = regexString.replaceAll("/", "\\/");
+        // Add start (^) and boundary condition with trailing /.*
+        regexString = `^${regexString}(\\/.*)?$`;
+        return new RegExp(regexString);
+    }, [path]);
+
+    const active = regex.test(useLocation().pathname);
+
+    const tabBackgroundDefaultColor =
+        colorSettingsContext.currentColors.navbar.content.default
+            .tabBackgroundDefaultColor;
+    const tabBackgroundHoverColor =
+        colorSettingsContext.currentColors.navbar.content.hover
+            .tabBackgroundHoverColor;
+    const tabBackgroundActiveColor =
+        colorSettingsContext.currentColors.navbar.content.active
+            .tabBackgroundActiveColor;
+    const insideActiveGroupColor =
+        colorSettingsContext.currentColors.navbar.content.insideActiveGroupColor;
+
+    const fontDefaultColor =
+        colorSettingsContext.currentColors.navbar.content.default
+            .tabFontDefaultColor;
+    const fontHoverColor =
+        colorSettingsContext.currentColors.navbar.content.hover.tabFontHoverColor;
+    const fontActiveColor =
+        colorSettingsContext.currentColors.navbar.content.active.tabFontActiveColor;
+
+    const iconDefaultColor =
+        colorSettingsContext.currentColors.navbar.content.default
+            .tabIconDefaultColor;
+    const iconHoverColor =
+        colorSettingsContext.currentColors.navbar.content.hover.tabIconHoverColor;
+    const iconActiveColor =
+        colorSettingsContext.currentColors.navbar.content.active.tabIconActiveColor;
+
+    const tabState = {
+        isActive: active,
+        isHovering: hovering,
+        isDisabled: props.disabled,
+        isInsideActiveGroup: insideActiveGroup,
+    };
+
+    const backgroundColor = determineCurrentColorInsideGroup(tabState, {
+        activeColor: tabBackgroundActiveColor,
+        hoverColor: tabBackgroundHoverColor,
+        defaultColor: tabBackgroundDefaultColor,
+        insideActiveGroupColor: insideActiveGroupColor,
+    });
+
+    const fontColor = determineCurrentColor(tabState, {
+        activeColor: fontActiveColor,
+        hoverColor: fontHoverColor,
+        defaultColor: fontDefaultColor,
+    });
+
+    const iconColor = determineCurrentColor(tabState, {
+        defaultColor: iconDefaultColor,
+        hoverColor: iconHoverColor,
+        activeColor: iconActiveColor,
+    });
+
+    const tabStyleDefault = {
+        width: navbarCollapsed
+            ? `${DEFAULT_ELEMENTSIZE}px`
+            : `${NAVBAR_WIDTH_UNFOLDED - 2 * GAB_NAVBAR_UNFOLDED}px`,
+        cursor: active || props.disabled ? "default" : "pointer",
+        backgroundColor: backgroundColor,
+        color: fontColor,
+        opacity: props.disabled ? 0.5 : 1,
+    };
+
+    const additionalClassNames = !insideActiveGroup ? "navbar-tab-space" : "";
+
+    const nestedProps = {
+        style: tabStyleDefault,
+        setHovering: setHovering,
+        icon: props.icon,
+        name: props.name instanceof Function ? props.name(t) : props.name,
+        additionalClassNames: additionalClassNames,
+        iconColor: iconColor,
+    };
+
+    const navbarTab = navbarCollapsed ? (
+        <SimpleNavbarTabCollapsed {...nestedProps} />
+    ) : (
+        <SimpleNavbarTabUnfolded {...nestedProps} />
+    );
+
+    const styleHidden = props.hidden ? {display: "none"} : {};
+
+    return (
+        <div style={styleHidden}>
+            {props.disabled ? (
+                <>{navbarTab}</>
+            ) : (
+                <Link
+                    style={{
+                        textDecoration: "none",
+                    }}
+                    to={path}
+                >
+                    {navbarTab}
+                </Link>
+            )}
+        </div>
+    );
 };

From 5af71b940abbd39fd596a91f9947dde610cd8ca3 Mon Sep 17 00:00:00 2001
From: mikewegele <mike.wegele@iav.de>
Date: Mon, 18 Nov 2024 12:56:10 +0100
Subject: [PATCH 2/2] npm run format

---
 .../tabs/simpleNavbarTab/simpleNavbarTab.tsx  | 261 +++++++++---------
 1 file changed, 134 insertions(+), 127 deletions(-)

diff --git a/src/components/navbar/tabs/simpleNavbarTab/simpleNavbarTab.tsx b/src/components/navbar/tabs/simpleNavbarTab/simpleNavbarTab.tsx
index 3e4938b8..b0d475d5 100644
--- a/src/components/navbar/tabs/simpleNavbarTab/simpleNavbarTab.tsx
+++ b/src/components/navbar/tabs/simpleNavbarTab/simpleNavbarTab.tsx
@@ -24,138 +24,145 @@ import {GroupableNavbarTab, NavbarTabProps} from "../typesNavbarTab";
 import {ColorSettingsContext} from "../../../../contexts/colorsettings";
 import {SimpleNavbarTabCollapsed} from "./simpleNavbarTabCollapsed";
 import {SimpleNavbarTabUnfolded} from "./simpleNavbarTabUnfolded";
-import {determineCurrentColor, determineCurrentColorInsideGroup,} from "../../../../utils/determineCurrentColor";
-import {DEFAULT_ELEMENTSIZE, GAB_NAVBAR_UNFOLDED, NAVBAR_WIDTH_UNFOLDED,} from "../../../../constants";
+import {
+  determineCurrentColor,
+  determineCurrentColorInsideGroup,
+} from "../../../../utils/determineCurrentColor";
+import {
+  DEFAULT_ELEMENTSIZE,
+  GAB_NAVBAR_UNFOLDED,
+  NAVBAR_WIDTH_UNFOLDED,
+} from "../../../../constants";
 import {InjectedOptionsGroupableByWrapperToTab} from "../../types/typesInjectedOptions";
 
 export interface NestedNavbarTabProps {
-    additionalClassNames: string;
-    setHovering: (state: boolean) => void;
-    style: object;
-    iconColor: string;
-    name: string;
-    icon?: ReactElement;
+  additionalClassNames: string;
+  setHovering: (state: boolean) => void;
+  style: object;
+  iconColor: string;
+  name: string;
+  icon?: ReactElement;
 }
 
 export const SimpleNavbarTab: GroupableNavbarTab = (
-    props: NavbarTabProps<InjectedOptionsGroupableByWrapperToTab> & {},
+  props: NavbarTabProps<InjectedOptionsGroupableByWrapperToTab> & {},
 ) => {
-    const navbarCollapsed = props.frameworkInjectedOptions.navbarCollapsed;
-    const path = props.frameworkInjectedOptions.path;
-    const insideActiveGroup = props.frameworkInjectedOptions.groupActive;
-
-    const [hovering, setHovering] = useState(false);
-    const colorSettingsContext = useContext(ColorSettingsContext);
-    const t = useTranslator();
-
-    const regex = useMemo(() => {
-        let regexString = path;
-        // Escape slashes
-        regexString = regexString.replaceAll("/", "\\/");
-        // Add start (^) and boundary condition with trailing /.*
-        regexString = `^${regexString}(\\/.*)?$`;
-        return new RegExp(regexString);
-    }, [path]);
-
-    const active = regex.test(useLocation().pathname);
-
-    const tabBackgroundDefaultColor =
-        colorSettingsContext.currentColors.navbar.content.default
-            .tabBackgroundDefaultColor;
-    const tabBackgroundHoverColor =
-        colorSettingsContext.currentColors.navbar.content.hover
-            .tabBackgroundHoverColor;
-    const tabBackgroundActiveColor =
-        colorSettingsContext.currentColors.navbar.content.active
-            .tabBackgroundActiveColor;
-    const insideActiveGroupColor =
-        colorSettingsContext.currentColors.navbar.content.insideActiveGroupColor;
-
-    const fontDefaultColor =
-        colorSettingsContext.currentColors.navbar.content.default
-            .tabFontDefaultColor;
-    const fontHoverColor =
-        colorSettingsContext.currentColors.navbar.content.hover.tabFontHoverColor;
-    const fontActiveColor =
-        colorSettingsContext.currentColors.navbar.content.active.tabFontActiveColor;
-
-    const iconDefaultColor =
-        colorSettingsContext.currentColors.navbar.content.default
-            .tabIconDefaultColor;
-    const iconHoverColor =
-        colorSettingsContext.currentColors.navbar.content.hover.tabIconHoverColor;
-    const iconActiveColor =
-        colorSettingsContext.currentColors.navbar.content.active.tabIconActiveColor;
-
-    const tabState = {
-        isActive: active,
-        isHovering: hovering,
-        isDisabled: props.disabled,
-        isInsideActiveGroup: insideActiveGroup,
-    };
-
-    const backgroundColor = determineCurrentColorInsideGroup(tabState, {
-        activeColor: tabBackgroundActiveColor,
-        hoverColor: tabBackgroundHoverColor,
-        defaultColor: tabBackgroundDefaultColor,
-        insideActiveGroupColor: insideActiveGroupColor,
-    });
-
-    const fontColor = determineCurrentColor(tabState, {
-        activeColor: fontActiveColor,
-        hoverColor: fontHoverColor,
-        defaultColor: fontDefaultColor,
-    });
-
-    const iconColor = determineCurrentColor(tabState, {
-        defaultColor: iconDefaultColor,
-        hoverColor: iconHoverColor,
-        activeColor: iconActiveColor,
-    });
-
-    const tabStyleDefault = {
-        width: navbarCollapsed
-            ? `${DEFAULT_ELEMENTSIZE}px`
-            : `${NAVBAR_WIDTH_UNFOLDED - 2 * GAB_NAVBAR_UNFOLDED}px`,
-        cursor: active || props.disabled ? "default" : "pointer",
-        backgroundColor: backgroundColor,
-        color: fontColor,
-        opacity: props.disabled ? 0.5 : 1,
-    };
-
-    const additionalClassNames = !insideActiveGroup ? "navbar-tab-space" : "";
-
-    const nestedProps = {
-        style: tabStyleDefault,
-        setHovering: setHovering,
-        icon: props.icon,
-        name: props.name instanceof Function ? props.name(t) : props.name,
-        additionalClassNames: additionalClassNames,
-        iconColor: iconColor,
-    };
-
-    const navbarTab = navbarCollapsed ? (
-        <SimpleNavbarTabCollapsed {...nestedProps} />
-    ) : (
-        <SimpleNavbarTabUnfolded {...nestedProps} />
-    );
-
-    const styleHidden = props.hidden ? {display: "none"} : {};
-
-    return (
-        <div style={styleHidden}>
-            {props.disabled ? (
-                <>{navbarTab}</>
-            ) : (
-                <Link
-                    style={{
-                        textDecoration: "none",
-                    }}
-                    to={path}
-                >
-                    {navbarTab}
-                </Link>
-            )}
-        </div>
-    );
+  const navbarCollapsed = props.frameworkInjectedOptions.navbarCollapsed;
+  const path = props.frameworkInjectedOptions.path;
+  const insideActiveGroup = props.frameworkInjectedOptions.groupActive;
+
+  const [hovering, setHovering] = useState(false);
+  const colorSettingsContext = useContext(ColorSettingsContext);
+  const t = useTranslator();
+
+  const regex = useMemo(() => {
+    let regexString = path;
+    // Escape slashes
+    regexString = regexString.replaceAll("/", "\\/");
+    // Add start (^) and boundary condition with trailing /.*
+    regexString = `^${regexString}(\\/.*)?$`;
+    return new RegExp(regexString);
+  }, [path]);
+
+  const active = regex.test(useLocation().pathname);
+
+  const tabBackgroundDefaultColor =
+    colorSettingsContext.currentColors.navbar.content.default
+      .tabBackgroundDefaultColor;
+  const tabBackgroundHoverColor =
+    colorSettingsContext.currentColors.navbar.content.hover
+      .tabBackgroundHoverColor;
+  const tabBackgroundActiveColor =
+    colorSettingsContext.currentColors.navbar.content.active
+      .tabBackgroundActiveColor;
+  const insideActiveGroupColor =
+    colorSettingsContext.currentColors.navbar.content.insideActiveGroupColor;
+
+  const fontDefaultColor =
+    colorSettingsContext.currentColors.navbar.content.default
+      .tabFontDefaultColor;
+  const fontHoverColor =
+    colorSettingsContext.currentColors.navbar.content.hover.tabFontHoverColor;
+  const fontActiveColor =
+    colorSettingsContext.currentColors.navbar.content.active.tabFontActiveColor;
+
+  const iconDefaultColor =
+    colorSettingsContext.currentColors.navbar.content.default
+      .tabIconDefaultColor;
+  const iconHoverColor =
+    colorSettingsContext.currentColors.navbar.content.hover.tabIconHoverColor;
+  const iconActiveColor =
+    colorSettingsContext.currentColors.navbar.content.active.tabIconActiveColor;
+
+  const tabState = {
+    isActive: active,
+    isHovering: hovering,
+    isDisabled: props.disabled,
+    isInsideActiveGroup: insideActiveGroup,
+  };
+
+  const backgroundColor = determineCurrentColorInsideGroup(tabState, {
+    activeColor: tabBackgroundActiveColor,
+    hoverColor: tabBackgroundHoverColor,
+    defaultColor: tabBackgroundDefaultColor,
+    insideActiveGroupColor: insideActiveGroupColor,
+  });
+
+  const fontColor = determineCurrentColor(tabState, {
+    activeColor: fontActiveColor,
+    hoverColor: fontHoverColor,
+    defaultColor: fontDefaultColor,
+  });
+
+  const iconColor = determineCurrentColor(tabState, {
+    defaultColor: iconDefaultColor,
+    hoverColor: iconHoverColor,
+    activeColor: iconActiveColor,
+  });
+
+  const tabStyleDefault = {
+    width: navbarCollapsed
+      ? `${DEFAULT_ELEMENTSIZE}px`
+      : `${NAVBAR_WIDTH_UNFOLDED - 2 * GAB_NAVBAR_UNFOLDED}px`,
+    cursor: active || props.disabled ? "default" : "pointer",
+    backgroundColor: backgroundColor,
+    color: fontColor,
+    opacity: props.disabled ? 0.5 : 1,
+  };
+
+  const additionalClassNames = !insideActiveGroup ? "navbar-tab-space" : "";
+
+  const nestedProps = {
+    style: tabStyleDefault,
+    setHovering: setHovering,
+    icon: props.icon,
+    name: props.name instanceof Function ? props.name(t) : props.name,
+    additionalClassNames: additionalClassNames,
+    iconColor: iconColor,
+  };
+
+  const navbarTab = navbarCollapsed ? (
+    <SimpleNavbarTabCollapsed {...nestedProps} />
+  ) : (
+    <SimpleNavbarTabUnfolded {...nestedProps} />
+  );
+
+  const styleHidden = props.hidden ? {display: "none"} : {};
+
+  return (
+    <div style={styleHidden}>
+      {props.disabled ? (
+        <>{navbarTab}</>
+      ) : (
+        <Link
+          style={{
+            textDecoration: "none",
+          }}
+          to={path}
+        >
+          {navbarTab}
+        </Link>
+      )}
+    </div>
+  );
 };