Skip to content

Commit 3c53f58

Browse files
timlrxtimlrx
authored
Merge pull request #942 from Spiteless/ts.highlight_nav_links
Add highlighting to Nav links, ThemeSwitch dropdown
2 parents 391f4c6 + ee99647 commit 3c53f58

File tree

4 files changed

+54
-28
lines changed

4 files changed

+54
-28
lines changed

‎components/Header.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ const Header = () => {
3232
<Link
3333
key={link.title}
3434
href={link.href}
35-
className="hidden font-medium text-gray-900 dark:text-gray-100 sm:block"
35+
className="hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400
36+
sm:block"
3637
>
3738
{link.title}
3839
</Link>

‎components/MobileNav.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ const MobileNav = () => {
2626
xmlns="http://www.w3.org/2000/svg"
2727
viewBox="0 0 20 20"
2828
fill="currentColor"
29-
className="h-8 w-8 text-gray-900 dark:text-gray-100"
29+
className="h-8 w-8 text-gray-900 hover:text-primary-500 dark:text-gray-100
30+
dark:hover:text-primary-400"
3031
>
3132
<path
3233
fillRule="evenodd"
@@ -46,7 +47,8 @@ const MobileNav = () => {
4647
xmlns="http://www.w3.org/2000/svg"
4748
viewBox="0 0 20 20"
4849
fill="currentColor"
49-
className="text-gray-900 dark:text-gray-100"
50+
className="text-gray-900 hover:text-primary-500 dark:text-gray-100
51+
dark:hover:text-primary-400"
5052
>
5153
<path
5254
fillRule="evenodd"
@@ -61,7 +63,8 @@ const MobileNav = () => {
6163
<div key={link.title} className="px-12 py-4">
6264
<Link
6365
href={link.href}
64-
className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
66+
className="text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-500 dark:text-gray-100
67+
dark:hover:text-primary-400"
6568
onClick={onToggleNav}
6669
>
6770
{link.title}

‎components/SearchButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ const SearchButton = () => {
1818
viewBox="0 0 24 24"
1919
strokeWidth={1.5}
2020
stroke="currentColor"
21-
className="h-6 w-6 text-gray-900 dark:text-gray-100"
21+
className="h-6 w-6 text-gray-900 hover:text-primary-500 dark:text-gray-100
22+
dark:hover:text-primary-400"
2223
>
2324
<path
2425
strokeLinecap="round"

‎components/ThemeSwitch.tsx‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Sun = () => (
99
xmlns="http://www.w3.org/2000/svg"
1010
viewBox="0 0 20 20"
1111
fill="currentColor"
12-
className="h-6 w-6 text-gray-900 dark:text-gray-100"
12+
className="group:hover:text-gray-100 h-6 w-6"
1313
>
1414
<path
1515
fillRule="evenodd"
@@ -23,7 +23,7 @@ const Moon = () => (
2323
xmlns="http://www.w3.org/2000/svg"
2424
viewBox="0 0 20 20"
2525
fill="currentColor"
26-
className="h-6 w-6 text-gray-900 dark:text-gray-100"
26+
className="group:hover:text-gray-100 h-6 w-6"
2727
>
2828
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
2929
</svg>
@@ -37,13 +37,14 @@ const Monitor = () => (
3737
stroke-width="2"
3838
stroke-linecap="round"
3939
stroke-linejoin="round"
40-
className="h-6 w-6 text-gray-900 dark:text-gray-100"
40+
className="group:hover:text-gray-100 h-6 w-6"
4141
>
4242
<rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
4343
<line x1="7" y1="17" x2="13" y2="17"></line>
4444
<line x1="10" y1="13" x2="10" y2="17"></line>
4545
</svg>
4646
)
47+
const Blank = () => <svg className="h-6 w-6" />
4748

4849
const ThemeSwitch = () => {
4950
const [mounted, setMounted] = useState(false)
@@ -55,8 +56,10 @@ const ThemeSwitch = () => {
5556
return (
5657
<div className="mr-5">
5758
<Menu as="div" className="relative inline-block text-left">
58-
<div>
59-
<Menu.Button>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
59+
<div className="hover:text-primary-500 dark:hover:text-primary-400">
60+
<Menu.Button>
61+
{mounted ? resolvedTheme === 'dark' ? <Moon /> : <Sun /> : <Blank />}
62+
</Menu.Button>
6063
</div>
6164
<Transition
6265
as={Fragment}
@@ -72,32 +75,50 @@ const ThemeSwitch = () => {
7275
<div className="p-1">
7376
<RadioGroup.Option value="light">
7477
<Menu.Item>
75-
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
76-
<div className="mr-2">
77-
<Sun />
78-
</div>
79-
Light
80-
</button>
78+
{({ active }) => (
79+
<button
80+
className={`${
81+
active ? 'bg-primary-600 text-white' : ''
82+
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
83+
>
84+
<div className="mr-2">
85+
<Sun />
86+
</div>
87+
Light
88+
</button>
89+
)}
8190
</Menu.Item>
8291
</RadioGroup.Option>
8392
<RadioGroup.Option value="dark">
8493
<Menu.Item>
85-
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
86-
<div className="mr-2">
87-
<Moon />
88-
</div>
89-
Dark
90-
</button>
94+
{({ active }) => (
95+
<button
96+
className={`${
97+
active ? 'bg-primary-600 text-white' : ''
98+
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
99+
>
100+
<div className="mr-2">
101+
<Moon />
102+
</div>
103+
Dark
104+
</button>
105+
)}
91106
</Menu.Item>
92107
</RadioGroup.Option>
93108
<RadioGroup.Option value="system">
94109
<Menu.Item>
95-
<button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
96-
<div className="mr-2">
97-
<Monitor />
98-
</div>
99-
System
100-
</button>
110+
{({ active }) => (
111+
<button
112+
className={`${
113+
active ? 'bg-primary-600 text-white' : ''
114+
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
115+
>
116+
<div className="mr-2">
117+
<Monitor />
118+
</div>
119+
System
120+
</button>
121+
)}
101122
</Menu.Item>
102123
</RadioGroup.Option>
103124
</div>

0 commit comments

Comments
 (0)