Browse Source

add collection hover style

master
azri 1 week ago
parent
commit
2255da57cb
1 changed files with 16 additions and 9 deletions
  1. 16
    9
      src/components/Navbar/Navbar.jsx

+ 16
- 9
src/components/Navbar/Navbar.jsx View File

200
             height: "100%",
200
             height: "100%",
201
             paddingTop: "85%",
201
             paddingTop: "85%",
202
             position: "relative",
202
             position: "relative",
203
-            cursor: "pointer"
203
+            cursor: "pointer",
204
+            transition: "transform 0.3s ease",
205
+            ":hover": {
206
+              transform: "scale(1.1)"
207
+            }
204
           }}
208
           }}
205
           onClick={() => {
209
           onClick={() => {
206
             sessionStorage.setItem('amber-select-collection', title)
210
             sessionStorage.setItem('amber-select-collection', title)
240
   };
244
   };
241
 
245
 
242
   const displayCollectionList = (collection, productType) => {
246
   const displayCollectionList = (collection, productType) => {
243
-    setDisplayCollection({
244
-      productType,
245
-      list: collection
246
-    })
247
+    setDisplayCollection([])
248
+    setTimeout(() => {
249
+      setDisplayCollection({
250
+        productType,
251
+        list: collection
252
+      })
253
+    }, 200);
247
   }
254
   }
248
 
255
 
249
   const hideCollectionList = () => {
256
   const hideCollectionList = () => {
261
           ":hover": {
268
           ":hover": {
262
             backgroundColor: "rgba(255,255,255,1) !important",
269
             backgroundColor: "rgba(255,255,255,1) !important",
263
             backdropFilter: "none !important",
270
             backdropFilter: "none !important",
264
-            '& .navItem':{
265
-              color:"black !important"
271
+            '& .navItem': {
272
+              color: "black !important"
266
             },
273
             },
267
-            '& .navItem:hover':{
268
-              color:"#95AAC5 !important"
274
+            '& .navItem:hover': {
275
+              color: "#95AAC5 !important"
269
             },
276
             },
270
           }
277
           }
271
         }}
278
         }}

Loading…
Cancel
Save