Skip to content

fix. Doc update for custom Navbar #434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VeenaYemmiganur wants to merge 3 commits into
base: master
Choose a base branch
from
+32 −3
Open

fix. Doc update for custom Navbar #434

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01914c9
fix. Doc update for custom Navbar
VeenaYemmiganur May 19, 2023
bd751b9
fix. Review Changes
VeenaYemmiganur May 19, 2023
01822c9
chore(release): 2.12.2-navbar-doc-update.0
VeenaYemmiganur May 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion src/molecules/navbar/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,36 @@ export const NavbarBase = ({ config, theme }: NavbarTypes) => {
};

/**
* Navbar Component uses the PublisherLogoHeader, HamburgerMenu and Hamburger atomic components internally.
*
* Navbar Component by default uses the PublisherLogoHeader, HamburgerMenu and Hamburger atomic components internally.
* We can also render the customized navbar by passing the render prop navbarRender from the frontend inside app > server > app.js file under ampRoutes as shown below:
*
* ```javascript
* import React from "react";
* import { AMP } from "@quintype/amp";
* import { Layout, Head } = AMP;
* const CustomNavbar = ({ config, theme }) => (
* <Layout config={config} theme={theme} >
* <Head>
* <style>{`
* .customNavbar {
* width: 100%;
* height: 60px;
* position: relative;
* background-color: ${(props) => props.theme.color.headerBackground};
* }
* `}</style>
* </Head>
* <h1 className="customNavbar"> CUSTOM NAVBAR </h1>
* </Layout>
* )
* ...
* ...
* ampRoutes(app, {
* navbarRender: ({ config, theme }) => <CustomNavbar config={config} theme={theme} />
* })
* ...
*
*
* @param {Object} props Object containing parameters passed to the render prop
* @param {String} props.align Optional. A string of "right" or "left" which specifies the direction of the hamburger menu.
Expand Down