Skip to content
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

Jump to bottom

Fixed top navbar to align with the website new design (icon and dropdown arrows) #174

Merged
merged 6 commits into from
Nov 16, 2023
Merged

Fixed top navbar to align with the website new design (icon and dropdown arrows) #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
36d6ea3
menu was overlpaing the logo on low resolution
nir2002 Apr 16, 2023
12e933e
Merge branch 'main' of https://github.com/otterize/docs
nir2002 Apr 17, 2023
48f6b98
Merge branch 'main' of https://github.com/otterize/docs
nir2002 Nov 1, 2023
341b575
Merge branch 'main' of https://github.com/otterize/docs
nir2002 Nov 9, 2023
c31ecbb
Merge branch 'main' of https://github.com/otterize/docs
nir2002 Nov 14, 2023
4533995
navbar is now aligned to the website new design
nir2002 Nov 15, 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
9 changes: 6 additions & 3 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,8 @@ const getNavDropdownItem = ({label, icon, description}) => `
</div>
</div>
`

const dropdownChevron = `<div class='tw-flex'><img src='/img/menu/chevron-down.svg' class='group-hover:tw-hidden'/><img src='/img/menu/chevron-up.svg' class='tw-hidden group-hover:tw-block'/></div>`
/** Components - End */


Expand Down Expand Up @@ -126,6 +128,7 @@ const config = {
},
scripts: [
{ src: "/newsLetterSubscription.js", async: true },
{ src: "/ui.js", async: true },
{ src: "/pixels.js", async: true },
],
plugins: [
Expand Down Expand Up @@ -242,7 +245,7 @@ const config = {
{
type: "dropdown",
position: "left",
html: "<div class='tw-inline tw-font-normal tw-text-base'>Platform</div>",
html: `<div id='platform-navbar-item' class='tw-flex tw-font-normal tw-text-base tw-group'>Platform${dropdownChevron}</div>`,
items: [
{
href: "https://otterize.com/open-source",
Expand Down Expand Up @@ -271,7 +274,7 @@ const config = {
{
type: "dropdown",
position: "left",
html: "<div class='tw-inline tw-font-normal tw-text-base'>Learn</div>",
html: `<div id='learn-navbar-item' class='tw-flex tw-font-normal tw-text-base tw-group'>Learn${dropdownChevron}</div>`,
items: [
{
href: "https://otterize.com/blog",
Expand All @@ -285,7 +288,7 @@ const config = {
},
{
href: "https://otterize.com/team",
html: getNavDropdownItem({label: 'Our Story', icon: "resources-menu", description: "Dive into our company’s mission, our philosophy, and the team that makes it all possible."}),
html: getNavDropdownItem({label: 'Our Story', icon: "philosophy-menu", description: "Dive into our company’s mission, our philosophy, and the team that makes it all possible."}),
target: "_self",
},
],
Expand Down
5 changes: 5 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,3 +372,8 @@ footer .container-fluid {
}

}

/* Removes the default dropdown arrow */
.dropdown > .navbar__link:after {
display: none;
}
16 changes: 16 additions & 0 deletions static/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
window.addEventListener("load", () => {
/** Helper function to apply tw-group to the parent element so it will hold the chevron effect when hovering the menu subitems */
function setDropdownGroupModifier(childElementId) {
const childElement = document.getElementById(childElementId);
if (childElement) {
const dropdownContainer = childElement.parentElement.parentElement;
if (dropdownContainer && dropdownContainer.classList.contains('dropdown--hoverable')) {
dropdownContainer.classList.add("tw-group");
}
}
}

setDropdownGroupModifier("learn-navbar-item");;
setDropdownGroupModifier("platform-navbar-item");;

});
Loading