Skip to content

Commit 2d0ad02

Browse files
author
tkokhing
committed
touch up nav
1 parent d01961a commit 2d0ad02

4 files changed

Lines changed: 32 additions & 48 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
# testing
1414
/coverage
15+
/src/app/testerer
1516

1617
# next.js
1718
/.next/

‎src/app/_components/main_frame/icons_svg.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const SquareBoxIcon = ({ fillColour = "#0071C1" }) => {
1919
xmlns="http://www.w3.org/2000/svg"
2020
x="0" y="0"
2121
height="100"
22-
width="auto"
22+
width="100"
2323
>
2424
{/* display square box */}
2525
<g>
@@ -37,7 +37,7 @@ export const RectangleBoxIcon = () => {
3737
xmlns="http://www.w3.org/2000/svg"
3838
x="0" y="0"
3939
height="100"
40-
width="auto"
40+
width="400"
4141
>
4242
{/* display rectangle box */}
4343
<g fill="#0071C1" opacity="1.000000">
@@ -209,24 +209,15 @@ export const ResearchWithTextIcon: React.FC<IconProps> = ({ height = 50, fillCol
209209
};
210210

211211
export const SystemModeIcon: React.FC<IconProps> = ({ width = 2, fillColour = "#1e1b4b", strokeColour = "#6b7280" }) => {
212-
const [mounted, setMounted] = useState(false);
213212
const [hoverOn, setHovered] = useState(false);
214213

215-
useEffect(() => {
216-
setMounted(true);
217-
}, []);
218-
219-
if (!mounted) {
220-
return null; // Or a placeholder
221-
}
222214
return (
223215
<svg
224216
viewBox="0 0 24 24"
225217
xmlns="http://www.w3.org/2000/svg"
226218
onMouseEnter={() => setHovered(true)}
227219
onMouseLeave={() => setHovered(false)}
228220
fill="none"
229-
stroke="currentColor"
230221
strokeWidth={width}
231222
strokeLinecap="round"
232223
strokeLinejoin="round"

‎src/app/_components/main_frame/navi-bar.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -96,25 +96,37 @@ export default function Navigationbar() {
9696
</div>
9797
</div>
9898
<div className="hidden md:block">
99-
<div className="space-x-8 flex items-center px-8 md:ml-6">
100-
<FontSizeDropdown />
101-
<div className="">
99+
<div className="space-x-10 items-center px-4 md:ml-6 flex flex-row">
100+
<div className="flex justify-evenly">
101+
<FontSizeDropdown />
102+
</div>
103+
<div className="flex justify-evenly">
102104
<ThemeSwitcher />
103105
</div>
104106
</div>
105107
</div>
106108
<div className="-mr-2 flex md:hidden">
107109
{/* Mobile menu button */}
108-
<DisclosureButton className="group relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
110+
<DisclosureButton
111+
className="group relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
112+
aria-label="Open Main Menu"
113+
>
109114
<span className="absolute -inset-0.5" />
110-
<span className="sr-only">Open main menu</span>
111115
<Bars3Icon aria-hidden="true" className="block size-6 group-data-[open]:hidden" />
112116
<XMarkIcon aria-hidden="true" className="hidden size-6 group-data-[open]:block" />
113117
</DisclosureButton>
114118
</div>
115119
</div>
116120
</div>
117121
<DisclosurePanel className="md:hidden">
122+
<div className="border-t border-gray-700 pb-3 pt-4 flex flex-row">
123+
<div className="flex justify-evenly w-1/2">
124+
<FontSizeDropdown />
125+
</div>
126+
<div className="flex justify-evenly w-1/2">
127+
<ThemeSwitcher />
128+
</div>
129+
</div>
118130
<div className="space-y-1 px-2 pb-3 pt-2 sm:px-3">
119131
{navigation.map((item) => (
120132
<DisclosureButton
@@ -131,18 +143,6 @@ export default function Navigationbar() {
131143
</DisclosureButton>
132144
))}
133145
</div>
134-
<div className="border-t border-gray-700 pb-3 pt-4">
135-
136-
<div className="flex justify-evenly">
137-
138-
<FontSizeDropdown />
139-
140-
<div className="px-5">
141-
<ThemeSwitcher />
142-
</div>
143-
</div>
144-
145-
</div>
146146
</DisclosurePanel>
147147
</Disclosure>
148148
</div>

‎src/app/_components/main_frame/switch.module.css‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,57 @@
11
.switch {
22
all: unset;
3-
4-
display: inline-block;
5-
color: currentColor;
3+
background: transparent;
4+
border: none;
65
border-radius: 50%;
7-
border: 1.6px dashed currentColor;
6+
color: currentColor;
87
cursor: pointer;
8+
display: inline-block;
99
--size: 24px;
1010
height: var(--size);
1111
width: var(--size);
12-
background: transparent;
1312
transition: all 0.3s ease-in-out 0s !important;
1413
}
1514

1615
.system-icon, .light-icon {
17-
display: flex;
1816
align-items: center;
19-
justify-content: center;
17+
display: flex;
2018
height: 100%;
19+
justify-content: center;
2120
width: 100%;
2221
}
2322

2423
.system-icon svg, .light-icon svg{
25-
width: 100%;
2624
height: 100%;
25+
width: 100%;
2726
}
2827

2928
[data-mode="system"] .switch::after{
30-
content: url(data:image/svg+xml,%3Csvg%20%0A%20%20viewBox%3D%220%200%2024%2024%22%20%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0A%20%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%20%0A%20%20%3E%20%0A%20%20%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2212%22%20rx%3D%222%22%20stroke%3D%22grey%22%20fill%3D%22none%22%20%3E%3C%2Frect%3E%0A%20%20%3Crect%20x%3D%226%22%20y%3D%2218%22%20width%3D%2212%22%20height%3D%222%22%20rx%3D%221%22%20stroke%3D%22grey%22%3E%3C%2Frect%3E%20%0A%3C%2Fsvg%3E);
29+
content: url(data:image/svg+xml,%3Csvg%20%20%20%20%20%20viewBox%3D%220%200%2024%2024%22%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%20%20%20%20fill%3D%22none%22%20%20%20%20%20%20strokeWidth%3D%222%22%20%20%20%20%20%20strokeLinecap%3D%22round%22%20%20%20%20%20%20strokeLinejoin%3D%22round%22%20%20%20%20%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2212%22%20rx%3D%222%22%20stroke%3D%22%236b7280%22%20fill%3D%22none%22%3E%3C%2Frect%3E%3Crect%20x%3D%226%22%20y%3D%2218%22%20width%3D%2212%22%20height%3D%222%22%20rx%3D%221%22%20stroke%3D%22%236b7280%22%3E%3C%2Frect%3E%3C%2Fsvg%3E);
3130
}
3231

3332
[data-mode="system"] .switch:hover {
34-
border: 1.5px solid #1e1b4b;
33+
background-color: #d4d4d4;
3534
box-shadow: 0 0 10px 0px grey;
36-
3735
}
3836

3937
[data-mode="dark"] .switch {
38+
animation: n linear 0.5s;
4039
box-shadow: calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8)
4140
inset #fff;
42-
border: none;
43-
background: transparent;
44-
animation: n linear 0.5s;
4541
}
4642

4743
[data-mode="dark"] .switch:hover {
48-
border: 1.5px solid #1e1b4b;
4944
box-shadow: 0 0 5px 5px orange;
50-
5145
}
5246

5347
[data-mode="light"] .switch {
54-
box-shadow: 0 0 30px 10px yellow;
55-
border: none;
5648
background-image: url(data:image/svg+xml,%3Csvg%20%0A%20%20viewBox%3D%220%200%2024%2024%22%20%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20fill%3D%22none%22%20%0A%20%20%0A%20%20strokeWidth%3D%222%22%20%0A%20%20strokeLinecap%3D%22round%22%20%0A%20%20strokeLinejoin%3D%22round%22%3E%0A%0A%20%20%3Cpath%20d%3D%22M12%202v3M18.66%205.344l-1.656%201.656M22.005%2012.004h-3M18.66%2018.664l-1.656-1.656M12%2022.01V19M5.34%2018.664l1.67-1.67M2.995%2012.004h3M5%205l1.67%201.67%22%20%20stroke%3D%22%23FFBE03%22%3E%3C%2Fpath%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20stroke%3D%22%23FFBE03%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.5%22%20stroke%3D%22%23FFCB03%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%20stroke%3D%22%23FFD303%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.5%22%20stroke%3D%22%23FFDB03%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%20stroke%3D%22%23FFE403%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%220.5%22%20fill%3D%22%23FFF003%22%20%2F%3E%0A%3C%2Fsvg%3E);
49+
box-shadow: 0 0 30px 10px yellow;
5750
}
5851

5952
[data-mode="light"] .switch:hover {
60-
border: none;
61-
box-shadow: 0 0 40px 10px white;
6253
background-color: #fef9e7;
54+
box-shadow: 0 0 40px 10px white;
6355
transition: all 0s;
6456
}
6557

0 commit comments

Comments
 (0)