feat(Accordion): Improve handling of according item width

Author: PrettyCoffee

src/Startpage/LinkContainer/Accordion/Accordion.tsx

@@ -3,9 +3,9 @@ import { MouseEvent, PropsWithChildren, useState } from "react"
 import styled from "@emotion/styled"
 
 const StyledAccordionContainer = styled.div`
-  margin-left: 100px;
   display: flex;
-  width: calc(100% - 400px - 100px);
+  flex: 1;
+  overflow: hidden;
 `
 
 export const AccordionContainer = ({ children }: PropsWithChildren) => (
@@ -15,6 +15,7 @@ export const AccordionContainer = ({ children }: PropsWithChildren) => (
 const StyledAccordionGroup = styled.div`
   height: 400px;
   display: flex;
+  flex: 1;
   padding: 0 10px;
   flex-direction: row;
   border-right: 3px solid var(--default-color);
@@ -23,9 +24,9 @@ const StyledAccordionGroup = styled.div`
   }
 `
 
-const AccordionContent = styled.div<{ width: number }>`
+const AccordionContent = styled.div<{ width: number | string | null }>`
   height: 100%;
-  width: ${({ width }) => `${width}px`};
+  width: ${({ width }) => (typeof width !== "number" ? width : `${width}px`)};
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -144,10 +145,12 @@ type groupProps = PropsWithChildren<{
 const getAvailableContentWidth = (element: HTMLElement | null) => {
   const parent = element?.parentElement
   if (!parent) return 0
+  if (parent.children.length === 1) return "100%"
   const barWidth = [...parent.children].reduce(
     (width, element) => Math.min(width, (element as HTMLElement).offsetWidth),
     Infinity
   )
+  console.log(barWidth)
   return parent.offsetWidth - parent.children.length * barWidth
 }
 
@@ -158,7 +161,7 @@ export const AccordionGroup = ({
   onClick,
   onMouseDown,
 }: groupProps) => {
-  const [contentWidth, setContentWidth] = useState(active ? 500 : 0)
+  const [contentWidth, setContentWidth] = useState<number | string | null>(null)
 
   return (
     <StyledAccordionGroup

src/Startpage/Startpage.tsx

@@ -16,6 +16,7 @@ const Wrapper = styled.div`
 `
 
 const StyledStartpage = styled.div`
+  gap: 100px;
   padding: 0px 100px;
   display: flex;
   flex-direction: row;