mirror of
https://github.com/SamyRai/tercul-frontend.git
synced 2025-12-27 02:31:34 +00:00
Enhance the navigation header appearance using Tailwind CSS theme
Removes custom theme styles and applies Tailwind CSS theme classes to NavHeader. Replit-Commit-Author: Agent Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/a5b1f5ac-8eda-45e5-b094-ec4681f669ee.jpg
This commit is contained in:
mukimovd
parent
1ea6cec608
commit
427ac70c27
@ -3,7 +3,6 @@ import { useTheme } from "@/hooks/use-theme";
|
||||
import { Search, Moon, Sun, Menu } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { theme as themeStyles } from "@/lib/theme";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@ -16,23 +15,23 @@ export function NavHeader() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className={`navigation-header border-b ${themeStyles.border.muted} bg-background dark:bg-background sticky top-0 z-10 shadow-sm`}>
|
||||
<header className="navigation-header border-b border-border/30 bg-background dark:bg-background sticky top-0 z-10 shadow-sm">
|
||||
<div className="flex items-center justify-between px-4 py-3 md:px-6 max-w-[var(--content-width)] mx-auto">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link href="/" className={`font-serif text-2xl font-semibold tracking-tight ${themeStyles.text.heading}`}>
|
||||
<Link href="/" className="font-serif text-2xl font-semibold tracking-tight text-primary dark:text-primary-foreground">
|
||||
Tercul
|
||||
</Link>
|
||||
<nav className="hidden md:flex items-center space-x-6">
|
||||
<Link href="/explore" className={themeStyles.nav.link}>
|
||||
<Link href="/explore" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 transition-colors font-sans text-sm font-medium">
|
||||
Explore
|
||||
</Link>
|
||||
<Link href="/authors" className={themeStyles.nav.link}>
|
||||
<Link href="/authors" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 transition-colors font-sans text-sm font-medium">
|
||||
Authors
|
||||
</Link>
|
||||
<Link href="/collections" className={themeStyles.nav.link}>
|
||||
<Link href="/collections" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 transition-colors font-sans text-sm font-medium">
|
||||
Collections
|
||||
</Link>
|
||||
<Link href="/blog" className={themeStyles.nav.link}>
|
||||
<Link href="/blog" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 transition-colors font-sans text-sm font-medium">
|
||||
Blog
|
||||
</Link>
|
||||
</nav>
|
||||
@ -42,7 +41,7 @@ export function NavHeader() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
|
||||
className="p-2 rounded-full text-foreground/70 dark:text-foreground/70 hover:bg-accent/20 dark:hover:bg-accent/20"
|
||||
>
|
||||
<Search className="h-5 w-5" />
|
||||
<span className="sr-only">Search</span>
|
||||
@ -54,7 +53,7 @@ export function NavHeader() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
|
||||
className="p-2 rounded-full text-foreground/70 dark:text-foreground/70 hover:bg-accent/20 dark:hover:bg-accent/20"
|
||||
>
|
||||
{theme === 'dark' ? (
|
||||
<Moon className="h-5 w-5" />
|
||||
@ -77,11 +76,11 @@ export function NavHeader() {
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<div className="h-6 w-px bg-sage/20 dark:bg-sage/20 mx-1"></div>
|
||||
<div className="h-6 w-px bg-accent/20 dark:bg-accent/20 mx-1"></div>
|
||||
|
||||
<Link href="/profile">
|
||||
<Button
|
||||
className="btn-feedback flex items-center space-x-2 py-1 px-3 text-sm font-sans font-medium rounded-full bg-sage/20 dark:bg-sage/20 text-navy dark:text-cream/90 hover:bg-sage/30 dark:hover:bg-sage/30 transition-colors"
|
||||
className="flex items-center space-x-2 py-1 px-3 text-sm font-sans font-medium rounded-full bg-accent/20 dark:bg-accent/20 text-foreground dark:text-foreground/90 hover:bg-accent/30 dark:hover:bg-accent/30 transition-colors"
|
||||
>
|
||||
<span>Sign In</span>
|
||||
</Button>
|
||||
@ -90,7 +89,7 @@ export function NavHeader() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
|
||||
className="md:hidden p-2 rounded-full text-foreground/70 dark:text-foreground/70 hover:bg-accent/20 dark:hover:bg-accent/20"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
@ -100,18 +99,18 @@ export function NavHeader() {
|
||||
</div>
|
||||
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden px-4 py-3 bg-cream dark:bg-paper border-t border-sage/20 dark:border-sage/20">
|
||||
<div className="md:hidden px-4 py-3 bg-background dark:bg-background border-t border-border/30 dark:border-border/30">
|
||||
<nav className="flex flex-col space-y-3">
|
||||
<Link href="/explore" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
|
||||
<Link href="/explore" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 font-sans text-sm font-medium transition-colors">
|
||||
Explore
|
||||
</Link>
|
||||
<Link href="/authors" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
|
||||
<Link href="/authors" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 font-sans text-sm font-medium transition-colors">
|
||||
Authors
|
||||
</Link>
|
||||
<Link href="/collections" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
|
||||
<Link href="/collections" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 font-sans text-sm font-medium transition-colors">
|
||||
Collections
|
||||
</Link>
|
||||
<Link href="/blog" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
|
||||
<Link href="/blog" className="text-foreground/80 dark:text-foreground/80 hover:text-primary dark:hover:text-primary/90 font-sans text-sm font-medium transition-colors">
|
||||
Blog
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
null
|
||||
Loading…
Reference in New Issue
Block a user