add: hover effect

Signed-off-by: upsaurav12 . <[email protected]>
upsaurav12 · Aug 19, 2024 · deaf3ce · deaf3ce
1 parent 02c9461
commit deaf3ce
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js
@@ -682,6 +682,9 @@ const NavigationWrap = styled.header`
       background: ${(props) => props.theme.subItemColor}; 
       padding: -1px 0 13px;
       border-radius: 0.2rem;
+      margin-bottom: 10px;
+      border-radius: 6px;
+      box-shadow:  gray -1px 1px 10px;
     }
 
     .plus {
@@ -738,12 +741,15 @@ const NavigationWrap = styled.header`
       padding-top: 0.4rem;
       background-color: ${(props) => props.theme.subItemColor};
       padding: 12px 0;
+      transition: background-color 0.8s ease;
+      border-top-left-radius: 5px;
       &:hover{
-        background-position: left bottom;
+        background-color: ${(props) => props.theme.subitemHover};
       }
     }
+
     .mobile-sub-menu-item {
-      font-size: 1.1rem;
+      font-size: 1rem;
       &:hover {
         color: ${(props) => props.theme.menuColor};
       }

diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
@@ -55,6 +55,9 @@ const lighttheme = {
   //subItemColor: "#c1c1c1a6",
   subItemColor: "linear-gradient(90deg, rgba(226,226,226,1) 0%, rgba(203,203,203,1) 83%, rgba(213,213,213,1) 98%)",
 
+
+  //light grey
+  subitemHover: "#c3c3c3",
   // caribbean green (light green)
   menuHoverColor: "#00b39f",
   linkColor: "#00b39f",
@@ -293,6 +296,9 @@ export const darktheme = {
   menuHoverColor: "#00D3A9",
   linkColor: "#00D3A9",
 
+  //light grey
+  subitemHover: "grey",
+
 
   // saffron (dark yellow)
   highlightColor: "#EBC017",
@@ -302,6 +308,7 @@ export const darktheme = {
   highlightLightColor: "#EAD07D",
   saffronLightColor: "#EAD07D",
 
+
   // Shadow Sizes
   projectPageShadowsize: "5px",
   projectShadowsize: "5px",