Skip to content

Commit 5538480

Browse files
alinnertalinnert
committed
Work on visuals
1 parent 6307e8e commit 5538480

File tree

15 files changed

+102
-82
lines changed

15 files changed

+102
-82
lines changed

‎src/components/App/App.tsx‎

Lines changed: 34 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import { useSearchMode } from './useSearchMode'
2727
import { useTheme } from './useTheme'
2828
import { useToggleDescriptions } from './useToggleDescriptions'
2929
import { useToggleJumpLinks } from './useToggleJumpLinks'
30+
import { AppMenuDivider } from '../Header/AppMenuDivider'
31+
import { AppSearchButton } from '../Header/AppSearchButton'
3032

3133
export const WebdevHome: FC = () => {
3234
const customizeMode = useCustomizeMode()
@@ -47,12 +49,18 @@ export const WebdevHome: FC = () => {
4749
return (
4850
<AppLayout
4951
sidebar={
50-
isCurrentAppMode(AppMode.default, AppMode.customize) && toggleJumpLinks.showJumpLinks ? (
52+
isCurrentAppMode(AppMode.default, AppMode.customize) &&
53+
toggleJumpLinks.showJumpLinks ? (
5154
<JumpLinks />
5255
) : null
5356
}
5457
header={
5558
<AppHeader
59+
centerItems={
60+
<>
61+
{isCurrentAppMode(AppMode.default) ? <AppSearchButton /> : null}
62+
</>
63+
}
5664
actions={
5765
<>
5866
{isCurrentAppMode(AppMode.default) ? (
@@ -62,33 +70,6 @@ export const WebdevHome: FC = () => {
6270
label="Top"
6371
action={handleScrollTopClick}
6472
/>
65-
<AppAction
66-
icon={mdiMagnify}
67-
label="Search"
68-
action={searchMode.handleSearchAction}
69-
/>
70-
<AppMenu icon={mdiCogOutline} label="Options">
71-
<AppMenuItem
72-
label="Customize links"
73-
icon={<MdiIcon path={mdiListStatus} />}
74-
action={customizeMode.handleCustomizeAction}
75-
/>
76-
<AppMenuItem
77-
label="Show link info"
78-
icon={<MdiIcon path={mdiNoteTextOutline} />}
79-
selected={toggleDescriptions.showDescriptions}
80-
action={toggleDescriptions.toggle}
81-
/>
82-
<AppMenuItem
83-
label="Show group list"
84-
icon={<MdiIcon path={mdiDockLeft} />}
85-
selected={toggleJumpLinks.showJumpLinks}
86-
action={toggleJumpLinks.toggle}
87-
/>
88-
89-
<AppThemeSwitcher />
90-
<AppInfo />
91-
</AppMenu>
9273
</>
9374
) : isCurrentAppMode(AppMode.search) ? (
9475
<>
@@ -98,16 +79,6 @@ export const WebdevHome: FC = () => {
9879
highlight
9980
action={searchMode.handleSearchAction}
10081
/>
101-
<AppMenu icon={mdiCogOutline} label="Options">
102-
<AppMenuItem
103-
label="Show link info"
104-
icon={<MdiIcon path={mdiNoteTextOutline} />}
105-
selected={toggleDescriptions.showDescriptions}
106-
action={toggleDescriptions.toggle}
107-
/>
108-
109-
<AppThemeSwitcher />
110-
</AppMenu>
11182
</>
11283
) : isCurrentAppMode(AppMode.customize) ? (
11384
<>
@@ -117,18 +88,33 @@ export const WebdevHome: FC = () => {
11788
highlight
11889
action={customizeMode.handleCustomizeAction}
11990
/>
120-
<AppMenu icon={mdiCogOutline} label="Options">
121-
<AppMenuItem
122-
label="Show link info"
123-
icon={<MdiIcon path={mdiNoteTextOutline} />}
124-
selected={toggleDescriptions.showDescriptions}
125-
action={toggleDescriptions.toggle}
126-
/>
127-
128-
<AppThemeSwitcher />
129-
</AppMenu>
13091
</>
13192
) : null}
93+
94+
<AppMenu icon={mdiCogOutline} label="Options">
95+
<AppMenuItem
96+
label="Customize links"
97+
icon={<MdiIcon path={mdiListStatus} />}
98+
action={customizeMode.handleCustomizeAction}
99+
visible={isCurrentAppMode(AppMode.default)}
100+
/>
101+
<AppMenuDivider />
102+
<AppMenuItem
103+
label="Show group list"
104+
icon={<MdiIcon path={mdiDockLeft} />}
105+
selected={toggleJumpLinks.showJumpLinks}
106+
action={toggleJumpLinks.toggle}
107+
/>
108+
<AppMenuItem
109+
label="Show link info"
110+
icon={<MdiIcon path={mdiNoteTextOutline} />}
111+
selected={toggleDescriptions.showDescriptions}
112+
action={toggleDescriptions.toggle}
113+
/>
114+
115+
<AppThemeSwitcher />
116+
<AppInfo />
117+
</AppMenu>
132118
</>
133119
}
134120
/>

‎src/components/App/AppInfo.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useAllLinks } from '../../links'
66
import { useHiddenLinksCount } from '../../stores/hiddenLinks/hiddenLinksHooks'
77
import { AppMenuHeader } from '../Header/AppMenuHeader'
88
import { AppMenuItem } from '../Header/AppMenuItem'
9-
import { AppMenuText } from '../Header/AppMenuText'
9+
import { AppMenuFooter } from '../Header/AppMenuFooter'
1010
import { MdiIcon } from '../Icon/MdiIcon'
1111

1212
export const AppInfo: FC = () => {
@@ -26,10 +26,12 @@ export const AppInfo: FC = () => {
2626
label="Source"
2727
action="https://github.com/webdevhome/webdevhome.github.io"
2828
/>
29-
<AppMenuText>WebdevHome v{packageJson.version}</AppMenuText>
30-
<AppMenuText>
31-
{allLinks.length} links / {hiddenLinksCount} hidden
32-
</AppMenuText>
29+
<AppMenuFooter>
30+
<p>WebdevHome v{packageJson.version}</p>
31+
<p>
32+
{hiddenLinksCount}/{allLinks.length} links hidden
33+
</p>
34+
</AppMenuFooter>
3335
</MenuSection>
3436
)
3537
}

‎src/components/App/AppLayout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export const AppLayout: FC<PropsWithChildren<Props>> = ({
1515
<div
1616
className={classNames(
1717
'fixed inset-0',
18-
'grid grid-cols-1 grid-rows-1',
19-
'lg:grid-cols-[auto,1fr] lg:grid-rows-[auto,1fr]',
18+
'grid grid-cols-1 grid-rows-[auto,1fr]',
19+
'lg:grid-cols-[auto,1fr]',
2020
'overflow-hidden',
2121
'bg-white dark:bg-gray-700',
2222
)}

‎src/components/Header/AppAction.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const AppAction: FC<Props> = ({
2121
<div
2222
className={classNames(
2323
'flex items-center',
24-
'p-2',
24+
'px-3 py-1.5',
2525
'rounded-md',
2626
'select-none',
2727
{
@@ -47,7 +47,7 @@ export const AppAction: FC<Props> = ({
4747
<MdiIcon path={icon} />
4848
<div
4949
className={classNames('ml-2 text-sm font-semibold', {
50-
'hidden sm:block': !highlight,
50+
'hidden lg:block': !highlight,
5151
})}
5252
>
5353
{label}

‎src/components/Header/AppHeader.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,27 @@ import { FC, ReactElement } from 'react'
33
import { Logo } from './Logo'
44

55
interface Props {
6+
centerItems?: ReactElement | null
67
actions?: ReactElement | null
78
}
89

9-
export const AppHeader: FC<Props> = ({ actions }) => {
10+
export const AppHeader: FC<Props> = ({ centerItems, actions }) => {
1011
return (
1112
<div
1213
className={classNames(
1314
'grid items-center',
14-
'grid-cols-[1fr,auto]',
15+
'grid-cols-[1fr,auto,1fr]',
1516
'px-page',
1617
)}
1718
>
1819
<Logo />
1920

21+
{centerItems !== null ? (
22+
<div className="flex items-center gap-x-1 py-2">{centerItems}</div>
23+
) : null}
24+
2025
{actions !== null ? (
21-
<div
22-
className={classNames(
23-
'flex flex-wrap justify-center gap-x-1',
24-
'py-2',
25-
)}
26-
>
26+
<div className="flex gap-x-1 place-self-end py-2">
2727
{actions}
2828
</div>
2929
) : null}

‎src/components/Header/AppMenu.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export const AppMenu: FC<PropsWithChildren<Props>> = ({
2323
anchor="bottom end"
2424
className={classNames(
2525
'flex flex-col gap-y-px',
26-
'p-1',
2726
'bg-white dark:bg-gray-600',
2827
'border border-gray-300 dark:border-gray-400',
2928
'rounded-md',

‎src/components/Header/AppMenuDivider.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { FC } from 'react'
2+
3+
export const AppMenuDivider: FC = () => {
4+
return <div className="border-b border-gray-300 dark:border-gray-400 my-1"></div>
5+
}

‎src/components/Header/AppMenuFooter.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { FC, PropsWithChildren } from 'react'
2+
3+
export const AppMenuFooter: FC<PropsWithChildren> = ({ children }) => {
4+
return (
5+
<div className="mt-1 border-t border-gray-300 bg-gray-50 px-2 py-1 text-xs text-gray-300 dark:border-gray-400 dark:bg-gray-500 [&>p]:my-0.5">
6+
{children}
7+
</div>
8+
)
9+
}

‎src/components/Header/AppMenuItem.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,20 @@ type Props = {
66
label: string
77
icon: ReactElement
88
selected?: boolean
9+
visible?: boolean
910
action?: (() => void) | string
1011
}
1112

1213
export const AppMenuItem: FC<Props> = ({
1314
label,
1415
icon,
1516
selected = false,
17+
visible = true,
1618
action = () => {},
1719
}) => {
1820
const wrapperClassNames = classNames(
1921
'flex items-center',
20-
'px-3 py-1',
22+
'mx-1 px-3 py-1 first:mt-1 last:mb-1',
2123
'rounded',
2224
'text-sm font-semibold',
2325
'dark:text-white',
@@ -27,16 +29,20 @@ export const AppMenuItem: FC<Props> = ({
2729
'dark:bg-brand-500 dark:text-brand-300': selected,
2830
'data-[focus]:bg-brand-200 data-[focus]:text-brand-800': selected,
2931
'dark:data-[focus]:bg-brand-400': selected,
30-
'data-[focus]:bg-gray-200 dark:data-[focus]:bg-gray-800': !selected,
32+
'data-[focus]:bg-gray-200 dark:data-[focus]:bg-gray-700': !selected,
3133
'active:bg-brand-300 active:data-[focus]:bg-brand-300 active:data-[focus]:text-brand-950':
3234
selected,
3335
'dark:active:bg-brand-600 dark:active:data-[focus]:bg-brand-600':
3436
selected,
3537
'active:bg-gray-300 active:data-[focus]:bg-gray-300': !selected,
36-
'dark:active:bg-gray-950 dark:active:data-[focus]:bg-gray-950': !selected,
38+
'dark:active:bg-gray-800 dark:active:data-[focus]:bg-gray-800': !selected,
3739
},
3840
)
3941

42+
if (!visible) {
43+
return null
44+
}
45+
4046
return (
4147
<MenuItem>
4248
{typeof action === 'function' ? (

‎src/components/Header/AppMenuText.tsx‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)