import * as React from 'react'; import Head from 'next/head'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Square from '../../placeholders/Square'; interface CircularItemProps { degree: number; } const CircularItem: React.FC = ({ degree, children }) => { return (

{children}

); }; const Details: React.FC<{}> = () => { const numItems = 6; return ( ...

...

... `} css={` .navigation { position: relative; } .navigation__circle { /* Position */ position: absolute; top: 0; /* 80px is the distance from the item to the trigger element. Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item in case you want to have a total of 6 menu items. The formulation is 360 / numberOfItems * indexOfItem */ transform: rotate(0deg) translateX(-80px); /* Must have the same size as the trigger element */ height: 32px; width: 32px; } .navigation__content { /* Rotate it to make it displayed vertically Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item in case you want to have a total of 6 menu items. The formulation is -(360 / numberOfItems * indexOfItem) */ transform: rotate(-0deg); /* Center the content */ align-items: center; display: flex; justify-content: center; /* Take full size */ height: 100%; width: 100%; } `} >

{Array(numItems) .fill(0) .map((_, i) => { return ( {i + 1} ); })}

); }; export default Details;