Skip to content

navbar repetition fix #187

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
AbhijitPrajapati12 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

navbar repetition fix #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d6c369
navbar repetition fix
Nov 17, 2025
071e6e1
fix : navbar UI fix
Nov 29, 2025
edb1584
Merge branch 'main' into fix/navbar
AbhijitPrajapati12 Nov 29, 2025
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
2 changes: 0 additions & 2 deletions apps/web/src/app/(main)/(landing)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import Navbar from '@/components/landing-sections/navbar'
import React from 'react'

const Layout = ({ children }: { children: React.ReactNode }) => {
return (
<section>
<Navbar />
{children}
</section>
)
Expand Down
10 changes: 6 additions & 4 deletions apps/web/src/components/landing-sections/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Navbar = () => {
>
<div className="flex items-center gap-3">
<button
className="md:hidden text-white"
className="min-[1115px]:hidden text-white"
onClick={() => setIsOpen(!isOpen)}
aria-label="Toggle navigation menu"
aria-expanded={isOpen}
Expand All @@ -76,7 +76,9 @@ const Navbar = () => {
<span>Opensox AI</span>
</div>
</div>
<div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-text-tertiary">
<div
className="hidden min-[1115px]:flex items-center gap-5 max-[1270px]:gap-4 max-[1173px]:gap-3 tracking-tight text-lg max-[1270px]:text-base max-[1173px]:text-sm font-light max-[1173px]:font-normal text-[#d1d1d1]"
>
Comment on lines +79 to +81
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 29, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Replace hardcoded hex color with design token.

The text-[#d1d1d1] uses a hardcoded hex value, which violates the coding guideline: "Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes."

Apply this diff to use a semantic color from the design token system:

-      <div
-        className="hidden min-[1115px]:flex items-center gap-5 max-[1270px]:gap-4 max-[1173px]:gap-3 tracking-tight text-lg max-[1270px]:text-base max-[1173px]:text-sm font-light max-[1173px]:font-normal text-[#d1d1d1]"
-      >
+      <div
+        className="hidden min-[1115px]:flex items-center gap-5 max-[1270px]:gap-4 max-[1173px]:gap-3 tracking-tight text-lg max-[1270px]:text-base max-[1173px]:text-sm font-light max-[1173px]:font-normal text-text-secondary"
+      >

Note: Replace text-text-secondary with the appropriate semantic color name from your design token system (e.g., text-neutral-300 or similar).

As per coding guidelines, always use semantic color names from the design token system.

📝 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
<div
className="hidden min-[1115px]:flex items-center gap-5 max-[1270px]:gap-4 max-[1173px]:gap-3 tracking-tight text-lg max-[1270px]:text-base max-[1173px]:text-sm font-light max-[1173px]:font-normal text-[#d1d1d1]"
>
<div
className="hidden min-[1115px]:flex items-center gap-5 max-[1270px]:gap-4 max-[1173px]:gap-3 tracking-tight text-lg max-[1270px]:text-base max-[1173px]:text-sm font-light max-[1173px]:font-normal text-text-secondary"
>
🤖 Prompt for AI Agents 
In apps/web/src/components/landing-sections/navbar.tsx around lines 79 to 81,
replace the hardcoded hex class `text-[#d1d1d1]` with the design-token semantic
Tailwind class (for example `text-text-secondary` or `text-neutral-300`) so the
component references the project color token system; update the className string
to remove the hex and add the chosen semantic class ensuring spacing and class
order remain valid.

{links.map((link, index) => {
const isActive = pathname === link.href;
return (
Expand All @@ -98,7 +100,7 @@ const Navbar = () => {
href="https://github.com/apsinghdev/opensox"
target="_blank"
rel="noopener noreferrer"
className="hidden lg:flex items-center gap-2 px-4 py-2.5 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
className="hidden min-[1115px]:flex items-center gap-2 px-4 py-2.5 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 29, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Replace hardcoded GitHub colors with design tokens.

Multiple hardcoded hex values (#0d1117, #161b22, #30363d) are used directly, which violates the coding guideline. Even for GitHub brand colors, these should be defined in the design token system and referenced via semantic names.

If these colors need to match GitHub's branding, define them in your design token system (e.g., in apps/web/src/lib/design-tokens.ts) and reference them via Tailwind classes. For example:

// in design-tokens.ts
github: {
  bg: '#0d1117',
  bgHover: '#161b22',
  border: '#30363d'
}

Then update the component:

         <Link
           href="https://github.com/apsinghdev/opensox"
           target="_blank"
           rel="noopener noreferrer"
-          className="hidden min-[1115px]:flex items-center gap-2 px-4 py-2.5 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
+          className="hidden min-[1115px]:flex items-center gap-2 px-4 py-2.5 bg-github-bg hover:bg-github-bgHover transition-colors rounded-lg border border-github-border text-white"
         >

Note: The same issue exists on line 137 in the mobile menu version of this button.

As per coding guidelines, always reference colors from the design token system using Tailwind classes.

🤖 Prompt for AI Agents 
In apps/web/src/components/landing-sections/navbar.tsx around line 103 (and also
update the similar button at line 137), the button uses hardcoded GitHub hex
colors (#0d1117, #161b22, #30363d); create semantic design tokens for these
values in apps/web/src/lib/design-tokens.ts (e.g., github.bg, github.bgHover,
github.border), export them, and then replace the hardcoded hexes by referencing
those tokens in the component — either by wiring them into Tailwind via your
tailwind theme (preferred) or by applying CSS custom properties / inline style
values sourced from the design tokens; ensure both desktop (line 103) and mobile
(line 137) button classNames use the token-backed classes/variables instead of
literal hex values.

>
<Github className="w-5 h-5" />
<span className="text-sm font-medium">Contribute</span>
Expand All @@ -115,7 +117,7 @@ const Navbar = () => {
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.25 }}
className="absolute top-full mt-2 left-0 w-full bg-neutral-900/90 backdrop-blur-xl border border-white/10 md:hidden flex flex-col items-center py-5 space-y-4 z-50 rounded-3xl"
className="absolute top-full mt-2 left-0 w-full bg-neutral-900/90 backdrop-blur-xl border border-white/10 min-[1115px]:hidden flex flex-col items-center py-5 space-y-4 z-50 rounded-3xl"
>
{links.map((link, index) => (
<Link
Expand Down