diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css
index 57ebee4d21b..b1bc93d81ce 100644
--- a/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css
+++ b/src/components/Header/Nav/ProductNavigation/Desktop/productNavigation.module.css
@@ -34,13 +34,12 @@
}
.button {
- composes: text-300 from global;
+ composes: text-100 from global;
line-height: 1.5rem;
- padding-block: var(--space-2x);
user-select: none;
display: flex;
align-items: center;
- gap: var(--space-2x);
+ gap: var(--space-1x);
width: fit-content;
color: var(--blue-800);
}
@@ -49,6 +48,23 @@
color: var(--blue-600);
}
+.button > div > img {
+ display: flex;
+ width: 1.2rem;
+ transform: translate3d(0rem, 0rem, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
+ transition-duration: 200ms;
+ opacity: 0.6;
+ transform-style: prserve-3d;
+}
+
+.button:hover > div > img {
+ transform: translate3d(0.15rem, -0.15rem, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)
+ skew(0deg, 0deg);
+ transition-duration: 200ms;
+ opacity: 1;
+ transform-style: preserve-3d;
+}
+
.content {
position: absolute;
top: 0;
diff --git a/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css b/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css
index afa3d13a55e..c97580320ef 100644
--- a/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css
+++ b/src/components/Header/Nav/ProductNavigation/Desktop/subProductContent.module.css
@@ -13,3 +13,8 @@
color: var(--blue-600);
background: var(--blue-100);
}
+
+.icon {
+ width: 1.2rem;
+ height: 1.2rem;
+}
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx
index 86552922874..9663fd36f22 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/BottomBar.tsx
@@ -3,40 +3,29 @@ import { ResourcesIcon } from "./ResourcesIcon"
import { Search } from "../../../aiSearch/Search"
const ResourcesButton = () => (
-
+
-
- GitHub
-
-
-
+ GitHub
)
const SearchButton = () =>
+const DeveloperHubButton = () => (
+
+ Developer Hub
+
+)
+
export const BottomBar = () => {
- // Additional buttons should be added to this array in order to have the right number of columns in the layout
- const buttons = [SearchButton, ResourcesButton]
+ const buttons = [
,
,
]
return (
-
- {buttons.map((ButtonComponent, index) => (
-
- ))}
+
+
+ {buttons.map((ButtonComponent, index) => (
+
{ButtonComponent}
+ ))}
+
)
}
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx b/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
index 03493199a49..f47503b27ef 100644
--- a/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
+++ b/src/components/Header/Nav/ProductNavigation/Mobile/Category.tsx
@@ -14,7 +14,7 @@ const Item = React.forwardRef
(
({ item: { label, icon, href, subProducts }, onProductClick }, forwardedRef) => {
const itemComponent = (
<>
- {icon && }
+ {icon && }
{label}
@@ -24,7 +24,16 @@ const Item = React.forwardRef(
@@ -105,7 +131,6 @@ export function ProductNavigation({ productsNav }: Props) {