Переглянути джерело

fix navbar styling

master
azri 2 тижднів тому
джерело
коміт
fb77d61921
1 змінених файлів з 33 додано та 14 видалено
  1. 33
    14
      src/components/Navbar/Navbar.jsx

+ 33
- 14
src/components/Navbar/Navbar.jsx Переглянути файл

@@ -108,6 +108,7 @@ const Navbar = () => {
108 108
 
109 109
   const swiperRef = useRef(null); // Create a ref for the Swiper instance
110 110
   const [showHeader, setShowHeader] = useState(true);
111
+  const [isAtTop, setIsAtTop] = useState(true);
111 112
   const [lastScrollPos, setLastScrollPos] = useState(0);
112 113
   const [language, setLanguage] = useState('English');
113 114
   const dispatch = useDispatch();
@@ -121,13 +122,24 @@ const Navbar = () => {
121 122
 
122 123
   const [displayCollection, setDisplayCollection] = useState({
123 124
     productType: null,
124
-    list:[]
125
+    list: []
125 126
   })
126 127
 
127 128
   useEffect(() => {
128 129
 
129 130
     dispatch(fetchProducts())
130 131
 
132
+    const handleScroll = () => {
133
+      setIsAtTop(window.scrollY < 20);
134
+    };
135
+
136
+    window.addEventListener("scroll", handleScroll);
137
+
138
+    // Cleanup on component unmount
139
+    return () => {
140
+      window.removeEventListener("scroll", handleScroll);
141
+    };
142
+
131 143
   }, [])
132 144
 
133 145
   useEffect(() => {
@@ -190,9 +202,9 @@ const Navbar = () => {
190 202
             position: "relative",
191 203
             cursor: "pointer"
192 204
           }}
193
-          onClick={()=>{
194
-            sessionStorage.setItem('amber-select-collection',title)
195
-            sessionStorage.setItem('amber-select-product-type',displayCollection.productType)
205
+          onClick={() => {
206
+            sessionStorage.setItem('amber-select-collection', title)
207
+            sessionStorage.setItem('amber-select-product-type', displayCollection.productType)
196 208
             window.location.href = `/products`;
197 209
           }}
198 210
         >
@@ -230,7 +242,7 @@ const Navbar = () => {
230 242
   const displayCollectionList = (collection, productType) => {
231 243
     setDisplayCollection({
232 244
       productType,
233
-      list:collection
245
+      list: collection
234 246
     })
235 247
   }
236 248
 
@@ -242,14 +254,16 @@ const Navbar = () => {
242 254
     <>
243 255
       <AppBar position="fixed"
244 256
         sx={{
245
-          backgroundColor: "rgba(255, 255, 255, 0.3)", // Transparent white background
246
-          backdropFilter: "blur(10px)", // Apply blur effect
257
+          backgroundColor: (isAtTop) ? "rgba(0, 0, 0, 0)" : "rgba(255, 255, 255, 0.3)",
258
+          backdropFilter: (isAtTop) ? "none" : "blur(10px)",
247 259
           boxShadow: 0,
248
-          borderBottom: '1px solid white',
249 260
           transition: "all 0.2s ease-in-out",
250 261
           ":hover": {
251
-            backgroundColor: "rgba(255,255,255,1)",
252
-            backdropFilter: "none"
262
+            backgroundColor: "rgba(255,255,255,1) !important",
263
+            backdropFilter: "none !important",
264
+            '& .navItem':{
265
+              color:"black !important"
266
+            }
253 267
           }
254 268
         }}
255 269
         onMouseLeave={() => {
@@ -343,9 +357,10 @@ const Navbar = () => {
343 357
               }}
344 358
             >
345 359
               <Typography variant="body2"
360
+                className="navItem"
346 361
                 sx={{
347 362
                   fontWeight: "400",
348
-                  color: "black",
363
+                  color: (isAtTop) ? "white" : "black",
349 364
                   transition: "all 0.3s ease-in-out",
350 365
                   ":hover": {
351 366
                     color: "#95AAC5"
@@ -385,12 +400,16 @@ const Navbar = () => {
385 400
               </LanguageSelect>
386 401
             </FormControl> */}
387 402
 
388
-            <IconButton color="inherit">
389
-              <SearchIcon/>
403
+            <IconButton>
404
+              <SearchIcon className="navItem" style={{
405
+                color: (isAtTop) ? "white" : "black",
406
+              }} />
390 407
             </IconButton>
391 408
 
392 409
             <Badge sx={{ cursor: "pointer" }} onClick={() => { window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
393
-              <LocalMallIcon color="action" />
410
+              <LocalMallIcon className="navItem" style={{
411
+                color: (isAtTop) ? "white" : "black",
412
+              }} />
394 413
             </Badge>
395 414
 
396 415
             {/* <IconButton color="inherit">

Завантаження…
Відмінити
Зберегти