@@ -22,6 +22,7 @@ import Layout from '@theme/Layout';
2222import HomepageFeatures from '@site/src/components/HomepageFeatures' ;
2323import HomepageIntroduce from '@site/src/components/HomepageIntroduce' ;
2424import Heading from '@theme/Heading' ;
25+ import { useEffect , useState } from 'react' ;
2526
2627import styles from './index.module.css' ;
2728
@@ -70,16 +71,86 @@ function HomepageHeader() {
7071
7172export default function Home ( ) : JSX . Element {
7273 const { siteConfig} = useDocusaurusContext ( ) ;
74+ const [ isScrolled , setIsScrolled ] = useState ( false ) ;
75+
76+ useEffect ( ( ) => {
77+ const handleScroll = ( ) => {
78+ // Change navbar style when scrolled past 500 (past most of the hero section)
79+ setIsScrolled ( window . scrollY > 500 ) ;
80+ } ;
81+
82+ window . addEventListener ( 'scroll' , handleScroll ) ;
83+ return ( ) => window . removeEventListener ( 'scroll' , handleScroll ) ;
84+ } , [ ] ) ;
85+
7386 return (
74- < Layout
75- // leave empty to just display "Apache Fluss (Incubating)" in tab on landing page
76- title = ""
77- description = "Streaming Storage for Real-Time Analytics" >
78- < HomepageHeader />
79- < main >
80- < HomepageIntroduce />
81- < HomepageFeatures />
82- </ main >
83- </ Layout >
87+ < >
88+ { /* Inline styles for homepage navbar with scroll-based transitions */ }
89+ < style dangerouslySetInnerHTML = { { __html : `
90+ .navbar {
91+ background-color: ${ isScrolled ? 'var(--ifm-navbar-background-color)' : 'transparent' } !important;
92+ backdrop-filter: ${ isScrolled ? 'blur(8px)' : 'none' } !important;
93+ box-shadow: ${ isScrolled ? 'var(--ifm-navbar-shadow)' : 'none' } !important;
94+ transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease !important;
95+ }
96+ .navbar__link,
97+ .navbar__brand,
98+ .navbar__brand b,
99+ .navbar__brand strong,
100+ .navbar__title {
101+ color: ${ isScrolled ? 'var(--ifm-navbar-link-color)' : 'white' } !important;
102+ text-shadow: ${ isScrolled ? 'none' : '0 1px 3px rgba(0, 0, 0, 0.3)' } ;
103+ transition: color 0.3s ease, text-shadow 0.3s ease !important;
104+ }
105+ .navbar__brand * {
106+ color: ${ isScrolled ? 'var(--ifm-navbar-link-color)' : 'white' } !important;
107+ }
108+ .navbar__logo {
109+ content: url('${ isScrolled ? '/img/logo/svg/colored_logo.svg' : '/img/logo/svg/white_color_logo.svg' } ') !important;
110+ transition: content 0.3s ease !important;
111+ }
112+ .navbar__search-input {
113+ background-color: rgba(255, 255, 255, 0.9) !important;
114+ color: #1d1d1d !important;
115+ }
116+ .navbar__search-input::placeholder {
117+ color: #666 !important;
118+ opacity: 1 !important;
119+ }
120+ .DocSearch-Button {
121+ background-color: rgba(255, 255, 255, 0.9) !important;
122+ }
123+ .DocSearch-Button-Placeholder {
124+ color: #666 !important;
125+ }
126+ .DocSearch-Search-Icon {
127+ color: #666 !important;
128+ }
129+ .navbar__toggle {
130+ color: ${ isScrolled ? 'var(--ifm-navbar-link-color)' : 'white' } !important;
131+ transition: color 0.3s ease !important;
132+ }
133+ .navbar__toggle svg {
134+ color: ${ isScrolled ? 'var(--ifm-navbar-link-color)' : 'white' } !important;
135+ fill: ${ isScrolled ? 'var(--ifm-navbar-link-color)' : 'white' } !important;
136+ transition: color 0.3s ease, fill 0.3s ease !important;
137+ }
138+ .header-github-link::before {
139+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='${ isScrolled ? 'black' : 'white' } ' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat !important;
140+ transition: background 0.3s ease !important;
141+ }
142+ ` } } />
143+ < Layout
144+ // leave empty to just display "Apache Fluss (Incubating)" in tab on landing page
145+ title = ""
146+ description = "Streaming Storage for Real-Time Analytics"
147+ wrapperClassName = { styles . homepageWrapper } >
148+ < HomepageHeader />
149+ < main >
150+ < HomepageIntroduce />
151+ < HomepageFeatures />
152+ </ main >
153+ </ Layout >
154+ </ >
84155 ) ;
85156}
0 commit comments