Implement toggle jump links

Small UI updates

Author: alinnert

index.css

@@ -3,13 +3,21 @@
 @tailwind utilities;
 
 @layer base {
-  svg {
-    @apply fill-current align-middle;
-  }
+    svg {
+        @apply fill-current align-middle;
+    }
 }
 
 @layer components {
-  .px-page {
-    @apply px-2 sm:px-4 lg:px-6;
-  }
+    .px-page {
+        @apply px-2 sm:px-4 lg:px-6;
+    }
+
+    .py-page {
+        @apply py-2 sm:py-4 lg:py-6;
+    }
+
+    .p-page {
+        @apply p-2 sm:p-4 lg:p-6;
+    }
 }

src/components/App/App.tsx

@@ -5,7 +5,7 @@ import {
   mdiCogOutline,
   mdiImage,
   mdiListStatus,
-  mdiNoteTextOutline
+  mdiNoteTextOutline,
 } from '@mdi/js'
 import { FC } from 'react'
 import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
@@ -28,13 +28,11 @@ import { useSearchMode } from './useSearchMode'
 import { useTheme } from './useTheme'
 import { useToggleBackground } from './useToggleBackground'
 import { useToggleDescriptions } from './useToggleDescriptions'
-import { useToggleJumpLinks } from './useToggleJumpLinks'
 
 export const WebdevHome: FC = () => {
   const customizeMode = useCustomizeMode()
   const searchMode = useSearchMode()
   const toggleDescriptions = useToggleDescriptions()
-  const toggleJumpLinks = useToggleJumpLinks()
   const toggleBackground = useToggleBackground()
   const isCurrentAppMode = useIsCurrentAppMode()
 
@@ -49,12 +47,6 @@ export const WebdevHome: FC = () => {
 
   return (
     <AppLayout
-      sidebar={
-        isCurrentAppMode(AppMode.default, AppMode.customize) &&
-        toggleJumpLinks.showJumpLinks || toggleJumpLinks.showJumpLinksMobile ? (
-          <JumpLinks />
-        ) : null
-      }
       header={
         <AppHeader
           centerItems={
@@ -120,6 +112,11 @@ export const WebdevHome: FC = () => {
           }
         />
       }
+      sidebar={
+        isCurrentAppMode(AppMode.default, AppMode.customize) ? (
+          <JumpLinks />
+        ) : null
+      }
     >
       {isCurrentAppMode(AppMode.default, AppMode.customize) ? (
         <Links />

src/components/App/AppLayout.tsx

@@ -18,17 +18,16 @@ export const AppLayout: FC<PropsWithChildren<Props>> = ({
     <div
       className={classNames(
         'fixed inset-0',
-        'grid grid-cols-1 grid-rows-[auto,1fr]',
-        'lg:grid-cols-[auto,1fr]',
+        'grid grid-cols-[auto,1fr] grid-rows-[auto,1fr]',
         'overflow-hidden',
         {
-          'bg-page-light dark:bg-page-dark bg-cover bg-center':
+          'bg-page-light bg-cover bg-center dark:bg-page-dark':
             toggleBackground.showBackground,
           'bg-white dark:bg-gray-800': !toggleBackground.showBackground,
         },
       )}
     >
-      <div className="lg:col-span-2">{header}</div>
+      <div className="col-span-2">{header}</div>
       <div className="overflow-auto">{sidebar}</div>
       <div className="overflow-auto" id="main-content">
         {children}

src/components/App/useToggleJumpLinks.ts

@@ -8,8 +8,8 @@ import {
 type UseToggleJumpLinksResult = {
   showJumpLinks: boolean
   showJumpLinksMobile: boolean
-  toggle: () => void
-  toggleMobile: () => void
+  toggle: (value?: boolean) => void
+  toggleMobile: (value?: boolean) => void
 }
 
 export function useToggleJumpLinks(): UseToggleJumpLinksResult {
@@ -23,13 +23,19 @@ export function useToggleJumpLinks(): UseToggleJumpLinksResult {
     (state) => state.appSettings.showJumpLinksMobile,
   )
 
-  const toggle = useCallback(() => {
-    dispatch(setDisplayJumpLinks(!showJumpLinks))
-  }, [dispatch, showJumpLinks])
+  const toggle = useCallback(
+    (value?: boolean) => {
+      dispatch(setDisplayJumpLinks(value ?? !showJumpLinks))
+    },
+    [dispatch, showJumpLinks],
+  )
 
-  const toggleMobile = useCallback(() => {
-    dispatch(setDisplayJumpLinksMobile(!showJumpLinksMobile))
-  }, [dispatch, showJumpLinksMobile])
+  const toggleMobile = useCallback(
+    (value?: boolean) => {
+      dispatch(setDisplayJumpLinksMobile(value ?? !showJumpLinksMobile))
+    },
+    [dispatch, showJumpLinksMobile],
+  )
 
   return { showJumpLinks, showJumpLinksMobile, toggle, toggleMobile }
 }

src/components/Header/AppAction.tsx

@@ -4,6 +4,7 @@ import { MdiIcon } from '../Icon/MdiIcon'
 
 interface Props {
   icon: string
+  available?: boolean
   active?: boolean
   highlight?: boolean
   label?: string
@@ -12,11 +13,17 @@ interface Props {
 
 export const AppAction: FC<Props> = ({
   icon,
+  available = true,
   active = false,
   highlight = false,
   label,
   action = () => {},
 }) => {
+  function handleClick() {
+    if (!available) return
+    action()
+  }
+
   return (
     <div
       className={classNames(
@@ -26,24 +33,29 @@ export const AppAction: FC<Props> = ({
         'rounded-md',
         'select-none',
         {
-          'hover:bg-black/10 active:bg-black/15': !active && !highlight,
-          'bg-brand-500 hover:bg-brand-600 active:bg-brand-700':
-            active && !highlight,
-          'bg-brand-500/15 hover:bg-brand-500/25 active:bg-brand-500/35':
-            highlight,
+          'opacity-30': !available,
+          'hover:bg-black/10 active:bg-black/15':
+            !active && !highlight && available,
+          'bg-brand-500': active && !highlight,
+          'hover:bg-brand-600 active:bg-brand-700':
+            active && !highlight && available,
+          'bg-brand-500/15': highlight,
+          'hover:bg-brand-500/25 active:bg-brand-500/35':
+            highlight && available,
           'dark:hover:bg-white/10 dark:active:bg-white/15':
-            !active && !highlight,
+            !active && !highlight && available,
           'dark:hover:bg-brand-600 dark:active:bg-brand-700':
-            active && !highlight,
-          'dark:bg-white/10 dark:hover:bg-white/20 dark:active:bg-white/30':
-            highlight,
+            active && !highlight && available,
+          'dark:bg-white/10': highlight,
+          'dark:hover:bg-white/20 dark:active:bg-white/30':
+            highlight && available,
           'text-white': active && !highlight,
           'text-gray-800 dark:text-gray-100': !active && !highlight,
           'text-brand-600 dark:text-brand-300': highlight,
         },
       )}
       tabIndex={0}
-      onClick={action}
+      onClick={handleClick}
     >
       <MdiIcon path={icon} />
 

src/components/Header/AppHeader.tsx

@@ -1,9 +1,12 @@
-import { mdiClose, mdiMenu } from '@mdi/js'
+import { mdiMenu } from '@mdi/js'
 import classNames from 'classnames'
 import { FC, ReactElement } from 'react'
 import { useToggleJumpLinks } from '../App/useToggleJumpLinks'
 import { AppAction } from './AppAction'
 import { Logo } from './Logo'
+import { config } from '../../tailwindConfig'
+import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
+import { AppMode } from '../../stores/appMode/appModeReducer'
 
 interface Props {
   centerItems?: ReactElement | null
@@ -12,30 +15,44 @@ interface Props {
 
 export const AppHeader: FC<Props> = ({ centerItems, actions }) => {
   const toggleJumpLinks = useToggleJumpLinks()
+  const isCurrentAppMode = useIsCurrentAppMode()
 
   function handleMenuClick() {
-    // TODO: if (mobile) { toggleJumpLinks.toggleMobile() } else { toggleJumpLinks.toggle() }
+    const query = `(min-width: ${config.theme.screens.md})`
+    const queryList = window.matchMedia(query)
+
+    if (queryList.matches) {
+      toggleJumpLinks.toggle()
+    } else {
+      toggleJumpLinks.toggleMobile()
+    }
   }
 
   return (
     <div
       className={classNames(
         'grid items-center',
         'grid-cols-[1fr,auto] grid-rows-[auto,auto] md:grid-cols-[1fr,auto,1fr] md:grid-rows-1',
+        'border-b border-black/10 dark:border-white/10',
         'px-page',
-        'bg-white/30 dark:bg-black/30',
       )}
     >
       <div className="flex items-center gap-x-2">
         <AppAction
-          icon={toggleJumpLinks.showJumpLinksMobile ? mdiClose : mdiMenu}
+          icon={mdiMenu}
           action={handleMenuClick}
+          available={isCurrentAppMode(AppMode.default, AppMode.customize)}
         />
         <Logo />
       </div>
 
       {centerItems !== null ? (
-        <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">
+        <div
+          className={classNames(
+            'col-span-2 row-start-2 md:col-span-1 md:col-start-2 md:row-start-1',
+            'flex items-center gap-x-1 justify-self-center',
+          )}
+        >
           {centerItems}
         </div>
       ) : null}

src/components/Header/AppSearchButton.tsx

@@ -2,13 +2,22 @@ import { FC } from 'react'
 import { useSearchMode } from '../App/useSearchMode'
 import { MdiIcon } from '../Icon/MdiIcon'
 import { mdiMagnify } from '@mdi/js'
+import classNames from 'classnames'
 
 export const AppSearchButton: FC = () => {
   const searchMode = useSearchMode()
 
   return (
     <div
-      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"
+      className={classNames(
+        'flex gap-x-1',
+        'mb-2 px-20 py-1 md:mt-2',
+        'rounded-full',
+        'bg-black/10 hover:bg-black/20 active:bg-black/25',
+        'dark:bg-white/10 dark:hover:bg-white/20 dark:active:bg-white/25',
+        'text-black/60 dark:text-white/60',
+        'cursor-default',
+      )}
       onClick={searchMode.handleSearchAction}
     >
       <MdiIcon path={mdiMagnify} />

src/components/JumpLinks/JumpLink.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import { FC } from 'react'
 import { slugify } from '../../utils/slugify'
 import { useToggleBackground } from '../App/useToggleBackground'
+import { useToggleJumpLinks } from '../App/useToggleJumpLinks'
 
 interface Props {
   label: string
@@ -10,19 +11,21 @@ interface Props {
 
 export const JumpLink: FC<Props> = ({ label, color = 'gray' }) => {
   const toggleBackground = useToggleBackground()
+  const toggleJumpLinks = useToggleJumpLinks()
 
   function handleClick() {
     const target = document.getElementById(slugify(label))
     if (target === null) return
 
     target.scrollIntoView({ behavior: 'smooth' })
+    toggleJumpLinks.toggleMobile(false)
   }
 
   return (
     <div
       className={classNames(
         'jump-link',
-        'px-3 py-1 md:px-2.5 md:py-1',
+        'px-3 py-1.5 md:px-2.5 md:py-1',
         'rounded-md',
         'cursor-pointer',
         'text-sm font-semibold',