Customizing navigation bar through override extensibility

If you have use cases other than extending menu options with a differential approach, you can override the navigation bar.

Procedure

Copy the nav-bar folder from <store-temp>/packages/features/nav-bar to <store-temp>/extensions/features.
Rename the nav-bar folder to custom-nav-bar.

Replace the content of the package.json file at <store-temp>/extensions/features/custom-nav-bar with the following content.

{
"name": "@store-extensions/custom-nav-bar",
"version": "0.0.1",
"private": true,
"scripts": {
"ng": "ng",
"build-app:extension": "ng build custom-nav-bar --configuration production",
"view-stats": "ng build custom-nav-bar --configuration production --stats-json && npx webpack-bundle-analyzer ../../../dist/store-frontend/custom-nav-bar/stats.json",
"start-app": "ng serve --project custom-nav-bar"
},
"dependencies": {
}
}

Add the following entry for custom-nav-bar application in the angular.json file at <store-temp>/angular.json.

"custom-nav-bar": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "extensions/features/custom-nav-bar",
      "sourceRoot": "extensions/features/custom-nav-bar/src",
      "prefix": "isf",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/store-frontend/custom-nav-bar",
            "index": "extensions/features/custom-nav-bar/src/index.html",
            "main": "extensions/features/custom-nav-bar/src/main.single-spa.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "extensions/features/custom-nav-bar/tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "extensions/features/custom-nav-bar/src/favicon.ico",
              "extensions/features/custom-nav-bar/src/assets"
            ],
            "styles": [
              "extensions/features/custom-nav-bar/src/styles.scss"
            ],
            "scripts": [],
            "customWebpackConfig": {
              "path": "extra-webpack.config.js",
              "libraryName": "custom-nav-bar",
              "libraryTarget": "system"
            },
            "baseHref": "/isf/store-frontend/custom-nav-bar/",
            "preserveSymlinks": true
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "outputHashing": "none"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "outputHashing": "none"
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "custom-nav-bar:build:production"
            },
            "development": {
              "browserTarget": "custom-nav-bar:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "custom-nav-bar:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "extensions/features/custom-nav-bar/tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "extensions/features/custom-nav-bar/src/favicon.ico",
              "extensions/features/custom-nav-bar/src/assets"
            ],
            "styles": [
              "extensions/features/custom-nav-bar/src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "packages/features/custom-nav-bar/**/*.ts",
              "packages/features/custom-nav-bar/**/*.html"
            ]
          }
        }
      }
    }

Modify import-map.json to add an entry for custom-nav-bar at <store-temp>/extensions/override-static-assets/root-config/custom/import-map.json.
```
"custom-nav-bar": "/custom-nav-bar/main.js"
```
To configure that the nav-bar needs to be overridden, update the extension-config.json file at <store-temp>/extensions/override-static-assets/root-config/custom/extension-config.json.
```
{
     …. other config
      "navbar":{

              "extended" : true
        }
      …. other config
   }
```

Add the custom-nav-bar entry in the routes of the <store-temp>/app-config-overrides.json file.

"custom-nav-bar": {
      "useRemote": false,
      "devServerConfig": {
        "port": 6400,
        "contextRoot": "custom-nav-bar"
      }
    }

Modify AppComponent that is present in the <store-temp>/extensions/features/custom-nav-bar/src/app/ directory.
Verify that your changes are reflected in the navigation bar.
To locally verify the extended application-provided navigation bar, start the application by running the following command:
```
yarn start-app
```