Styled Navigation Layout

2025-06-022 turns3,471 charsgpt-4o

react-navigation ui-styling lucide-icons

Summary

User wanted to style a React navigation component with icons and layout using lucide-react and react-router-dom.

Messages

style the navigation : import React from 'react';
import { Outlet, Link, useLocation } from 'react-router-dom';
import { Moon, Sun, ChartPieIcon, Globe } from 'lucide-react';

const NAV_ITEMS = [
  { path: '/', label: 'News'},
  { path: '/manage-feeds', label: 'Sources'}
];

export default function Layout() {
  
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <nav className="max-w-5xl mx-auto px-4">
          <div className="flex h-16 items-center justify-between">
     

            <div className="flex items-center gap-6">
              {NAV_ITEMS.map(({ path, label }) => (
                <Link
                  key={path}
                  to={path}
                  className={`
                    flex items-center gap-2 px-3 py-2 rounded-md
                    ${location.pathname === path
                      ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white'
                      : 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
                    }
                  `}
                >
                  <span>{label}</span>
                </Link>
              ))}
            </div>
          </div>
        </nav>
      </header>

      <main className="max-w-5xl mx-auto px-4 py-8">
        <Outlet />
      </main>
    </div>
  );
}

Here's a styled and improved version of your `Layout` component with:

- Clear active/inactive navigation styling
- Proper use of `useLocation()` to highlight the active nav item
- Mobile-responsive tweaks
- Light/dark mode support via Tailwind

```jsx
import React from 'react';
import { Outlet, Link, useLocation } from 'react-router-dom';

const NAV_ITEMS = [
  { path: '/', label: 'News' },
  { path: '/manage-feeds', label: 'Sources' }
];

export default function Layout() {
  const location = useLocation();

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <nav className="max-w-5xl mx-auto px-4">
          <div className="flex h-16 items-center justify-between">
            <div className="flex items-center space-x-6">
              {NAV_ITEMS.map(({ path, label }) => {
                const isActive = location.pathname === path;
                return (
                  <Link
                    key={path}
                    to={path}
                    className={`px-4 py-2 rounded-md text-sm font-medium transition-colors duration-150
                      ${isActive
                        ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white'
                        : 'text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white'
                      }`}
                  >
                    {label}
                  </Link>
                );
              })}
            </div>
          </div>
        </nav>
      </header>

      <main className="max-w-5xl mx-auto px-4 py-8">
        <Outlet />
      </main>
    </div>
  );
}
```

### Suggestions if you want to expand further:
- Add a **logo** or **app title** on the left side.
- Integrate a **theme toggle** using the `<Moon />` / `<Sun />` icons.
- Make the layout responsive with a hamburger menu if needed.
Let me know if you want that too!

gpt-4o