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

Collapsible sidebar on productArea #304

Merged
merged 6 commits into from
Apr 30, 2024
Merged

Collapsible sidebar on productArea #304

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
721fea0
Working, needs more styling
petteja Apr 11, 2024
152494f
Change to hamburgerIcon
petteja Apr 12, 2024
44746b0
Changed icon and fixed width problem
petteja Apr 12, 2024
eb9d5d8
bugfix
petteja Apr 12, 2024
44401e9
Set width on collapsed to 0
petteja Apr 12, 2024
7dce3a4
Merge branch 'main' into collapsible-menu-productarea
petteja Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 109 additions & 97 deletions components/productArea/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,120 +1,132 @@
import { Data } from '@navikt/ds-icons'
import { Select } from '@navikt/ds-react'
import { useRouter } from 'next/router'
import {Data} from '@navikt/ds-icons'
import {SidebarLeftIcon} from '@navikt/aksel-icons'
import {Select} from '@navikt/ds-react'
import * as React from 'react'
import { PAItems } from '../../pages/productArea/[id]'
import {useState} from 'react'
import {PAItems} from '../../pages/productArea/[id]'
import DataproductLogo from '../lib/icons/dataproductLogo'

interface ProductAreaSidebarProps {
productAreaItems: PAItems
setCurrentItem: (newCurrent: number) => void
currentItem: number
productAreas: any
selectProductArea: (productAreaId: string) => void
productAreaItems: PAItems
setCurrentItem: (newCurrent: number) => void
currentItem: number
productAreas: any
selectProductArea: (productAreaId: string) => void
}

const ProductAreaSidebar = ({
productAreaItems,
setCurrentItem,
currentItem,
productAreas,
selectProductArea,
}: ProductAreaSidebarProps) => {
const relevantProductAreas = productAreas
.filter(
(it: any) =>
it.dataproductsNumber ||
it.storiesNumber ||
it.insightProductsNumber
).sort((l: any, r: any) => (l.name < r.name ? -1 : 1))
return (
<div className="pr-[2rem] w-96 pt-[1.6rem] hidden md:block">
<Select
className="w-full mb-[1rem]"
label=""
onChange={(e) => selectProductArea(e.target.value)}
value={
relevantProductAreas.find((it: any) => it.name == productAreaItems[0].name)
?.id
}
>
{relevantProductAreas.map((it: any, index: number) => (
<option key={index} value={it.id}>
{it.name}
</option>
))}
</Select>
<div className="flex text-base w-full flex-col gap-2">
{productAreaItems.map((d: any, idx: number) =>
d.stories.length + d.dataproducts.length + d.insightProducts.length ? (
<div
key={idx}
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
currentItem == idx
? 'border-l-text-action'
: 'border-l-transparent'
}`}
>
<a
className="font-semibold no-underline hover:underline"
href="#"
onClick={() => setCurrentItem(idx)}
>
{d.name}
</a>
<div className="flex justify-between w-24">
productAreaItems,
setCurrentItem,
currentItem,
productAreas,
selectProductArea,
}: ProductAreaSidebarProps) => {
const relevantProductAreas = productAreas
.filter(
(it: any) =>
it.dataproductsNumber ||
it.storiesNumber ||
it.insightProductsNumber
).sort((l: any, r: any) => (l.name < r.name ? -1 : 1))

const [collapsed, setCollapsed] = useState(false)
return (
<div className={`pr-[2rem] ${collapsed ? 'w-0' : 'w-96'}`}>
{/*<div className="pr-[2rem] w-96">*/}
<button className="hidden md:block h-10" onClick={() => setCollapsed(!collapsed)}>
<SidebarLeftIcon fontSize="1.5rem" title="Vis eller ikke vis sidemeny"></SidebarLeftIcon>
</button>
{collapsed ? null : (
<div className="hidden md:block">
<Select
className="w-full mb-[1rem]"
label=""
onChange={(e) => selectProductArea(e.target.value)}
value={
relevantProductAreas.find((it: any) => it.name == productAreaItems[0].name)
?.id
}
>
{relevantProductAreas.map((it: any, index: number) => (
<option key={index} value={it.id}>
{it.name}
</option>
))}
</Select>
<div className="flex text-base w-full flex-col gap-2">
{productAreaItems.map((d: any, idx: number) =>
d.stories.length + d.dataproducts.length + d.insightProducts.length ? (
<div
key={idx}
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
currentItem == idx
? 'border-l-text-action'
: 'border-l-transparent'
}`}
>
<a
className="font-semibold no-underline hover:underline"
href="#"
onClick={() => setCurrentItem(idx)}
>
{d.name}
</a>
<div className="flex justify-between w-24">
<span className="flex gap-2 items-center">
<Data
aria-label="datafortellinger"
className="text-text-subtle"
aria-label="datafortellinger"
className="text-text-subtle"
/>{' '}
{d.stories.length}
{d.stories.length}
</span>
<span className="flex gap-2 items-center">
<span className="flex gap-2 items-center">
<div className="h-[14px] w-[14px] text-text-subtle">
<DataproductLogo />
</div>{' '}
{d.dataproducts.length}
<DataproductLogo/>
</div>
{' '}
{d.dataproducts.length}
</span>
<span className="flex gap-2 items-center">
<span className="flex gap-2 items-center">
<div className="h-[14px] w-[14px] text-text-subtle">
<Data />
</div>{' '}
{d.insightProducts.length}
<Data/>
</div>
{' '}
{d.insightProducts.length}
</span>
</div>
</div>
) : (
<div
key={idx}
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
currentItem == idx
? 'border-l-text-action'
: 'border-l-transparent'
}`}
>
<p className="font-semibold">{d.name}</p>
<div className="flex justify-between w-24">
</div>
</div>
) : (
<div
key={idx}
className={`border-l-[6px] py-1 px-2 hover:cursor-default ${
currentItem == idx
? 'border-l-text-action'
: 'border-l-transparent'
}`}
>
<p className="font-semibold">{d.name}</p>
<div className="flex justify-between w-24">
<span className="flex gap-2 items-center">
<Data
aria-label="datafortellinger"
className="text-text-subtle"
aria-label="datafortellinger"
className="text-text-subtle"
/>{' '}
{d.stories.length}
{d.stories.length}
</span>
<span className="flex gap-2 items-center">
<span className="flex gap-2 items-center">
<div className="h-[18px] w-[18px] text-text-subtle">
<DataproductLogo />
</div>{' '}
{d.dataproducts.length}
<DataproductLogo/>
</div>
{' '}
{d.dataproducts.length}
</span>
</div>
</div>
)
)}
</div>
</div>
)
</div>
</div>
)
)}
</div>
</div>
)}
</div>)
}

export default ProductAreaSidebar