Skip to content
This repository was archived by the owner on Nov 1, 2024. It is now read-only.

Commit 721fea0

Browse files
pettejapetteja
committed
Working, needs more styling
1 parent 38f8ddd commit 721fea0

File tree

1 file changed

+109
-97
lines changed

1 file changed

+109
-97
lines changed

‎components/productArea/sidebar.tsx

+109-97
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,132 @@
1-
import { Data } from '@navikt/ds-icons'
2-
import { Select } from '@navikt/ds-react'
3-
import { useRouter } from 'next/router'
1+
import {Data} from '@navikt/ds-icons'
2+
import {ChevronLeftDoubleIcon, ChevronRightDoubleIcon} from '@navikt/aksel-icons'
3+
import {Select} from '@navikt/ds-react'
44
import * as React from 'react'
5-
import { PAItems } from '../../pages/productArea/[id]'
5+
import {useState} from 'react'
6+
import {PAItems} from '../../pages/productArea/[id]'
67
import DataproductLogo from '../lib/icons/dataproductLogo'
78

89
interface ProductAreaSidebarProps {
9-
productAreaItems: PAItems
10-
setCurrentItem: (newCurrent: number) => void
11-
currentItem: number
12-
productAreas: any
13-
selectProductArea: (productAreaId: string) => void
10+
productAreaItems: PAItems
11+
setCurrentItem: (newCurrent: number) => void
12+
currentItem: number
13+
productAreas: any
14+
selectProductArea: (productAreaId: string) => void
1415
}
1516

1617
const ProductAreaSidebar = ({
17-
productAreaItems,
18-
setCurrentItem,
19-
currentItem,
20-
productAreas,
21-
selectProductArea,
22-
}: ProductAreaSidebarProps) => {
23-
const relevantProductAreas = productAreas
24-
.filter(
25-
(it: any) =>
26-
it.dataproductsNumber ||
27-
it.storiesNumber ||
28-
it.insightProductsNumber
29-
).sort((l: any, r: any) => (l.name < r.name ? -1 : 1))
30-
return (
31-
<div className="pr-[2rem] w-96 pt-[1.6rem] hidden md:block">
32-
<Select
33-
className="w-full mb-[1rem]"
34-
label=""
35-
onChange={(e) => selectProductArea(e.target.value)}
36-
value={
37-
relevantProductAreas.find((it: any) => it.name == productAreaItems[0].name)
38-
?.id
39-
}
40-
>
41-
{relevantProductAreas.map((it: any, index: number) => (
42-
<option key={index} value={it.id}>
43-
{it.name}
44-
</option>
45-
))}
46-
</Select>
47-
<div className="flex text-base w-full flex-col gap-2">
48-
{productAreaItems.map((d: any, idx: number) =>
49-
d.stories.length + d.dataproducts.length + d.insightProducts.length ? (
50-
<div
51-
key={idx}
52-
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
53-
currentItem == idx
54-
? 'border-l-text-action'
55-
: 'border-l-transparent'
56-
}`}
57-
>
58-
<a
59-
className="font-semibold no-underline hover:underline"
60-
href="#"
61-
onClick={() => setCurrentItem(idx)}
62-
>
63-
{d.name}
64-
</a>
65-
<div className="flex justify-between w-24">
18+
productAreaItems,
19+
setCurrentItem,
20+
currentItem,
21+
productAreas,
22+
selectProductArea,
23+
}: ProductAreaSidebarProps) => {
24+
const relevantProductAreas = productAreas
25+
.filter(
26+
(it: any) =>
27+
it.dataproductsNumber ||
28+
it.storiesNumber ||
29+
it.insightProductsNumber
30+
).sort((l: any, r: any) => (l.name < r.name ? -1 : 1))
31+
32+
const [collapsed, setCollapsed] = useState(false)
33+
return (
34+
35+
<div style={{display: 'flex', justifyContent: 'space-between'}}>
36+
{collapsed ? null : (
37+
<div className="pr-[2rem] w-96 pt-[1.6rem] hidden md:block">
38+
<Select
39+
className="w-full mb-[1rem]"
40+
label=""
41+
onChange={(e) => selectProductArea(e.target.value)}
42+
value={
43+
relevantProductAreas.find((it: any) => it.name == productAreaItems[0].name)
44+
?.id
45+
}
46+
>
47+
{relevantProductAreas.map((it: any, index: number) => (
48+
<option key={index} value={it.id}>
49+
{it.name}
50+
</option>
51+
))}
52+
</Select>
53+
<div className="flex text-base w-full flex-col gap-2">
54+
{productAreaItems.map((d: any, idx: number) =>
55+
d.stories.length + d.dataproducts.length + d.insightProducts.length ? (
56+
<div
57+
key={idx}
58+
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
59+
currentItem == idx
60+
? 'border-l-text-action'
61+
: 'border-l-transparent'
62+
}`}
63+
>
64+
<a
65+
className="font-semibold no-underline hover:underline"
66+
href="#"
67+
onClick={() => setCurrentItem(idx)}
68+
>
69+
{d.name}
70+
</a>
71+
<div className="flex justify-between w-24">
6672
<span className="flex gap-2 items-center">
6773
<Data
68-
aria-label="datafortellinger"
69-
className="text-text-subtle"
74+
aria-label="datafortellinger"
75+
className="text-text-subtle"
7076
/>{' '}
71-
{d.stories.length}
77+
{d.stories.length}
7278
</span>
73-
<span className="flex gap-2 items-center">
79+
<span className="flex gap-2 items-center">
7480
<div className="h-[14px] w-[14px] text-text-subtle">
75-
<DataproductLogo />
76-
</div>{' '}
77-
{d.dataproducts.length}
81+
<DataproductLogo/>
82+
</div>
83+
{' '}
84+
{d.dataproducts.length}
7885
</span>
79-
<span className="flex gap-2 items-center">
86+
<span className="flex gap-2 items-center">
8087
<div className="h-[14px] w-[14px] text-text-subtle">
81-
<Data />
82-
</div>{' '}
83-
{d.insightProducts.length}
88+
<Data/>
89+
</div>
90+
{' '}
91+
{d.insightProducts.length}
8492
</span>
85-
</div>
86-
</div>
87-
) : (
88-
<div
89-
key={idx}
90-
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
91-
currentItem == idx
92-
? 'border-l-text-action'
93-
: 'border-l-transparent'
94-
}`}
95-
>
96-
<p className="font-semibold">{d.name}</p>
97-
<div className="flex justify-between w-24">
93+
</div>
94+
</div>
95+
) : (
96+
<div
97+
key={idx}
98+
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
99+
currentItem == idx
100+
? 'border-l-text-action'
101+
: 'border-l-transparent'
102+
}`}
103+
>
104+
<p className="font-semibold">{d.name}</p>
105+
<div className="flex justify-between w-24">
98106
<span className="flex gap-2 items-center">
99107
<Data
100-
aria-label="datafortellinger"
101-
className="text-text-subtle"
108+
aria-label="datafortellinger"
109+
className="text-text-subtle"
102110
/>{' '}
103-
{d.stories.length}
111+
{d.stories.length}
104112
</span>
105-
<span className="flex gap-2 items-center">
113+
<span className="flex gap-2 items-center">
106114
<div className="h-[18px] w-[18px] text-text-subtle">
107-
<DataproductLogo />
108-
</div>{' '}
109-
{d.dataproducts.length}
115+
<DataproductLogo/>
116+
</div>
117+
{' '}
118+
{d.dataproducts.length}
110119
</span>
111-
</div>
112-
</div>
113-
)
114-
)}
115-
</div>
116-
</div>
117-
)
120+
</div>
121+
</div>
122+
)
123+
)}
124+
</div>
125+
</div>
126+
)}
127+
<button className="hidden md:block" onClick={() => setCollapsed(!collapsed)}>
128+
{collapsed ? <ChevronRightDoubleIcon/> : <ChevronLeftDoubleIcon/>}
129+
</button>
130+
</div>)
118131
}
119-
120132
export default ProductAreaSidebar

0 commit comments

Comments
 (0)