Toggle jump links separately on mobile

Also update styles

Author: alinnert

src/components/App/App.tsx

@@ -3,10 +3,9 @@ import {
   mdiArrowLeft,
   mdiCheck,
   mdiCogOutline,
-  mdiDockLeft,
   mdiImage,
   mdiListStatus,
-  mdiNoteTextOutline,
+  mdiNoteTextOutline
 } from '@mdi/js'
 import { FC } from 'react'
 import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
@@ -52,7 +51,7 @@ export const WebdevHome: FC = () => {
     <AppLayout
       sidebar={
         isCurrentAppMode(AppMode.default, AppMode.customize) &&
-        toggleJumpLinks.showJumpLinks ? (
+        toggleJumpLinks.showJumpLinks || toggleJumpLinks.showJumpLinksMobile ? (
           <JumpLinks />
         ) : null
       }
@@ -101,12 +100,6 @@ export const WebdevHome: FC = () => {
                   visible={isCurrentAppMode(AppMode.default)}
                 />
                 <AppMenuDivider />
-                <AppMenuItem
-                  label="Show group list"
-                  icon={<MdiIcon path={mdiDockLeft} />}
-                  selected={toggleJumpLinks.showJumpLinks}
-                  action={toggleJumpLinks.toggle}
-                />
                 <AppMenuItem
                   label="Show link info"
                   icon={<MdiIcon path={mdiNoteTextOutline} />}

src/components/App/useToggleJumpLinks.ts

@@ -1,10 +1,15 @@
 import { useCallback } from 'react'
 import { useAppDispatch, useAppSelector } from '../../stores'
-import { setDisplayJumpLinks } from '../../stores/appSettings/appSettingsActions'
+import {
+  setDisplayJumpLinks,
+  setDisplayJumpLinksMobile,
+} from '../../stores/appSettings/appSettingsActions'
 
 type UseToggleJumpLinksResult = {
   showJumpLinks: boolean
+  showJumpLinksMobile: boolean
   toggle: () => void
+  toggleMobile: () => void
 }
 
 export function useToggleJumpLinks(): UseToggleJumpLinksResult {
@@ -14,9 +19,17 @@ export function useToggleJumpLinks(): UseToggleJumpLinksResult {
     (state) => state.appSettings.showJumpLinks,
   )
 
+  const showJumpLinksMobile = useAppSelector(
+    (state) => state.appSettings.showJumpLinksMobile,
+  )
+
   const toggle = useCallback(() => {
     dispatch(setDisplayJumpLinks(!showJumpLinks))
   }, [dispatch, showJumpLinks])
 
-  return { showJumpLinks, toggle }
+  const toggleMobile = useCallback(() => {
+    dispatch(setDisplayJumpLinksMobile(!showJumpLinksMobile))
+  }, [dispatch, showJumpLinksMobile])
+
+  return { showJumpLinks, showJumpLinksMobile, toggle, toggleMobile }
 }

src/components/Header/AppAction.tsx

@@ -21,7 +21,8 @@ export const AppAction: FC<Props> = ({
     <div
       className={classNames(
         'flex items-center',
-        'px-3 py-1.5',
+        'p-1.5',
+        { 'sm:px-3': label !== undefined },
         'rounded-md',
         'select-none',
         {
@@ -45,13 +46,16 @@ export const AppAction: FC<Props> = ({
       onClick={action}
     >
       <MdiIcon path={icon} />
-      <div
-        className={classNames('ml-2 text-sm font-semibold', {
-          'hidden lg:block': !highlight,
-        })}
-      >
-        {label}
-      </div>
+
+      {label !== undefined ? (
+        <div
+          className={classNames('ml-2 text-sm font-semibold', {
+            'hidden lg:block': !highlight,
+          })}
+        >
+          {label}
+        </div>
+      ) : null}
     </div>
   )
 }

src/components/Header/AppHeader.tsx

@@ -1,5 +1,8 @@
+import { mdiClose, 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'
 
 interface Props {
@@ -8,16 +11,28 @@ interface Props {
 }
 
 export const AppHeader: FC<Props> = ({ centerItems, actions }) => {
+  const toggleJumpLinks = useToggleJumpLinks()
+
+  function handleMenuClick() {
+    // TODO: if (mobile) { toggleJumpLinks.toggleMobile() } else { toggleJumpLinks.toggle() }
+  }
+
   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',
         'px-page',
-        'bg-white/20 dark:bg-black/20',
+        'bg-white/30 dark:bg-black/30',
       )}
     >
-      <Logo />
+      <div className="flex items-center gap-x-2">
+        <AppAction
+          icon={toggleJumpLinks.showJumpLinksMobile ? mdiClose : mdiMenu}
+          action={handleMenuClick}
+        />
+        <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">

src/components/Header/Logo.tsx

@@ -5,15 +5,13 @@ export const Logo: FC = () => {
   return (
     <div
       className={classNames(
-        'font-mono text-2xl',
+        'font-mono text-xl',
         'text-gray-400 dark:text-gray-200',
         'select-none text-nowrap',
       )}
     >
-      <span>&lt;</span>
       <span className="text-brand-500 dark:text-brand-300">Webdev</span>
       <span className="text-brand-800 dark:text-brand-100">Home</span>
-      <span> /&gt;</span>
     </div>
   )
 }

src/components/JumpLinks/JumpLinks.tsx

@@ -1,35 +1,27 @@
-import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
 import classNames from 'classnames'
-import { FC, useState } from 'react'
-import { MdiIcon } from '../Icon/MdiIcon'
-import { JumpLink } from './JumpLink'
+import { FC } from 'react'
 import { links } from '../../links'
 import { useAllLinksInGroupAreHidden } from '../../stores/hiddenLinks/hiddenLinksHooks'
+import { useToggleJumpLinks } from '../App/useToggleJumpLinks'
+import { JumpLink } from './JumpLink'
 
 export const JumpLinks: FC = () => {
   const allLinksInGroupAreHidden = useAllLinksInGroupAreHidden()
-
-  const [isOpen, setIsOpen] = useState(false)
-
-  function handleToggleClick() {
-    setIsOpen(!isOpen)
-  }
+  const toggleJumpLinks = useToggleJumpLinks()
 
   return (
-    <div className="jump-links px-page w-[300px] py-4">
-      <div
-        className="flex cursor-default select-none items-center gap-x-2 dark:text-white md:hidden"
-        onClick={handleToggleClick}
-      >
-        <MdiIcon path={isOpen ? mdiChevronUp : mdiChevronDown}></MdiIcon>
-        <div>Jump to</div>
-      </div>
-      <div
-        className={classNames('flex flex-col gap-1 md:flex', {
-          hidden: !isOpen,
-          block: isOpen,
-        })}
-      >
+    <div
+      className={classNames(
+        'fixed top-10 lg:static',
+        'bg-white dark:bg-black lg:bg-white/20 dark:lg:bg-black/20',
+        'jump-links px-page w-[300px] py-4',
+        {
+          'left-0': toggleJumpLinks.showJumpLinksMobile,
+          '-left-full': !toggleJumpLinks.showJumpLinksMobile,
+        },
+      )}
+    >
+      <div className={classNames('flex flex-col gap-1 md:flex')}>
         {links.items
           .filter((group) => !allLinksInGroupAreHidden(group))
           .map((linkGroup, index) => (

src/components/Links/LinkGroup.tsx

@@ -70,7 +70,7 @@ export const LinkGroup: FC<Props> = ({ group }) => {
   }
 
   return (
-    <div id={slugify(group.name)} className="scroll-mt-20">
+    <div id={slugify(group.name)} className="scroll-mt-4">
       <div className="mb-2 flex gap-x-1">
         <div
           className={classNames(

src/stores/appSettings/appSettingsActions.ts

@@ -4,6 +4,7 @@ export const enum SettingsActions {
   setTheme,
   setDisplayDescription,
   setDisplayJumpLinks,
+  setDisplayJumpLinksMobile,
   setDisplayBackground,
 }
 
@@ -22,6 +23,11 @@ type SetDisplayJumpLinksAction = {
   payload: boolean
 }
 
+type SetDisplayJumpLinksMobileAction = {
+  type: SettingsActions.setDisplayJumpLinksMobile
+  payload: boolean
+}
+
 type SetDisplayBackgroundAction = {
   type: SettingsActions.setDisplayBackground
   payload: boolean
@@ -31,6 +37,7 @@ export type AppSettingsActions =
   | SetThemeAction
   | SetDisplayDescriptionAction
   | SetDisplayJumpLinksAction
+  | SetDisplayJumpLinksMobileAction
   | SetDisplayBackgroundAction
 
 export function setTheme(payload: AppTheme): SetThemeAction {
@@ -49,6 +56,12 @@ export function setDisplayJumpLinks(
   return { type: SettingsActions.setDisplayJumpLinks, payload }
 }
 
+export function setDisplayJumpLinksMobile(
+  payload: boolean,
+): SetDisplayJumpLinksMobileAction {
+  return { type: SettingsActions.setDisplayJumpLinksMobile, payload }
+}
+
 export function setDisplayBackground(
   payload: boolean,
 ): SetDisplayBackgroundAction {

src/stores/appSettings/appSettingsReducer.ts

@@ -10,13 +10,15 @@ type AppSettingsState = {
   theme: AppTheme
   showDescriptions: boolean
   showJumpLinks: boolean
+  showJumpLinksMobile: boolean
   showBackground: boolean
 }
 
 const initialState: AppSettingsState = {
   theme: AppTheme.auto,
   showDescriptions: false,
   showJumpLinks: true,
+  showJumpLinksMobile: false,
   showBackground: false,
 }
 
@@ -37,6 +39,10 @@ export function appSettings(
       return { ...state, showJumpLinks: action.payload }
     }
 
+    case SettingsActions.setDisplayJumpLinksMobile: {
+      return { ...state, showJumpLinksMobile: action.payload }
+    }
+
     case SettingsActions.setDisplayBackground: {
       return { ...state, showBackground: action.payload }
     }

src/stores/index.ts

@@ -24,9 +24,10 @@ export const store = createStore(rootReducer, {
     theme: loadThemeSetting(),
     showDescriptions: loadShowDescriptionsSetting(),
     showJumpLinks: loadShowJumpLinksSetting(),
+    showJumpLinksMobile: false,
     showBackground: loadShowBackgroundSetting(),
   },
-})
+}, window.__REDUX_DEVTOOLS_EXTENSION__?.())
 
 persistToLocalStorage(store)