Skip to content

Commit 1fe139a

Browse files
alinnertalinnert
committed
Implement toggle jump links
Small UI updates
1 parent 656c340 commit 1fe139a

File tree

11 files changed

+152
-68
lines changed

11 files changed

+152
-68
lines changed

‎index.css‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,21 @@
33
@tailwind utilities;
44

55
@layer base {
6-
svg {
7-
@apply fill-current align-middle;
8-
}
6+
svg {
7+
@apply fill-current align-middle;
8+
}
99
}
1010

1111
@layer components {
12-
.px-page {
13-
@apply px-2 sm:px-4 lg:px-6;
14-
}
12+
.px-page {
13+
@apply px-2 sm:px-4 lg:px-6;
14+
}
15+
16+
.py-page {
17+
@apply py-2 sm:py-4 lg:py-6;
18+
}
19+
20+
.p-page {
21+
@apply p-2 sm:p-4 lg:p-6;
22+
}
1523
}

‎src/components/App/App.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
mdiCogOutline,
66
mdiImage,
77
mdiListStatus,
8-
mdiNoteTextOutline
8+
mdiNoteTextOutline,
99
} from '@mdi/js'
1010
import { FC } from 'react'
1111
import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
@@ -28,13 +28,11 @@ import { useSearchMode } from './useSearchMode'
2828
import { useTheme } from './useTheme'
2929
import { useToggleBackground } from './useToggleBackground'
3030
import { useToggleDescriptions } from './useToggleDescriptions'
31-
import { useToggleJumpLinks } from './useToggleJumpLinks'
3231

3332
export const WebdevHome: FC = () => {
3433
const customizeMode = useCustomizeMode()
3534
const searchMode = useSearchMode()
3635
const toggleDescriptions = useToggleDescriptions()
37-
const toggleJumpLinks = useToggleJumpLinks()
3836
const toggleBackground = useToggleBackground()
3937
const isCurrentAppMode = useIsCurrentAppMode()
4038

@@ -49,12 +47,6 @@ export const WebdevHome: FC = () => {
4947

5048
return (
5149
<AppLayout
52-
sidebar={
53-
isCurrentAppMode(AppMode.default, AppMode.customize) &&
54-
toggleJumpLinks.showJumpLinks || toggleJumpLinks.showJumpLinksMobile ? (
55-
<JumpLinks />
56-
) : null
57-
}
5850
header={
5951
<AppHeader
6052
centerItems={
@@ -120,6 +112,11 @@ export const WebdevHome: FC = () => {
120112
}
121113
/>
122114
}
115+
sidebar={
116+
isCurrentAppMode(AppMode.default, AppMode.customize) ? (
117+
<JumpLinks />
118+
) : null
119+
}
123120
>
124121
{isCurrentAppMode(AppMode.default, AppMode.customize) ? (
125122
<Links />

‎src/components/App/AppLayout.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,16 @@ export const AppLayout: FC<PropsWithChildren<Props>> = ({
1818
<div
1919
className={classNames(
2020
'fixed inset-0',
21-
'grid grid-cols-1 grid-rows-[auto,1fr]',
22-
'lg:grid-cols-[auto,1fr]',
21+
'grid grid-cols-[auto,1fr] grid-rows-[auto,1fr]',
2322
'overflow-hidden',
2423
{
25-
'bg-page-light dark:bg-page-dark bg-cover bg-center':
24+
'bg-page-light bg-cover bg-center dark:bg-page-dark':
2625
toggleBackground.showBackground,
2726
'bg-white dark:bg-gray-800': !toggleBackground.showBackground,
2827
},
2928
)}
3029
>
31-
<div className="lg:col-span-2">{header}</div>
30+
<div className="col-span-2">{header}</div>
3231
<div className="overflow-auto">{sidebar}</div>
3332
<div className="overflow-auto" id="main-content">
3433
{children}

‎src/components/App/useToggleJumpLinks.ts‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
type UseToggleJumpLinksResult = {
99
showJumpLinks: boolean
1010
showJumpLinksMobile: boolean
11-
toggle: () => void
12-
toggleMobile: () => void
11+
toggle: (value?: boolean) => void
12+
toggleMobile: (value?: boolean) => void
1313
}
1414

1515
export function useToggleJumpLinks(): UseToggleJumpLinksResult {
@@ -23,13 +23,19 @@ export function useToggleJumpLinks(): UseToggleJumpLinksResult {
2323
(state) => state.appSettings.showJumpLinksMobile,
2424
)
2525

26-
const toggle = useCallback(() => {
27-
dispatch(setDisplayJumpLinks(!showJumpLinks))
28-
}, [dispatch, showJumpLinks])
26+
const toggle = useCallback(
27+
(value?: boolean) => {
28+
dispatch(setDisplayJumpLinks(value ?? !showJumpLinks))
29+
},
30+
[dispatch, showJumpLinks],
31+
)
2932

30-
const toggleMobile = useCallback(() => {
31-
dispatch(setDisplayJumpLinksMobile(!showJumpLinksMobile))
32-
}, [dispatch, showJumpLinksMobile])
33+
const toggleMobile = useCallback(
34+
(value?: boolean) => {
35+
dispatch(setDisplayJumpLinksMobile(value ?? !showJumpLinksMobile))
36+
},
37+
[dispatch, showJumpLinksMobile],
38+
)
3339

3440
return { showJumpLinks, showJumpLinksMobile, toggle, toggleMobile }
3541
}

‎src/components/Header/AppAction.tsx‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { MdiIcon } from '../Icon/MdiIcon'
44

55
interface Props {
66
icon: string
7+
available?: boolean
78
active?: boolean
89
highlight?: boolean
910
label?: string
@@ -12,11 +13,17 @@ interface Props {
1213

1314
export const AppAction: FC<Props> = ({
1415
icon,
16+
available = true,
1517
active = false,
1618
highlight = false,
1719
label,
1820
action = () => {},
1921
}) => {
22+
function handleClick() {
23+
if (!available) return
24+
action()
25+
}
26+
2027
return (
2128
<div
2229
className={classNames(
@@ -26,24 +33,29 @@ export const AppAction: FC<Props> = ({
2633
'rounded-md',
2734
'select-none',
2835
{
29-
'hover:bg-black/10 active:bg-black/15': !active && !highlight,
30-
'bg-brand-500 hover:bg-brand-600 active:bg-brand-700':
31-
active && !highlight,
32-
'bg-brand-500/15 hover:bg-brand-500/25 active:bg-brand-500/35':
33-
highlight,
36+
'opacity-30': !available,
37+
'hover:bg-black/10 active:bg-black/15':
38+
!active && !highlight && available,
39+
'bg-brand-500': active && !highlight,
40+
'hover:bg-brand-600 active:bg-brand-700':
41+
active && !highlight && available,
42+
'bg-brand-500/15': highlight,
43+
'hover:bg-brand-500/25 active:bg-brand-500/35':
44+
highlight && available,
3445
'dark:hover:bg-white/10 dark:active:bg-white/15':
35-
!active && !highlight,
46+
!active && !highlight && available,
3647
'dark:hover:bg-brand-600 dark:active:bg-brand-700':
37-
active && !highlight,
38-
'dark:bg-white/10 dark:hover:bg-white/20 dark:active:bg-white/30':
39-
highlight,
48+
active && !highlight && available,
49+
'dark:bg-white/10': highlight,
50+
'dark:hover:bg-white/20 dark:active:bg-white/30':
51+
highlight && available,
4052
'text-white': active && !highlight,
4153
'text-gray-800 dark:text-gray-100': !active && !highlight,
4254
'text-brand-600 dark:text-brand-300': highlight,
4355
},
4456
)}
4557
tabIndex={0}
46-
onClick={action}
58+
onClick={handleClick}
4759
>
4860
<MdiIcon path={icon} />
4961

‎src/components/Header/AppHeader.tsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import { mdiClose, mdiMenu } from '@mdi/js'
1+
import { mdiMenu } from '@mdi/js'
22
import classNames from 'classnames'
33
import { FC, ReactElement } from 'react'
44
import { useToggleJumpLinks } from '../App/useToggleJumpLinks'
55
import { AppAction } from './AppAction'
66
import { Logo } from './Logo'
7+
import { config } from '../../tailwindConfig'
8+
import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
9+
import { AppMode } from '../../stores/appMode/appModeReducer'
710

811
interface Props {
912
centerItems?: ReactElement | null
@@ -12,30 +15,44 @@ interface Props {
1215

1316
export const AppHeader: FC<Props> = ({ centerItems, actions }) => {
1417
const toggleJumpLinks = useToggleJumpLinks()
18+
const isCurrentAppMode = useIsCurrentAppMode()
1519

1620
function handleMenuClick() {
17-
// TODO: if (mobile) { toggleJumpLinks.toggleMobile() } else { toggleJumpLinks.toggle() }
21+
const query = `(min-width: ${config.theme.screens.md})`
22+
const queryList = window.matchMedia(query)
23+
24+
if (queryList.matches) {
25+
toggleJumpLinks.toggle()
26+
} else {
27+
toggleJumpLinks.toggleMobile()
28+
}
1829
}
1930

2031
return (
2132
<div
2233
className={classNames(
2334
'grid items-center',
2435
'grid-cols-[1fr,auto] grid-rows-[auto,auto] md:grid-cols-[1fr,auto,1fr] md:grid-rows-1',
36+
'border-b border-black/10 dark:border-white/10',
2537
'px-page',
26-
'bg-white/30 dark:bg-black/30',
2738
)}
2839
>
2940
<div className="flex items-center gap-x-2">
3041
<AppAction
31-
icon={toggleJumpLinks.showJumpLinksMobile ? mdiClose : mdiMenu}
42+
icon={mdiMenu}
3243
action={handleMenuClick}
44+
available={isCurrentAppMode(AppMode.default, AppMode.customize)}
3345
/>
3446
<Logo />
3547
</div>
3648

3749
{centerItems !== null ? (
38-
<div className="col-span-2 row-start-2 flex items-center gap-x-1 justify-self-center py-2 md:col-span-1 md:col-start-2 md:row-start-1">
50+
<div
51+
className={classNames(
52+
'col-span-2 row-start-2 md:col-span-1 md:col-start-2 md:row-start-1',
53+
'flex items-center gap-x-1 justify-self-center',
54+
)}
55+
>
3956
{centerItems}
4057
</div>
4158
) : null}

‎src/components/Header/AppSearchButton.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,22 @@ import { FC } from 'react'
22
import { useSearchMode } from '../App/useSearchMode'
33
import { MdiIcon } from '../Icon/MdiIcon'
44
import { mdiMagnify } from '@mdi/js'
5+
import classNames from 'classnames'
56

67
export const AppSearchButton: FC = () => {
78
const searchMode = useSearchMode()
89

910
return (
1011
<div
11-
className="flex cursor-default gap-x-1 rounded bg-black/10 px-20 py-1 text-black/60 hover:bg-black/20 active:bg-black/25 dark:bg-white/10 dark:text-white/60 dark:hover:bg-white/20 dark:active:bg-white/25"
12+
className={classNames(
13+
'flex gap-x-1',
14+
'mb-2 px-20 py-1 md:mt-2',
15+
'rounded-full',
16+
'bg-black/10 hover:bg-black/20 active:bg-black/25',
17+
'dark:bg-white/10 dark:hover:bg-white/20 dark:active:bg-white/25',
18+
'text-black/60 dark:text-white/60',
19+
'cursor-default',
20+
)}
1221
onClick={searchMode.handleSearchAction}
1322
>
1423
<MdiIcon path={mdiMagnify} />

‎src/components/JumpLinks/JumpLink.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import classNames from 'classnames'
22
import { FC } from 'react'
33
import { slugify } from '../../utils/slugify'
44
import { useToggleBackground } from '../App/useToggleBackground'
5+
import { useToggleJumpLinks } from '../App/useToggleJumpLinks'
56

67
interface Props {
78
label: string
@@ -10,19 +11,21 @@ interface Props {
1011

1112
export const JumpLink: FC<Props> = ({ label, color = 'gray' }) => {
1213
const toggleBackground = useToggleBackground()
14+
const toggleJumpLinks = useToggleJumpLinks()
1315

1416
function handleClick() {
1517
const target = document.getElementById(slugify(label))
1618
if (target === null) return
1719

1820
target.scrollIntoView({ behavior: 'smooth' })
21+
toggleJumpLinks.toggleMobile(false)
1922
}
2023

2124
return (
2225
<div
2326
className={classNames(
2427
'jump-link',
25-
'px-3 py-1 md:px-2.5 md:py-1',
28+
'px-3 py-1.5 md:px-2.5 md:py-1',
2629
'rounded-md',
2730
'cursor-pointer',
2831
'text-sm font-semibold',

0 commit comments

Comments
 (0)