Skip to content

Commit

Permalink
Merge pull request #439 from elsoul/addFrontend
Browse files Browse the repository at this point in the history 
better doc menu and toc
  • Loading branch information
@KishiTheMechanic
KishiTheMechanic authored Oct 5, 2024
2 parents 2bb9ee5 + b9d12a5 commit a031ada
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 21 deletions.
10 changes: 5 additions & 5 deletions website/skeet-dev/src/app/[locale]/(default)/doc/DocMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,14 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
const isActivePath = (path: string) => pathname.includes(path)

return (
<li className="mt-3 w-full">
<li className="mt-4 w-full">
<div
className="flex cursor-pointer items-center justify-between gap-2 py-0.5 hover:opacity-70"
onClick={() => setIsOpen(!item.subItems ? false : !isOpen)}
>
{item.subItems ? (
<>
<span className="flex-1 text-sm text-zinc-500 dark:text-zinc-300">
<span className="flex-1 text-sm text-zinc-600 dark:text-zinc-200">
{t(item.title)}
</span>
{isOpen ? (
Expand All @@ -96,16 +96,16 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
)}
</div>
{isOpen && item.subItems && (
<ul className="ml-1.5 mt-1 w-full border-l border-zinc-300 pl-3 dark:border-zinc-500">
<ul className="my-2 ml-1 w-full border-l border-zinc-300 pl-4 dark:border-zinc-500">
{item.subItems.map((subItem) => (
<li key={subItem.title} className="mb-1 w-full">
<Link href={subItem.route} className="w-full">
<p
className={cn(
isActivePath(subItem.route)
? 'text-blue-500 dark:text-blue-300'
: 'text-zinc-500 dark:text-zinc-300',
'w-full py-1.5 text-sm hover:opacity-70',
: 'text-zinc-400 dark:text-zinc-400',
'w-full py-2 text-sm hover:opacity-70',
)}
>
{t(subItem.title)}
Expand Down
10 changes: 5 additions & 5 deletions website/skeet-dev/src/app/[locale]/(default)/v1doc/V1DocMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,14 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
const isActivePath = (path: string) => pathname.includes(path)

return (
<li className="mt-3 w-full">
<li className="mt-4 w-full">
<div
className="flex cursor-pointer items-center justify-between gap-2 py-0.5 hover:opacity-70"
onClick={() => setIsOpen(!item.subItems ? false : !isOpen)}
>
{item.subItems ? (
<>
<span className="flex-1 text-sm text-zinc-500 dark:text-zinc-300">
<span className="flex-1 text-sm text-zinc-600 dark:text-zinc-200">
{t(item.title)}
</span>
{isOpen ? (
Expand All @@ -96,16 +96,16 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
)}
</div>
{isOpen && item.subItems && (
<ul className="ml-1.5 mt-1 w-full border-l border-zinc-300 pl-3 dark:border-zinc-500">
<ul className="my-2 ml-1 w-full border-l border-zinc-300 pl-4 dark:border-zinc-500">
{item.subItems.map((subItem) => (
<li key={subItem.title} className="mb-1 w-full">
<Link href={subItem.route} className="w-full">
<p
className={cn(
isActivePath(subItem.route)
? 'text-blue-500 dark:text-blue-300'
: 'text-zinc-500 dark:text-zinc-300',
'w-full py-1.5 text-sm hover:opacity-70',
: 'text-zinc-400 dark:text-zinc-400',
'w-full py-2 text-sm hover:opacity-70',
)}
>
{t(subItem.title)}
Expand Down
10 changes: 5 additions & 5 deletions website/skeet-dev/src/app/[locale]/(default)/v2doc/V2DocMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,14 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
const isActivePath = (path: string) => pathname.includes(path)

return (
<li className="mt-3 w-full">
<li className="mt-4 w-full">
<div
className="flex cursor-pointer items-center justify-between gap-2 py-0.5 hover:opacity-70"
onClick={() => setIsOpen(!item.subItems ? false : !isOpen)}
>
{item.subItems ? (
<>
<span className="flex-1 text-sm text-zinc-500 dark:text-zinc-300">
<span className="flex-1 text-sm text-zinc-600 dark:text-zinc-200">
{t(item.title)}
</span>
{isOpen ? (
Expand All @@ -96,16 +96,16 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
)}
</div>
{isOpen && item.subItems && (
<ul className="ml-1.5 mt-1 w-full border-l border-zinc-300 pl-3 dark:border-zinc-500">
<ul className="my-2 ml-1 w-full border-l border-zinc-300 pl-4 dark:border-zinc-500">
{item.subItems.map((subItem) => (
<li key={subItem.title} className="mb-1 w-full">
<Link href={subItem.route} className="w-full">
<p
className={cn(
isActivePath(subItem.route)
? 'text-blue-500 dark:text-blue-300'
: 'text-zinc-500 dark:text-zinc-300',
'w-full py-1.5 text-sm hover:opacity-70',
: 'text-zinc-400 dark:text-zinc-400',
'w-full py-2 text-sm hover:opacity-70',
)}
>
{t(subItem.title)}
Expand Down
10 changes: 4 additions & 6 deletions website/skeet-dev/src/components/articles/Toc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@ export default function Toc({ toc, activeItemIds, modalFunction }: Props) {
<>
{toc.length > 0 && (
<>
<div className="p-4 lg:ml-4">
<div className="p-4 lg:ml-6">
<p className="text-base font-semibold tracking-tight">
{t('common.tableOfContents')}
</p>
</div>
<div className="border-l p-4 lg:ml-4">
<div className="border-l px-4 py-1 lg:ml-6">
<nav className="space-y-1" aria-label="Sidebar">
{toc.map((item) => (
<a
Expand All @@ -61,10 +61,8 @@ export default function Toc({ toc, activeItemIds, modalFunction }: Props) {
className={clsx(
activeItemIds.includes(item.id)
? 'text-blue-500 dark:text-blue-300'
: 'text-zinc-500 dark:text-zinc-300',
`block py-1.5 text-sm hover:opacity-70 ml-${
item.depth > 2 ? 3 : 0
}`,
: 'text-zinc-500 dark:text-zinc-300 md:text-zinc-400 md:dark:text-zinc-400',
`block py-2 text-sm hover:opacity-70 ml-${item.depth * 4}`,
)}
aria-current={
activeItemIds.includes(item.id) ? 'location' : undefined
Expand Down

0 comments on commit a031ada

Please sign in to comment.