scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor navigation skeleton

Browse Source
This commit is contained in:
Linus Flood
2024-12-17 08:20:30 +01:00
parent f7a043941b
commit dc6c2ae483
1 changed files with 13 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
View File

@@ -1,3 +1,5 @@
import { Fragment } from "react"
import SkeletonShimmer from "@/components/SkeletonShimmer" import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
@@ -6,6 +8,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./sidebar.module.css" import styles from "./sidebar.module.css"
export default function SidebarNavigationSkeleton() { export default function SidebarNavigationSkeleton() {
const skeletonWidths = ["8ch", "10ch", "9ch", "12ch", "24ch", "10ch", "8ch"]
return ( return (
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<nav className={styles.nav}> <nav className={styles.nav}>
@@ -14,42 +17,16 @@ export default function SidebarNavigationSkeleton() {
</Subtitle> </Subtitle>
<Divider color="beige" /> <Divider color="beige" />
<ul className={styles.list}> <ul className={styles.list}>
<li> {skeletonWidths.map((width, index) => (
<Link href="" size={"regular"} variant="sidebar"> <Fragment key={index}>
<SkeletonShimmer width={"8ch"} /> {index === 4 && <Divider color="beige" />}
</Link> <li>
</li> <Link href="" size="regular" variant="sidebar">
<li> <SkeletonShimmer width={width} />
<Link href="" size={"regular"} variant="sidebar"> </Link>
<SkeletonShimmer width={"10ch"} /> </li>
</Link> </Fragment>
</li> ))}
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"9ch"} />
</Link>
</li>
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"12ch"} />
</Link>
</li>
<Divider color="beige" />
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"24ch"} />
</Link>
</li>
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"10ch"} />
</Link>
</li>
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"8ch"} />
</Link>
</li>
</ul> </ul>
</nav> </nav>
</aside> </aside>