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

Commit a992251

Browse files
pettejapetteja
authored
Merge pull request #304 from navikt/collapsible-menu-productarea
Collapsible sidebar on productArea
2 parents 8f434d5 + 7dce3a4 commit a992251

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 {SidebarLeftIcon} 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+
<div className={`pr-[2rem] ${collapsed ? 'w-0' : 'w-96'}`}>
35+
{/*<div className="pr-[2rem] w-96">*/}
36+
<button className="hidden md:block h-10" onClick={() => setCollapsed(!collapsed)}>
37+
<SidebarLeftIcon fontSize="1.5rem" title="Vis eller ikke vis sidemeny"></SidebarLeftIcon>
38+
</button>
39+
{collapsed ? null : (
40+
<div className="hidden md:block">
41+
<Select
42+
className="w-full mb-[1rem]"
43+
label=""
44+
onChange={(e) => selectProductArea(e.target.value)}
45+
value={
46+
relevantProductAreas.find((it: any) => it.name == productAreaItems[0].name)
47+
?.id
48+
}
49+
>
50+
{relevantProductAreas.map((it: any, index: number) => (
51+
<option key={index} value={it.id}>
52+
{it.name}
53+
</option>
54+
))}
55+
</Select>
56+
<div className="flex text-base w-full flex-col gap-2">
57+
{productAreaItems.map((d: any, idx: number) =>
58+
d.stories.length + d.dataproducts.length + d.insightProducts.length ? (
59+
<div
60+
key={idx}
61+
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
62+
currentItem == idx
63+
? 'border-l-text-action'
64+
: 'border-l-transparent'
65+
}`}
66+
>
67+
<a
68+
className="font-semibold no-underline hover:underline"
69+
href="#"
70+
onClick={() => setCurrentItem(idx)}
71+
>
72+
{d.name}
73+
</a>
74+
<div className="flex justify-between w-24">
6675
<span className="flex gap-2 items-center">
6776
<Data
68-
aria-label="datafortellinger"
69-
className="text-text-subtle"
77+
aria-label="datafortellinger"
78+
className="text-text-subtle"
7079
/>{' '}
71-
{d.stories.length}
80+
{d.stories.length}
7281
</span>
73-
<span className="flex gap-2 items-center">
82+
<span className="flex gap-2 items-center">
7483
<div className="h-[14px] w-[14px] text-text-subtle">
75-
<DataproductLogo />
76-
</div>{' '}
77-
{d.dataproducts.length}
84+
<DataproductLogo/>
85+
</div>
86+
{' '}
87+
{d.dataproducts.length}
7888
</span>
79-
<span className="flex gap-2 items-center">
89+
<span className="flex gap-2 items-center">
8090
<div className="h-[14px] w-[14px] text-text-subtle">
81-
<Data />
82-
</div>{' '}
83-
{d.insightProducts.length}
91+
<Data/>
92+
</div>
93+
{' '}
94+
{d.insightProducts.length}
8495
</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">
96+
</div>
97+
</div>
98+
) : (
99+
<div
100+
key={idx}
101+
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
102+
currentItem == idx
103+
? 'border-l-text-action'
104+
: 'border-l-transparent'
105+
}`}
106+
>
107+
<p className="font-semibold">{d.name}</p>
108+
<div className="flex justify-between w-24">
98109
<span className="flex gap-2 items-center">
99110
<Data
100-
aria-label="datafortellinger"
101-
className="text-text-subtle"
111+
aria-label="datafortellinger"
112+
className="text-text-subtle"
102113
/>{' '}
103-
{d.stories.length}
114+
{d.stories.length}
104115
</span>
105-
<span className="flex gap-2 items-center">
116+
<span className="flex gap-2 items-center">
106117
<div className="h-[18px] w-[18px] text-text-subtle">
107-
<DataproductLogo />
108-
</div>{' '}
109-
{d.dataproducts.length}
118+
<DataproductLogo/>
119+
</div>
120+
{' '}
121+
{d.dataproducts.length}
110122
</span>
111-
</div>
112-
</div>
113-
)
114-
)}
115-
</div>
116-
</div>
117-
)
123+
</div>
124+
</div>
125+
)
126+
)}
127+
</div>
128+
</div>
129+
)}
130+
</div>)
118131
}
119-
120132
export default ProductAreaSidebar

0 commit comments

Comments
 (0)