From 6729638941d09b84725660228dc34d0f63529cf8 Mon Sep 17 00:00:00 2001 From: Idan Levi <29idan29@gmail.com> Date: Sun, 23 Mar 2025 18:54:57 +0200 Subject: [PATCH 1/4] adding hover effect --- components/Sidebar.tsx | 130 +++++++++++++++-------------------------- 1 file changed, 46 insertions(+), 84 deletions(-) diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index 71210bd7c..9ffac6535 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -10,6 +10,7 @@ import CarbonAds from './CarbonsAds'; import { useTheme } from 'next-themes'; import ExternalLinkIcon from '../public/icons/external-link-black.svg'; import Image from 'next/image'; + const DocLink = ({ uri, label, @@ -30,11 +31,14 @@ const DocLink = ({ return ( { if (onClick) onClick(); setOpen(false); @@ -65,11 +69,13 @@ const DocLinkBlank = ({ return ( { @@ -94,6 +100,7 @@ const DocLinkBlank = ({ ); }; + const SegmentSubtitle = ({ label }: { label: string }) => { return (
@@ -101,6 +108,7 @@ const SegmentSubtitle = ({ label }: { label: string }) => {
); }; + const getDocsPath = [ '/docs', '/overview/what-is-jsonschema', @@ -188,7 +196,7 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => { return (
-
+
e.stopPropagation()} @@ -199,7 +207,7 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => { }} > {getDocsPath.includes(pathWtihoutFragment) && ( -

Introduction

+

Introduction

)} {getStartedPath.includes(pathWtihoutFragment) && (

Get started

@@ -237,7 +245,9 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
@@ -269,8 +279,6 @@ export const DocsNav = ({ setOpen: (open: boolean) => void; }) => { const router = useRouter(); - - /* eslint-disable no-constant-condition */ const [active, setActive] = useState({ getDocs: false, getStarted: false, @@ -299,7 +307,6 @@ export const DocsNav = ({ } else if (getGuidesPath.includes(pathWtihoutFragment)) { newActive.getGuides = true; } - setActive(newActive); }, [router.asPath]); @@ -357,9 +364,7 @@ export const DocsNav = ({ const rotateG = active.getStarted ? 'rotate(180deg)' : 'rotate(0)'; const rotateR = active.getReference ? 'rotate(180deg)' : 'rotate(0)'; const rotateSpec = active.getSpecification ? 'rotate(180deg)' : 'rotate(0)'; - const { resolvedTheme } = useTheme(); - const [learn_icon, setLearn_icon] = useState(''); const [reference_icon, setReference_icon] = useState(''); const [spec_icon, setSpec_icon] = useState(''); @@ -384,12 +389,12 @@ export const DocsNav = ({ return (