Skip to content

Improve UI of navbar #101

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

Draft
yjrathod wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Improve UI of navbar #101

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
59 changes: 33 additions & 26 deletions opsimate-docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
--ifm-background-surface-color: #f8f9fa;
--ifm-font-color-base: #000000;
--ifm-heading-color: #1a237e;
--ifm-navbar-height: 5rem;
--ifm-navbar-link-hover-color: white;
--ifm-navbar-background-color: #000000;
--ifm-footer-background-color: #3949ab;
}
Expand Down Expand Up @@ -76,6 +78,29 @@ h6 {
color: #ffffff !important;
}

.navbar__items {
justify-content: center;
margin-right: 100px;
}
.navbar__items--right > :last-child {
padding-left: 20px;
}

.DocSearch-Button-Placeholder {
display: none !important;
}
.DocSearch-Button-Keys {
display: none !important;
}
.DocSearch-Button {
padding: 3px 12px !important;
border-radius: 50px !important;
border-color: rgb(162, 162, 162) !important;
}
.DocSearch-Button-Container {
justify-content: center;
}

.navbar__items button.clean-btn {
position: relative;
top: -4px;
Expand All @@ -92,28 +117,19 @@ h6 {
.navbar-icon-link:hover,
.footer-community-icon-link:hover,
.navbar__items button.clean-btn:hover {
background-color: rgba(57, 73, 171, 0.3);
background-color: rgb(0, 0, 0);
transform: translateY(-1px);
}
Comment on lines 117 to 122
Copy link

@coderabbitai coderabbitai bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Hover background invisible on dark navbar.

background-color: rgb(0, 0, 0) on hover provides no visual feedback since the navbar is also black (#000000). Only the subtle translateY(-1px) transform will be visible. Consider using a slightly lighter shade (e.g., rgba(255, 255, 255, 0.1)) for better hover feedback in dark mode.

Suggested fix 
 .navbar-icon-link:hover,
 .footer-community-icon-link:hover,
 .navbar__items button.clean-btn:hover {
-  background-color: rgb(0, 0, 0);
+  background-color: rgba(255, 255, 255, 0.1);
   transform: translateY(-1px);
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.navbar-icon-link:hover,
.footer-community-icon-link:hover,
.navbar__items button.clean-btn:hover {
background-color: rgba(57, 73, 171, 0.3);
background-color: rgb(0, 0, 0);
transform: translateY(-1px);
}
.navbar-icon-link:hover,
.footer-community-icon-link:hover,
.navbar__items button.clean-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
🤖 Prompt for AI Agents 
In `@opsimate-docs/src/css/custom.css` around lines 117 - 122, The hover rule for
.navbar-icon-link:hover, .footer-community-icon-link:hover, and .navbar__items
button.clean-btn:hover sets background-color to rgb(0,0,0) which blends with the
dark navbar; change the hover background to a slightly lighter translucent color
(for example rgba(255,255,255,0.08)–rgba(255,255,255,0.12) or similar) so the
background contrast is visible in dark mode while keeping the translateY(-1px)
transform; update only the background-color value in that selector to the chosen
rgba value to provide clear hover feedback.


.navbar-icon-link:hover .navbar-icon,
.footer-community-icon-link:hover .footer-community-icon {
filter: invert(35%) sepia(100%) saturate(800%) hue-rotate(240deg);
}

/* Navbar text links */
.navbar__title,
.navbar__brand,
.navbar__link {
color: white !important;
color: rgb(162, 162, 162) !important;
font-size: 14px;
}
.navbar__link--active {
color: #bbdefb !important;
}
.navbar__link:hover {
color: #5c6bc0 !important;
background-color: rgba(57, 73, 171, 0.1);
}

.navbar {
background-color: #000000 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
Expand Down Expand Up @@ -716,7 +732,7 @@ html[data-theme="light"] .navbar {
/* Dark mode - Keep black background */
html[data-theme="dark"] .navbar {
background-color: #000000 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

/* ===== LIGHT MODE TOGGLE VISIBILITY ON INDIGO BACKGROUND ===== */
Expand Down Expand Up @@ -775,8 +791,7 @@ html[data-theme="dark"] .navbar__link--active {
}

html[data-theme="dark"] .navbar__link:hover {
color: #5c6bc0 !important;
background-color: rgba(57, 73, 171, 0.1);
color: #ffffff !important;
}

/* ===== NAVBAR ICONS FOR LIGHT MODE ===== */
Expand Down Expand Up @@ -804,17 +819,9 @@ html[data-theme="light"] .navbar__items button.clean-btn:hover {
}

/* Dark mode - Keep existing icon styles with indigo hover */
html[data-theme="dark"] .navbar-icon{
filter: brightness(0) invert(1);
}

html[data-theme="dark"] .navbar-icon-link:hover .navbar-icon,
.navbar__items button.clean-btn:hover svg {
filter: invert(35%) sepia(100%) saturate(800%) hue-rotate(240deg);
}

html[data-theme="dark"] .navbar-icon-link:hover {
background-color: rgba(57, 73, 171, 0.3);
html[data-theme="dark"] .navbar-icon-link: {
background-color: rgb(0, 0, 0);
color: #bbdefb !important;
}
Comment on lines +823 to 826
Copy link

@coderabbitai coderabbitai bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

CSS syntax error: invalid selector.

There's a stray colon after .navbar-icon-link which makes this an invalid selector. The entire rule block will be ignored by browsers, breaking the dark mode icon link styling.

Proposed fix 
-html[data-theme="dark"] .navbar-icon-link: {
-  background-color: rgb(0, 0, 0);
+html[data-theme="dark"] .navbar-icon-link:hover {
+  background-color: rgba(255, 255, 255, 0.1);
   color: `#bbdefb` !important;
 }

If the intent was to style the default (non-hover) state, remove the colon entirely:

-html[data-theme="dark"] .navbar-icon-link: {
+html[data-theme="dark"] .navbar-icon-link {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
html[data-theme="dark"] .navbar-icon-link: {
background-color: rgb(0, 0, 0);
color: #bbdefb !important;
}
html[data-theme="dark"] .navbar-icon-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: `#bbdefb` !important;
}
🧰 Tools
🪛 Biome (2.1.2)

[error] 823-824: Unexpected value or character.

Expected one of:

(parse)

🤖 Prompt for AI Agents 
In `@opsimate-docs/src/css/custom.css` around lines 823 - 826, The CSS selector
for the dark-theme navbar icon is invalid due to a stray colon after
.navbar-icon-link; locate the rule targeting html[data-theme="dark"]
.navbar-icon-link: and remove the trailing colon (or replace it with the
intended pseudo-class, e.g., :hover or :active) so the block becomes a valid
selector and the background-color/color declarations apply to .navbar-icon-link
in dark mode.


Expand Down