Skip to content

Commit eba9f4d

Browse files
idanidan29idanidan29
authored
adding hover effect to docs (#1585)
* adding hover effect * Revert "adding hover effect" This reverts commit 6729638. * format adjustments * adjusting the text color
1 parent 5209a32 commit eba9f4d

File tree

1 file changed

+47
-55
lines changed

1 file changed

+47
-55
lines changed

‎components/Sidebar.tsx

Lines changed: 47 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import CarbonAds from './CarbonsAds';
1010
import { useTheme } from 'next-themes';
1111
import ExternalLinkIcon from '../public/icons/external-link-black.svg';
1212
import Image from 'next/image';
13+
1314
const DocLink = ({
1415
uri,
1516
label,
@@ -30,11 +31,14 @@ const DocLink = ({
3031
return (
3132
<Link
3233
href={uri}
33-
className={classnames('text-sm block py-1 pl-2', {
34-
' font-medium': !isActive,
35-
'text-primary dark:text-[#007bff] text-bold border-l-2 border-l-primary font-semibold':
36-
isActive,
37-
})}
34+
className={classnames(
35+
'text-sm block py-1 pl-2 transition-transform duration-300 hover:scale-105 hover:text-[#007bff]',
36+
{
37+
'font-medium': !isActive,
38+
'text-primary dark:text-[#007bff] font-bold border-l-2 border-l-primary':
39+
isActive,
40+
},
41+
)}
3842
onClick={() => {
3943
if (onClick) onClick();
4044
setOpen(false);
@@ -65,11 +69,13 @@ const DocLinkBlank = ({
6569
return (
6670
<Link
6771
href={uri}
68-
className={classnames('flex text-sm py-1 pl-2', {
69-
'font-medium': !isActive,
70-
'text-primary text-bold border-l-2 border-l-primary font-semibold':
71-
isActive,
72-
})}
72+
className={classnames(
73+
'flex text-sm py-1 pl-2 transition-transform duration-300 hover:scale-105 hover:text-[#007bff]',
74+
{
75+
'font-medium': !isActive,
76+
'text-primary font-bold border-l-2 border-l-primary': isActive,
77+
},
78+
)}
7379
target='_blank'
7480
rel='noopener noreferrer'
7581
onClick={() => {
@@ -94,13 +100,15 @@ const DocLinkBlank = ({
94100
</Link>
95101
);
96102
};
103+
97104
const SegmentSubtitle = ({ label }: { label: string }) => {
98105
return (
99106
<div className='text-sm italic text-slate-900 dark:text-slate-400 mt-2 mb-2'>
100107
{label}
101108
</div>
102109
);
103110
};
111+
104112
const getDocsPath = [
105113
'/docs',
106114
'/overview/what-is-jsonschema',
@@ -188,7 +196,7 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
188196
return (
189197
<div className='max-w-[1400px] mx-auto flex flex-col items-center'>
190198
<section>
191-
<div className='bg-primary dark:bg-slate-900 w-full h-12 mt-[4.5rem] z-150 flex relative flex-col justify-center items-center lg:hidden '>
199+
<div className='bg-primary dark:bg-slate-900 w-full h-12 mt-[4.5rem] z-150 flex relative flex-col justify-center items-center lg:hidden'>
192200
<div
193201
className='z-[150] flex w-full bg-primary dark:bg-slate-900 justify-between items-center'
194202
onMouseDown={(e) => e.stopPropagation()}
@@ -199,7 +207,7 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
199207
}}
200208
>
201209
{getDocsPath.includes(pathWtihoutFragment) && (
202-
<h3 className='text-white ml-12'>Introduction</h3>
210+
<h3 className='text-white ml-12'>Introduction</h3>
203211
)}
204212
{getStartedPath.includes(pathWtihoutFragment) && (
205213
<h3 className='text-white ml-12'>Get started</h3>
@@ -237,7 +245,9 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
237245
</div>
238246

239247
<div
240-
className={`z-[150] absolute top-10 mt-24 left-0 h-full w-screen bg-white dark:bg-slate-900 dark:shadow-lg transform ${open ? '-translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out filter drop-shadow-md `}
248+
className={`z-[150] absolute top-10 mt-24 left-0 h-full w-screen bg-white dark:bg-slate-900 dark:shadow-lg transform ${
249+
open ? '-translate-x-0' : '-translate-x-full'
250+
} transition-transform duration-300 ease-in-out filter drop-shadow-md`}
241251
>
242252
<div className='flex flex-col dark:bg-slate-900'>
243253
<DocsNav open={open} setOpen={setOpen} />
@@ -269,8 +279,6 @@ export const DocsNav = ({
269279
setOpen: (open: boolean) => void;
270280
}) => {
271281
const router = useRouter();
272-
273-
/* eslint-disable no-constant-condition */
274282
const [active, setActive] = useState({
275283
getDocs: false,
276284
getStarted: false,
@@ -299,7 +307,6 @@ export const DocsNav = ({
299307
} else if (getGuidesPath.includes(pathWtihoutFragment)) {
300308
newActive.getGuides = true;
301309
}
302-
303310
setActive(newActive);
304311
}, [router.asPath]);
305312

@@ -357,9 +364,7 @@ export const DocsNav = ({
357364
const rotateG = active.getStarted ? 'rotate(180deg)' : 'rotate(0)';
358365
const rotateR = active.getReference ? 'rotate(180deg)' : 'rotate(0)';
359366
const rotateSpec = active.getSpecification ? 'rotate(180deg)' : 'rotate(0)';
360-
361367
const { resolvedTheme } = useTheme();
362-
363368
const [learn_icon, setLearn_icon] = useState('');
364369
const [reference_icon, setReference_icon] = useState('');
365370
const [spec_icon, setSpec_icon] = useState('');
@@ -384,12 +389,12 @@ export const DocsNav = ({
384389
return (
385390
<div id='sidebar' className='lg:mt-8 w-4/5 mx-auto lg:ml-4'>
386391
{/* Introduction */}
387-
<div className='my-2 bg-slate-200 dark:bg-slate-900 border-white border lg:border-hidden p-2 rounded'>
392+
<div className='my-2 bg-slate-200 dark:bg-slate-900 border-white border lg:border-hidden p-2 rounded transition-transform duration-300 hover:scale-95'>
388393
<div
389394
className='flex justify-between w-full items-center'
390395
onClick={handleClickDoc}
391396
>
392-
<div className='flex items-center align-middle'>
397+
<div className='flex items-center align-middle'>
393398
<Image
394399
src={`${overview_icon}`}
395400
alt='eye icon'
@@ -422,8 +427,7 @@ export const DocsNav = ({
422427
</div>
423428
<div
424429
className={classnames(
425-
'ml-6',
426-
'transition-all duration-500 ease-in-out',
430+
'ml-6 transition-all duration-500 ease-in-out',
427431
{
428432
'max-h-0 opacity-0 overflow-hidden': !active.getDocs,
429433
'max-h-80 opacity-100': active.getDocs,
@@ -475,15 +479,14 @@ export const DocsNav = ({
475479
setOpen={setOpen}
476480
/>
477481
</div>
478-
</div>{' '}
479-
{/*Closing div: Introduction*/}
480-
{/* Get started */}
481-
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden '>
482+
</div>
483+
{/* Get Started */}
484+
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden transition-transform duration-300 hover:scale-95'>
482485
<div
483486
className='flex justify-between w-full items-center'
484487
onClick={handleClickGet}
485488
>
486-
<div className='flex items-center align-middle'>
489+
<div className='flex items-center align-middle'>
487490
<Image
488491
src={`${learn_icon}`}
489492
alt='compass icon'
@@ -516,8 +519,7 @@ export const DocsNav = ({
516519
</div>
517520
<div
518521
className={classnames(
519-
'ml-6',
520-
'transition-all duration-500 ease-in-out',
522+
'ml-6 transition-all duration-500 ease-in-out',
521523
{
522524
'max-h-0 opacity-0 overflow-hidden': !active.getStarted,
523525
'max-h-80 opacity-100': active.getStarted,
@@ -570,15 +572,15 @@ export const DocsNav = ({
570572
/>
571573
</div>
572574
</div>
573-
</div>{' '}
575+
</div>
574576
{/* Closing div: Get started */}
575577
{/* Guides */}
576-
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden '>
578+
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden transition-transform duration-300 hover:scale-95'>
577579
<div
578580
className='flex justify-between w-full items-center'
579581
onClick={handleClickGuides}
580582
>
581-
<div className='flex items-center align-middle'>
583+
<div className='flex items-center align-middle'>
582584
<Image
583585
src={`${guides_icon}`}
584586
alt='grad cap icon'
@@ -628,15 +630,15 @@ export const DocsNav = ({
628630
</div>
629631
{/*Closing div tag: for implementers*/}
630632
</div>
631-
</div>{' '}
633+
</div>
632634
{/* Closing div: Guides */}
633635
{/* Reference */}
634-
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden '>
636+
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden transition-transform duration-300 hover:scale-95'>
635637
<div
636638
className='flex justify-between w-full items-center'
637639
onClick={handleClickReference}
638640
>
639-
<div className='flex items-center align-middle'>
641+
<div className='flex items-center align-middle'>
640642
<Image
641643
src={`${reference_icon}`}
642644
alt='book icon'
@@ -670,8 +672,7 @@ export const DocsNav = ({
670672
{/*Opening div: inner reference div */}
671673
<div
672674
className={classnames(
673-
'ml-6',
674-
'transition-all duration-500 ease-in-out',
675+
'ml-6 transition-all duration-500 ease-in-out',
675676
{
676677
'max-h-0 opacity-0 overflow-hidden': !active.getReference,
677678
'max-h-80 overflow-y-auto opacity-100': active.getReference,
@@ -712,7 +713,6 @@ export const DocsNav = ({
712713
setOpen={setOpen}
713714
/>
714715
<div className='pl-4 pb-1 pt-1'>
715-
{' '}
716716
{/*Opening div: JSON data types*/}
717717
<DocLink
718718
uri='/understanding-json-schema/reference/array'
@@ -749,7 +749,7 @@ export const DocsNav = ({
749749
label='string'
750750
setOpen={setOpen}
751751
/>
752-
</div>{' '}
752+
</div>
753753
{/*Closing div: JSON data types*/}
754754
<DocLink
755755
uri='/understanding-json-schema/reference/schema'
@@ -762,7 +762,6 @@ export const DocsNav = ({
762762
setOpen={setOpen}
763763
/>
764764
<div className='pl-4 pb-1 pt-1'>
765-
{' '}
766765
{/*Opening div: Schema constraints*/}
767766
<DocLink
768767
uri='/understanding-json-schema/reference/enum'
@@ -774,7 +773,7 @@ export const DocsNav = ({
774773
label='Constant values'
775774
setOpen={setOpen}
776775
/>
777-
</div>{' '}
776+
</div>
778777
{/*Closing div: Schema constraints*/}
779778
<DocLink
780779
uri='/understanding-json-schema/reference/metadata'
@@ -793,8 +792,7 @@ export const DocsNav = ({
793792
label='Comments'
794793
setOpen={setOpen}
795794
/>
796-
</div>{' '}
797-
{/*Closing div: Schema metadata*/}
795+
</div>
798796
<DocLink
799797
uri='/understanding-json-schema/reference/conditionals'
800798
label='Conditional schema validation'
@@ -806,7 +804,6 @@ export const DocsNav = ({
806804
setOpen={setOpen}
807805
/>
808806
<div className='pl-4 pb-1 pt-1'>
809-
{' '}
810807
{/*Opening div: Schema composition*/}
811808
<DocLink
812809
uri='/understanding-json-schema/reference/combining'
@@ -818,28 +815,29 @@ export const DocsNav = ({
818815
label='Modular JSON Schema combination'
819816
setOpen={setOpen}
820817
/>
821-
</div>{' '}
818+
</div>
822819
{/*Closing div: Schema composition*/}
823820
<DocLink
824821
uri='/understanding-json-schema/reference/non_json_data'
825822
label='Media: string-encoding non-JSON data'
826823
setOpen={setOpen}
827824
/>
825+
{/*Closing div: Schema composition*/}
828826
<DocLinkBlank
829827
uri='https://www.learnjsonschema.com/'
830828
label='Learn JSON Schema'
831829
setOpen={setOpen}
832830
/>
833831
</div>
834-
</div>{' '}
832+
</div>
835833
{/*Closing div: inner reference div */}
836834
{/* Specification */}
837-
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden '>
835+
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden transition-transform duration-300 hover:scale-95'>
838836
<div
839837
className='flex justify-between w-full items-center'
840838
onClick={handleClickSpec}
841839
>
842-
<div className='flex items-center align-middle'>
840+
<div className='flex items-center align-middle'>
843841
<Image
844842
src={`${spec_icon}`}
845843
alt='clipboard icon'
@@ -873,8 +871,7 @@ export const DocsNav = ({
873871
</div>
874872
<div
875873
className={classnames(
876-
'ml-6',
877-
'transition-all duration-500 ease-in-out',
874+
'ml-6 transition-all duration-500 ease-in-out',
878875
{
879876
'max-h-0 opacity-0 overflow-hidden': !active.getSpecification,
880877
'max-h-80 opacity-100 overflow-hidden': active.getSpecification,
@@ -883,23 +880,19 @@ export const DocsNav = ({
883880
id='specification'
884881
>
885882
<DocLink uri='/specification' label='Overview' setOpen={setOpen} />
886-
887883
<SegmentSubtitle label='Versions' />
888884
<div className='pl-4 pb-1 pt-1'>
889885
<DocLink uri='/draft/2020-12' label='2020-12' setOpen={setOpen} />
890-
891886
<DocLink uri='/draft/2019-09' label='2019-09' setOpen={setOpen} />
892887
<DocLink uri='/draft-07' label='draft-07' setOpen={setOpen} />
893888
<DocLink uri='/draft-06' label='draft-06' setOpen={setOpen} />
894889
<DocLink uri='/draft-05' label='draft-05' setOpen={setOpen} />
895890
</div>
896-
897891
<DocLink
898892
uri='/specification-links'
899893
label='Specification links'
900894
setOpen={setOpen}
901895
/>
902-
903896
<DocLink
904897
uri='/specification/migration'
905898
label='Migration'
@@ -910,7 +903,6 @@ export const DocsNav = ({
910903
label='Release notes'
911904
setOpen={setOpen}
912905
/>
913-
914906
<DocLink
915907
uri='/specification/json-hyper-schema'
916908
label='JSON Hyper-Schema'

0 commit comments

Comments
 (0)