solution-center-header
Advanced tools
Reusable header for software connecting to the Zalando Solution Center
Install via bower or npm
bower install solution-center-header
npm install solution-center-header
Load the script in your <head>:
<script src="../bower_components/solution-center-header/dist/solutioncenter.header.js"></script>
<!-- OR -->
<script src="../node_modules/solution-center-header/dist/solutioncenter.header.js"></script>
Include the solutioncenter.header module as a dependency in your app.
Insert the directive at the top of your app:
<sc-header
user="user"
modules="modules"
current-module="moduleId"
brand="brand"
logout="logout()"
solution-center-url="url">
</sc-header>
###Parameters
The following parameters are required for the header to work as expected.
user: A user object. Controls the display of the user name with submenu allowing access to a user account pages. Additionally it's used for determining whether the brand switcher is shown, based on the number of merchants the user has access to.
user = { firstName: "John", lastName: "Doe", merchants: [1, 34, 76] }
modules: An array of module objects. Controls the display of the navigation with links to modules that the user has permission to access.
modules = [ { name: "name", url: "example.com" },
{ name: "name", url: "example.com" } ]
current-module: A number representing the id of the current module displayed, in order to highlight it in the header
current-module = 0
The following parameters are optional, allowing further customization of the header.
brand: A brand object. Controls the display of the brand switcher with a submenu allowing access to the brand page and switching to another brand.
brand = { name: "name", id: 1 }
logout: A function that is called when a user clicks the logout link.
logout = function () {
// handle logout
}
solution-center-url: A URL override for the solution center. This URL is used to construct the links for the user account, brand account, and brand switcher pages. The URL should have a trailing /#/. If no URL is provided, the solution center production URL is used by default.
solution-center-url = "https://www.example.com/#/"
debug-config: Configuration object for debugging purposes
debug-config = "{ showFeature: true }"
The solution center header is intended to be used with the dress code style. That package is included as a dependency.
Follow these steps to ensure you are using the right style for the header:
Follow the usage instructions for the dress code.
Load the header styles. Add this to your <head>:
<link rel="stylesheet" href="../bower_components/solution-center-header/dist/solutioncenter.header.css">
Or for NPM:
<link rel="stylesheet" href="../node_modules/solution-center-header/dist/solutioncenter.header.css">
See the demo folder. To run the demo locally, follow the Develop instructions below.
Clone the repository, then run:
npm install
npm run dev: open the demo in a browser, watches for changes to trigger build, tests, and reloadnpm test: lint, build, and test the projectnpm run lint: lint source and spec filesnpm run clean: remove /dist directorynpm run build: lint and build the projectnpm run release [major|minor|patch]: release a new version of the header to npm and bowerMIT
You can check the new changes implemented in every version in the changelog
FAQs
Reusable header for the Zalando Solution Center
The npm package solution-center-header receives a total of 33 weekly downloads. As such, solution-center-header popularity was classified as not popular.
We found that solution-center-header demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Security experts warn that recent classification changes obscure the true scope of the NVD backlog as CVE volume hits all-time highs.
Security Fundamentals
Attackers use obfuscation to hide malware in open source packages. Learn how to spot these techniques across npm, PyPI, Maven, and more.
Security News
Join Socket for exclusive networking events, rooftop gatherings, and one-on-one meetings during BSidesSF and RSA 2025 in San Francisco.