Add hero banner blend and subtitle to BookNest page
This commit is contained in:
parent
2bc140db33
commit
87e8422563
2 changed files with 16 additions and 4 deletions
|
|
@ -10,7 +10,7 @@ function App() {
|
||||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
||||||
const sidebarWidth = sidebarCollapsed ? 64 : 200
|
const sidebarWidth = sidebarCollapsed ? 64 : 200
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const showHero = location.pathname === '/infrastructure'
|
const showHero = location.pathname === '/infrastructure' || location.pathname === '/booknest'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen w-screen overflow-hidden bg-page">
|
<div className="min-h-screen w-screen overflow-hidden bg-page">
|
||||||
|
|
|
||||||
|
|
@ -10,11 +10,16 @@ const pageTitles: Record<string, string> = {
|
||||||
'/settings': 'Settings',
|
'/settings': 'Settings',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const pageSubtitles: Record<string, string> = {
|
||||||
|
'/booknest': 'Your Digital Library',
|
||||||
|
}
|
||||||
|
|
||||||
export default function TopBar() {
|
export default function TopBar() {
|
||||||
const [userMenuOpen, setUserMenuOpen] = useState(false)
|
const [userMenuOpen, setUserMenuOpen] = useState(false)
|
||||||
const menuRef = useRef<HTMLDivElement>(null)
|
const menuRef = useRef<HTMLDivElement>(null)
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const title = pageTitles[location.pathname] ?? 'Glance'
|
const title = pageTitles[location.pathname] ?? 'Glance'
|
||||||
|
const subtitle = pageSubtitles[location.pathname]
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function handleClick(e: MouseEvent) {
|
function handleClick(e: MouseEvent) {
|
||||||
|
|
@ -29,9 +34,16 @@ export default function TopBar() {
|
||||||
return (
|
return (
|
||||||
<header className="h-14 flex items-center px-6 sticky top-0 z-40">
|
<header className="h-14 flex items-center px-6 sticky top-0 z-40">
|
||||||
{/* Page Title — pushed away from sidebar edge */}
|
{/* Page Title — pushed away from sidebar edge */}
|
||||||
<h1 className="text-[18px] font-bold uppercase tracking-wide" style={{ color: '#C8A434', marginLeft: '20px' }}>
|
<div style={{ marginLeft: '20px' }}>
|
||||||
{title}
|
<h1 className="text-[18px] font-bold uppercase tracking-wide" style={{ color: '#C8A434' }}>
|
||||||
</h1>
|
{title}
|
||||||
|
</h1>
|
||||||
|
{subtitle && (
|
||||||
|
<p className="text-[11px]" style={{ color: '#7A7D85', marginTop: '-2px' }}>
|
||||||
|
{subtitle}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Center section — Search bar */}
|
{/* Center section — Search bar */}
|
||||||
<div className="flex-1 flex justify-center">
|
<div className="flex-1 flex justify-center">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue