Navbar bug fix

[ct-nensy]

Commit Checklist

• Remove UNUSED comment code
• Remove any logging like console.log
• Remove all warnings and errors while build
• Check vulnerabilities
• Make sure build for production is working. Try running command for prod build in local.
• Fix prettier: npx prettier --write .
• Fix eslint: npx eslint src\ --fix command
• Push package.lock only if you used npm, push yarn.lock only if you used yarn. NPM will udpate both lock file so make sure you dont push yarn.lock updated by NPM
• WCAG

General

• Follow import structure. module/third-party/files/component/style/types/asset
• Try to use theme for design like palette, typography, variant, components, etc. (don't use custom color code anyhow)
• Before adding custom style follow our pre-built components/elements

[phoenixcoded20]

{
"file": "src/app/theme/layout/admin/admin.component.ts",
"approved": false,

"issues": [
{
"type": "bug",
"severity": "medium",
"description": "The logic in the navMobClick method has a bug where it toggles this.navCollapsedMob twice without a clear intent. This can lead to unexpected behavior in the navigation state.",
"recommendedFix": "Ensure the navigation state is toggled only once per click and state changes are consistently applied.",
"codeFix": "typescript\n navMobClick() {\n const navbar = document.querySelector('app-navigation.pcoded-navbar');\n if (this.navCollapsedMob && !navbar.classList.contains('mob-open')) {\n navbar.classList.add('mob-open');\n } else {\n navbar.classList.remove('mob-open');\n }\n this.navCollapsedMob = !this.navCollapsedMob;\n }\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layout/admin/nav-bar/nav-bar.component.ts",
"approved": false,

"issues": [
{
"type": "bug",
"severity": "medium",
"description": "The property 'NavCollapsedMob' is incorrectly instantiated using 'output()' instead of 'new EventEmitter()'. This will cause an error when attempting to emit events.",
"recommendedFix": "Change the instantiation of 'NavCollapsedMob' from 'output()' to 'new EventEmitter()'.",
"codeFix": "readonly NavCollapsedMob = new EventEmitter();"
},
{
"type": "improvement",
"severity": "low",
"description": "'navCollapsedMob' is assigned a default value of 'false' but is not used effectively within the context since the class property is not updated elsewhere.",
"recommendedFix": "Consider removing the initialization from the constructor and ensure it's utilized correctly or document its intended use.",
"codeFix": "Remove the line 'this.navCollapsedMob = false;' from the constructor."
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Direct manipulation of the document object is generally discouraged in React. It can lead to unexpected behavior, especially regarding React's reconciliation process. Usage of refs or state for managing the DOM is preferred.",
"recommendedFix": "Consider using a ref to manage the element state and update the class accordingly instead of accessing the DOM directly.",
"codeFix": "const navbarRef = useRef(null);\n\nuseEffect(() => {\n if (navbarRef.current) {\n if (navbarRef.current.classList.contains('mob-open')) {\n navbarRef.current.classList.remove('mob-open');\n document.dispatchEvent(new Event('closeMobMenu'));\n }\n }\n}, []);\n\nreturn

...

;"
}
]
}