Skip to content

Commit 6729638

Browse files
idanidan29idanidan29
committed
adding hover effect
1 parent b0c67bd commit 6729638

File tree

1 file changed

+46
-84
lines changed

1 file changed

+46
-84
lines changed

‎components/Sidebar.tsx‎

Lines changed: 46 additions & 84 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-primary',
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-primary',
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,14 @@ export const DocsNav = ({
570572
/>
571573
</div>
572574
</div>
573-
</div>{' '}
574-
{/* Closing div: Get started */}
575+
</div>
575576
{/* Guides */}
576-
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden '>
577+
<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'>
577578
<div
578579
className='flex justify-between w-full items-center'
579580
onClick={handleClickGuides}
580581
>
581-
<div className='flex items-center align-middle'>
582+
<div className='flex items-center align-middle'>
582583
<Image
583584
src={`${guides_icon}`}
584585
alt='grad cap icon'
@@ -626,17 +627,15 @@ export const DocsNav = ({
626627
setOpen={setOpen}
627628
/>
628629
</div>
629-
{/*Closing div tag: for implementers*/}
630630
</div>
631-
</div>{' '}
632-
{/* Closing div: Guides */}
631+
</div>
633632
{/* Reference */}
634-
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden '>
633+
<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'>
635634
<div
636635
className='flex justify-between w-full items-center'
637636
onClick={handleClickReference}
638637
>
639-
<div className='flex items-center align-middle'>
638+
<div className='flex items-center align-middle'>
640639
<Image
641640
src={`${reference_icon}`}
642641
alt='book icon'
@@ -667,11 +666,9 @@ export const DocsNav = ({
667666
/>
668667
</svg>
669668
</div>
670-
{/*Opening div: inner reference div */}
671669
<div
672670
className={classnames(
673-
'ml-6',
674-
'transition-all duration-500 ease-in-out',
671+
'ml-6 transition-all duration-500 ease-in-out',
675672
{
676673
'max-h-0 opacity-0 overflow-hidden': !active.getReference,
677674
'max-h-80 overflow-y-auto opacity-100': active.getReference,
@@ -689,31 +686,12 @@ export const DocsNav = ({
689686
label='JSON Schema keywords'
690687
setOpen={setOpen}
691688
/>
692-
{/*<DocLink
693-
uri='/understanding-json-schema'
694-
label='Understanding JSON Schema'
695-
setOpen={setOpen}
696-
/>*/}
697-
{/*<div className='pl-4 pb-1 pt-1'>*/}
698-
{/*<DocLink
699-
uri='/understanding-json-schema/conventions'
700-
label='Conventions used'
701-
setOpen={setOpen}
702-
/>*/}
703-
{/*<DocLink
704-
uri='/understanding-json-schema/reference'
705-
label='JSON Schema Reference'
706-
setOpen={setOpen}
707-
/>
708-
<div className='pl-4 pb-1 pt-1'> Opening div tag: understanding JSON*/}
709689
<DocLink
710690
uri='/understanding-json-schema/reference/type'
711691
label='JSON data types'
712692
setOpen={setOpen}
713693
/>
714694
<div className='pl-4 pb-1 pt-1'>
715-
{' '}
716-
{/*Opening div: JSON data types*/}
717695
<DocLink
718696
uri='/understanding-json-schema/reference/array'
719697
label='array'
@@ -749,8 +727,7 @@ export const DocsNav = ({
749727
label='string'
750728
setOpen={setOpen}
751729
/>
752-
</div>{' '}
753-
{/*Closing div: JSON data types*/}
730+
</div>
754731
<DocLink
755732
uri='/understanding-json-schema/reference/schema'
756733
label='Dialect and vocabulary declaration'
@@ -762,8 +739,6 @@ export const DocsNav = ({
762739
setOpen={setOpen}
763740
/>
764741
<div className='pl-4 pb-1 pt-1'>
765-
{' '}
766-
{/*Opening div: Schema constraints*/}
767742
<DocLink
768743
uri='/understanding-json-schema/reference/enum'
769744
label='Enumerated values'
@@ -774,15 +749,13 @@ export const DocsNav = ({
774749
label='Constant values'
775750
setOpen={setOpen}
776751
/>
777-
</div>{' '}
778-
{/*Closing div: Schema constraints*/}
752+
</div>
779753
<DocLink
780754
uri='/understanding-json-schema/reference/metadata'
781755
label='Schema annotations and comments'
782756
setOpen={setOpen}
783757
/>
784758
<div className='pl-4 pb-1 pt-1'>
785-
{/*Opening div: Schema metadata*/}
786759
<DocLink
787760
uri='/understanding-json-schema/reference/annotations'
788761
label='Annotations'
@@ -793,8 +766,7 @@ export const DocsNav = ({
793766
label='Comments'
794767
setOpen={setOpen}
795768
/>
796-
</div>{' '}
797-
{/*Closing div: Schema metadata*/}
769+
</div>
798770
<DocLink
799771
uri='/understanding-json-schema/reference/conditionals'
800772
label='Conditional schema validation'
@@ -806,8 +778,6 @@ export const DocsNav = ({
806778
setOpen={setOpen}
807779
/>
808780
<div className='pl-4 pb-1 pt-1'>
809-
{' '}
810-
{/*Opening div: Schema composition*/}
811781
<DocLink
812782
uri='/understanding-json-schema/reference/combining'
813783
label='Boolean JSON Schema combination'
@@ -818,8 +788,7 @@ export const DocsNav = ({
818788
label='Modular JSON Schema combination'
819789
setOpen={setOpen}
820790
/>
821-
</div>{' '}
822-
{/*Closing div: Schema composition*/}
791+
</div>
823792
<DocLink
824793
uri='/understanding-json-schema/reference/non_json_data'
825794
label='Media: string-encoding non-JSON data'
@@ -831,15 +800,14 @@ export const DocsNav = ({
831800
setOpen={setOpen}
832801
/>
833802
</div>
834-
</div>{' '}
835-
{/*Closing div: inner reference div */}
803+
</div>
836804
{/* Specification */}
837-
<div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded border border-white lg:border-hidden '>
805+
<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'>
838806
<div
839807
className='flex justify-between w-full items-center'
840808
onClick={handleClickSpec}
841809
>
842-
<div className='flex items-center align-middle'>
810+
<div className='flex items-center align-middle'>
843811
<Image
844812
src={`${spec_icon}`}
845813
alt='clipboard icon'
@@ -873,8 +841,7 @@ export const DocsNav = ({
873841
</div>
874842
<div
875843
className={classnames(
876-
'ml-6',
877-
'transition-all duration-500 ease-in-out',
844+
'ml-6 transition-all duration-500 ease-in-out',
878845
{
879846
'max-h-0 opacity-0 overflow-hidden': !active.getSpecification,
880847
'max-h-80 opacity-100 overflow-hidden': active.getSpecification,
@@ -883,23 +850,19 @@ export const DocsNav = ({
883850
id='specification'
884851
>
885852
<DocLink uri='/specification' label='Overview' setOpen={setOpen} />
886-
887853
<SegmentSubtitle label='Versions' />
888854
<div className='pl-4 pb-1 pt-1'>
889855
<DocLink uri='/draft/2020-12' label='2020-12' setOpen={setOpen} />
890-
891856
<DocLink uri='/draft/2019-09' label='2019-09' setOpen={setOpen} />
892857
<DocLink uri='/draft-07' label='draft-07' setOpen={setOpen} />
893858
<DocLink uri='/draft-06' label='draft-06' setOpen={setOpen} />
894859
<DocLink uri='/draft-05' label='draft-05' setOpen={setOpen} />
895860
</div>
896-
897861
<DocLink
898862
uri='/specification-links'
899863
label='Specification links'
900864
setOpen={setOpen}
901865
/>
902-
903866
<DocLink
904867
uri='/specification/migration'
905868
label='Migration'
@@ -910,7 +873,6 @@ export const DocsNav = ({
910873
label='Release notes'
911874
setOpen={setOpen}
912875
/>
913-
914876
<DocLink
915877
uri='/specification/json-hyper-schema'
916878
label='JSON Hyper-Schema'

0 commit comments

Comments
 (0)