-
+ {label}
+
+ )}
)
}
diff --git a/src/components/Header/AppSearchButton.tsx b/src/components/Header/AppSearchButton.tsx
new file mode 100644
index 00000000..c044a804
--- /dev/null
+++ b/src/components/Header/AppSearchButton.tsx
@@ -0,0 +1,27 @@
+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 (
+
+
+ Search...
+
+ )
+}
diff --git a/src/components/Header/Logo.tsx b/src/components/Header/Logo.tsx
index 4c98f2eb..4e797286 100644
--- a/src/components/Header/Logo.tsx
+++ b/src/components/Header/Logo.tsx
@@ -5,16 +5,13 @@ export const Logo: FC = () => {
return (
- <
Webdev
Home
- />
)
}
diff --git a/src/components/Icon/DefaultIcon.tsx b/src/components/Icon/DefaultIcon.tsx
index c000f414..44b91601 100644
--- a/src/components/Icon/DefaultIcon.tsx
+++ b/src/components/Icon/DefaultIcon.tsx
@@ -9,7 +9,7 @@ export const DefaultIcon: FC = () => {
className={classNames(
'grid items-center justify-center',
'text-gray-300',
- 'w-[27px] h-[27px]',
+ 'h-[27px] w-[27px]',
)}
>
diff --git a/src/components/JumpLinks/JumpLink.tsx b/src/components/JumpLinks/JumpLink.tsx
index 714a902d..88df682b 100644
--- a/src/components/JumpLinks/JumpLink.tsx
+++ b/src/components/JumpLinks/JumpLink.tsx
@@ -1,6 +1,8 @@
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
@@ -8,24 +10,32 @@ interface Props {
}
export const JumpLink: FC
= ({ 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 (
diff --git a/src/components/JumpLinks/JumpLinks.tsx b/src/components/JumpLinks/JumpLinks.tsx
index ea2a375b..f1e334ca 100644
--- a/src/components/JumpLinks/JumpLinks.tsx
+++ b/src/components/JumpLinks/JumpLinks.tsx
@@ -1,45 +1,65 @@
-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'
+import { MdiIcon } from '../Icon/MdiIcon'
+import { mdiClose } from '@mdi/js'
export const JumpLinks: FC = () => {
const allLinksInGroupAreHidden = useAllLinksInGroupAreHidden()
+ const toggleJumpLinks = useToggleJumpLinks()
- const [isOpen, setIsOpen] = useState(false)
-
- function handleToggleClick() {
- setIsOpen(!isOpen)
+ function handleMobileCloseClick() {
+ toggleJumpLinks.toggleMobile()
}
return (
-
+ <>
-
+
+
- {links.items
- .filter((group) => !allLinksInGroupAreHidden(group))
- .map((linkGroup, index) => (
-
- ))}
+
+
+
+
+
+ {links.items
+ .filter((group) => !allLinksInGroupAreHidden(group))
+ .map((linkGroup, index) => (
+
+ ))}
+
-
+
)
}
diff --git a/src/components/Links/Link.tsx b/src/components/Links/Link.tsx
index 92dac36e..e3e0146d 100644
--- a/src/components/Links/Link.tsx
+++ b/src/components/Links/Link.tsx
@@ -18,6 +18,7 @@ import { Kbd } from '../basics/Kbd'
import { DefaultIcon } from '../Icon/DefaultIcon'
import { MdiIcon } from '../Icon/MdiIcon'
import { LinkAction } from './LinkAction'
+import { useToggleBackground } from '../App/useToggleBackground'
interface Props {
link: LinkItem
@@ -34,6 +35,7 @@ export const Link: FC
= ({
}) => {
const dispatch = useAppDispatch()
const isCurrentAppMode = useIsCurrentAppMode()
+ const toggleBackground = useToggleBackground()
const showDescription = useAppSelector(
(state) => state.appSettings.showDescriptions,
@@ -88,11 +90,12 @@ export const Link: FC = ({
'dark:text-gray-400 dark:hover:text-gray-300': !visible,
'text-gray-700': visible,
},
- 'hover:bg-gray-200 active:bg-gray-300',
- 'dark:hover:bg-gray-600 dark:active:bg-gray-500',
+ 'hover:bg-black/10 active:bg-black/15',
+ 'dark:hover:bg-white/10 dark:active:bg-white/15',
{
- 'bg-gray-100 dark:bg-gray-500': focus,
- 'outline outline-2 -outline-offset-1 outline-gray-400': focus,
+ 'bg-black/10 dark:bg-white/10': focus,
+ 'outline outline-1 -outline-offset-1 outline-black/25 dark:outline-white/25':
+ focus,
},
'focus:outline focus:outline-2 focus:-outline-offset-1',
'focus:relative focus:z-10',
@@ -108,14 +111,17 @@ export const Link: FC = ({
'grid items-center justify-center',
'p-1',
'bg-white',
- 'rounded',
+ 'dark:shadow-none rounded',
+ {
+ 'shadow-sm': toggleBackground.showBackground,
+ },
)}
style={{ color: link.color }}
>
{link.icon !== undefined ? (
) : (
@@ -131,11 +137,11 @@ export const Link: FC = ({
{link.title}
+
{searchable && !isCustomizeMode ? (
<>
{focus ? (
-
+
Tab
diff --git a/src/components/Links/LinkAction.tsx b/src/components/Links/LinkAction.tsx
index 035acf6d..5d93b334 100644
--- a/src/components/Links/LinkAction.tsx
+++ b/src/components/Links/LinkAction.tsx
@@ -21,8 +21,8 @@ export const LinkAction: FC
> = ({
'px-2',
'cursor-default',
{
- 'hover:bg-gray-300 active:bg-gray-400': hasHover,
- 'dark:hover:bg-gray-500 dark:active:bg-gray-400': hasHover,
+ 'hover:bg-black/10 active:bg-black/15': hasHover,
+ 'dark:hover:bg-white/10 dark:active:bg-white/15': hasHover,
},
)}
onClick={onClick}
diff --git a/src/components/Links/LinkGroup.tsx b/src/components/Links/LinkGroup.tsx
index 2430399b..168743fb 100644
--- a/src/components/Links/LinkGroup.tsx
+++ b/src/components/Links/LinkGroup.tsx
@@ -17,6 +17,7 @@ import { slugify } from '../../utils/slugify'
import { MdiIcon } from '../Icon/MdiIcon'
import { Link } from './Link'
import { LinkGroupButton } from './LinkGroupButton'
+import { useToggleBackground } from '../App/useToggleBackground'
interface Props {
group: ILinkGroup
@@ -27,6 +28,7 @@ export const LinkGroup: FC = ({ group }) => {
const isCurrentAppMode = useIsCurrentAppMode()
const getIsLinkHidden = useGetIsLinkHidden()
const dispatch = useAppDispatch()
+ const toggleBackground = useToggleBackground()
const [showHiddenLinks, setShowHiddenLinks] = useState(false)
@@ -68,11 +70,8 @@ export const LinkGroup: FC = ({ group }) => {
}
return (
-
-
+
+
= ({ group }) => {
'text-center font-semibold uppercase tracking-wider',
`text-${group.color ?? 'gray'}-800 dark:text-${group.color ?? 'gray'}-50`,
'rounded-md',
+ {
+ [`outline outline-1 -outline-offset-1 outline-${group.color}-300 dark:outline-none`]:
+ toggleBackground.showBackground,
+ },
)}
>
{group.name}
diff --git a/src/components/Links/LinkGroupButton.tsx b/src/components/Links/LinkGroupButton.tsx
index 6c4d72f2..b9909a3b 100644
--- a/src/components/Links/LinkGroupButton.tsx
+++ b/src/components/Links/LinkGroupButton.tsx
@@ -13,7 +13,7 @@ export const LinkGroupButton: FC
> = ({