Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor/fix: Move sidebar from article to base layout #6623

Closed
wants to merge 6 commits into from
Closed

refactor/fix: Move sidebar from article to base layout #6623

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0fb13c9
refactor/fix: Move sidebar from article to base layout
abizek Apr 8, 2024
fd36223
Merge remote-tracking branch 'upstream/main' into fix/sidebar-reload
abizek Apr 8, 2024
b796376
fix: Anchor scroll behind navbar
abizek Apr 8, 2024
03e5d39
style: Fix spacing
abizek Apr 15, 2024
811f52e
refactor: Use css to hide sidebar instead of js
abizek Apr 15, 2024
e6b7e2b
refactor: React node false -> null
abizek Apr 16, 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
2 changes: 2 additions & 0 deletions app/[locale]/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ import { useTranslations } from 'next-intl';
import type { FC } from 'react';

import Button from '@/components/Common/Button';
import { useHideSidebar } from '@/hooks';
import CenteredLayout from '@/layouts/Centered';

const ErrorPage: FC<{ error: Error }> = ({ error }) => {
captureException(error);
const t = useTranslations();
useHideSidebar();
AugustinMauroy marked this conversation as resolved.
Show resolved Hide resolved

return (
<CenteredLayout>
Expand Down
2 changes: 2 additions & 0 deletions app/[locale]/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import { useTranslations } from 'next-intl';
import type { FC } from 'react';

import Button from '@/components/Common/Button';
import { useHideSidebar } from '@/hooks';
import CenteredLayout from '@/layouts/Centered';

const NotFoundPage: FC = () => {
const t = useTranslations();
useHideSidebar();

return (
<CenteredLayout>
Expand Down
2 changes: 1 addition & 1 deletion app/global-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
return (
<html>
<body>
<BaseLayout>
<BaseLayout showSidebar={false}>
<CenteredLayout>
<div className="glowingBackdrop" />

Expand Down
57 changes: 37 additions & 20 deletions components/Common/ProgressionSidebar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,45 @@
.wrapper {
@apply flex
flex-col
gap-8
overflow-auto
border-r
border-neutral-200
@apply w-full
border-r-0
bg-white
px-4
py-6
dark:border-neutral-900
dark:bg-neutral-950
md:max-w-xs
lg:px-6
xs:w-full
xs:border-r-0;
md:border-r
md:border-r-neutral-200
md:dark:border-r-neutral-900;

> section {
@apply flex
xs:hidden;
}
> aside {
@apply sticky
top-0
-mt-16
pt-16;

> nav {
@apply flex
max-h-[calc(100svh-4rem)]
flex-col
items-center
gap-8
overflow-y-auto
px-4
py-6
[scrollbar-color:theme(colors.neutral.200)_transparent]
[scrollbar-width:thin]
dark:[scrollbar-color:theme(colors.neutral.600)_transparent]
md:items-start
lg:px-6;

> span {
@apply flex
w-full
max-w-2xl
md:hidden;
}

> span {
@apply hidden
w-full
xs:flex;
> section {
@apply hidden
ovflowd marked this conversation as resolved.
Show resolved Hide resolved
md:flex;
}
}
}
}
40 changes: 23 additions & 17 deletions components/Common/ProgressionSidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
'use client';

import { useTranslations } from 'next-intl';
import type { ComponentProps, FC } from 'react';

import ProgressionSidebarGroup from '@/components/Common/ProgressionSidebar/ProgressionSidebarGroup';
import WithRouterSelect from '@/components/withRouterSelect';
import { useClientContext } from '@/hooks/react-server';
import { usePathname } from '@/navigation.mjs';

import styles from './index.module.css';

Expand All @@ -13,7 +15,7 @@ type ProgressionSidebarProps = {

const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => {
const t = useTranslations();
const { pathname } = useClientContext();
const pathname = usePathname();

const selectItems = groups.map(({ items, groupName }) => ({
label: groupName,
Expand All @@ -26,21 +28,25 @@ const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => {
.find(item => pathname === item.value);

return (
<nav className={styles.wrapper}>
<WithRouterSelect
label={t('components.common.sidebar.title')}
values={selectItems}
defaultValue={currentItem?.value}
/>

{groups.map(({ groupName, items }) => (
<ProgressionSidebarGroup
key={groupName.toString()}
groupName={groupName}
items={items}
/>
))}
</nav>
<div className={styles.wrapper}>
<aside>
<nav>
<WithRouterSelect
label={t('components.common.sidebar.title')}
values={selectItems}
defaultValue={currentItem?.value}
/>

{groups.map(({ groupName, items }) => (
<ProgressionSidebarGroup
key={groupName.toString()}
groupName={groupName}
items={items}
/>
))}
</nav>
</aside>
</div>
);
};

Expand Down
3 changes: 2 additions & 1 deletion components/Common/Select/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@
}

.dropdown {
@apply max-h-48
@apply z-20
max-h-48
max-w-xs
overflow-hidden
overflow-y-auto
Expand Down
48 changes: 30 additions & 18 deletions components/Containers/MetaBar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,34 @@
.wrapper {
@apply flex
flex-col
items-start
gap-8
@apply w-full
border-t
border-t-neutral-200
dark:border-t-neutral-900
lg:max-w-xs
lg:border-l
lg:border-t-0
lg:border-l-neutral-200
lg:dark:border-l-neutral-900;

nav {
@apply sticky
top-0
pl-6
lg:-mt-16
lg:pt-16;
}

dl {
@apply w-full
ovflowd marked this conversation as resolved.
Show resolved Hide resolved
overflow-y-auto
border-l
border-l-neutral-200
px-4
py-6
dark:border-l-neutral-900
md:max-w-xs
lg:px-6
xs:mt-8
xs:w-full
xs:border-l-0
xs:border-t
xs:border-t-neutral-200
xs:dark:border-t-neutral-900;
pb-20
pr-10
pt-6
[scrollbar-color:theme(colors.neutral.200)_transparent]
[scrollbar-width:thin]
dark:[scrollbar-color:theme(colors.neutral.600)_transparent]
md:pb-6
lg:max-h-[calc(100svh-4rem)];
}

dt {
@apply mb-2
Expand Down Expand Up @@ -53,7 +65,7 @@
@apply flex
list-none
flex-col
gap-1.5
gap-0.5
p-0;
}

Expand Down
56 changes: 29 additions & 27 deletions components/Containers/MetaBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,33 +27,35 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
);

return (
<div className={styles.wrapper}>
<dl>
{Object.entries(items)
.filter(([, value]) => !!value)
.map(([key, value]) => (
<Fragment key={key}>
<dt>{t(key)}</dt>
<dd>{value}</dd>
</Fragment>
))}

{heading.length > 0 && (
<>
<dt>{t('components.metabar.tableOfContents')}</dt>
<dd>
<ol>
{heading.map(head => (
<li key={head.value}>
<Link href={`#${head?.data?.id}`}>{head.value}</Link>
</li>
))}
</ol>
</dd>
</>
)}
</dl>
</div>
<aside className={styles.wrapper}>
<nav>
<dl>
{Object.entries(items)
.filter(([, value]) => !!value)
.map(([key, value]) => (
<Fragment key={key}>
<dt>{t(key)}</dt>
<dd>{value}</dd>
</Fragment>
))}

{heading.length > 0 && (
<>
<dt>{t('components.metabar.tableOfContents')}</dt>
<dd>
<ol>
{heading.map(head => (
<li key={head.value}>
<Link href={`#${head?.data?.id}`}>{head.value}</Link>
</li>
))}
</ol>
</dd>
</>
)}
</dl>
</nav>
</aside>
);
};

Expand Down
5 changes: 4 additions & 1 deletion components/Containers/NavBar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
.container {
@apply border-neutral-200
@apply sticky
top-0
z-10
border-neutral-200
bg-white
dark:border-neutral-900
dark:bg-neutral-950
Expand Down
22 changes: 11 additions & 11 deletions components/Containers/Sidebar/SidebarItem/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
.sideBarItem {
@apply flex
w-full
list-none
text-neutral-800
dark:text-neutral-200;
list-none;

a {
@apply inline-flex
items-center
gap-2
p-2;
p-2
text-neutral-800
dark:text-neutral-200;

&.active {
@apply rounded
bg-green-600
text-white
dark:text-white;
}
}

.label {
Expand All @@ -24,10 +31,3 @@
dark:text-neutral-200;
}
}

.active {
@apply rounded
bg-green-600
text-white
dark:text-white;
}
Loading
Loading