Skip to content

Commit 3060e42

Browse files
lazarusAlazarusA
authored
home button (#462)
* update home button * no more five dots
1 parent dbbaa69 commit 3060e42

File tree

4 files changed

+139
-133
lines changed

4 files changed

+139
-133
lines changed

‎src/components/ui/HomeButton.tsx‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
"use client";
22

3-
import { HiHomeModern } from "react-icons/hi2";
3+
import Image from "next/image";
44
import Link from "next/link";
5+
import logoHome from "public/logo-light.svg";
56
import { Button } from "@/components/ui/button";
6-
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
7-
import { usePathname } from "next/navigation";
7+
import {
8+
Tooltip,
9+
TooltipContent,
10+
TooltipTrigger,
11+
} from "@/components/ui/tooltip";
812

913
export default function HomeButton() {
10-
const pathname = usePathname();
11-
// Don't show Home button on home page
12-
if (pathname === "/") {
13-
return null;
14-
}
15-
return (
16-
<Tooltip delayDuration={500}>
17-
<TooltipTrigger asChild>
18-
<Link href="/" aria-label="Home">
19-
<Button variant="ghost" size="icon" className="cursor-pointer hover:scale-90 transition-transform duration-100 ease-out">
20-
<HiHomeModern className="size-6"/>
21-
</Button>
22-
</Link>
23-
</TooltipTrigger>
24-
<TooltipContent side="bottom" align="start">
25-
Home
26-
</TooltipContent>
27-
</Tooltip>
28-
);
29-
}
14+
return (
15+
<Tooltip delayDuration={500}>
16+
<TooltipTrigger asChild>
17+
<Link href="/" aria-label="Home">
18+
<Button
19+
variant="ghost"
20+
size="icon"
21+
className="cursor-pointer hover:scale-90 transition-transform duration-100 ease-out"
22+
>
23+
<Image src={logoHome} alt="logoMPI" height={48} />
24+
</Button>
25+
</Link>
26+
</TooltipTrigger>
27+
<TooltipContent side="bottom" align="start">
28+
Home
29+
</TooltipContent>
30+
</Tooltip>
31+
);
32+
}

‎src/components/ui/Navbar.tsx‎

Lines changed: 111 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,125 @@
11
"use client";
22
import React from "react";
3-
import { PlotLineButton, ExportImageSettings, useCSSVariable } from "@/components/ui";
4-
import ThemeSwitch from "@/components/ui/ThemeSwitch";
5-
import './css/Navbar.css'
3+
import {
4+
ExportImageSettings,
5+
PlotLineButton,
6+
useCSSVariable,
7+
} from "@/components/ui";
8+
import "./css/Navbar.css";
9+
import { useRef, useState } from "react";
10+
import { MdFlipCameraIos } from "react-icons/md";
11+
import { RiCloseLargeLine, RiMenu2Line } from "react-icons/ri";
612
import { useShallow } from "zustand/shallow";
13+
import { Button } from "@/components/ui/button";
14+
import {
15+
Tooltip,
16+
TooltipContent,
17+
TooltipTrigger,
18+
} from "@/components/ui/tooltip";
19+
import { cn } from "@/lib/utils";
720
import { useGlobalStore, usePlotStore } from "@/utils/GlobalStates";
8-
import { useState, useRef } from "react";
921
import { Orthographic, Perspective } from "./Icons";
10-
import { Button } from "@/components/ui/button"
11-
import { cn } from "@/lib/utils"
12-
import { MdFlipCameraIos } from "react-icons/md";
1322
import PerformanceMode from "./PerformanceMode";
14-
import {
15-
Tooltip,
16-
TooltipContent,
17-
TooltipTrigger,
18-
} from "@/components/ui/tooltip"
19-
20-
21-
// Custom rotating five-dots icon
22-
const FiveDotsIcon: React.FC<{ className?: string }> = ({ className }) => {
23-
return (
24-
<svg
25-
viewBox="0 0 100 100"
26-
className={className}
27-
aria-hidden="true"
28-
focusable="false"
29-
>
30-
{/* Grey, Red, Green, Gold, Pink arranged on a pentagon */}
31-
<circle cx="50" cy="20" r="12" fill="#9CA3AF" />
32-
<circle cx="78.53" cy="40.73" r="12" fill="#EF4444" />
33-
<circle cx="67.63" cy="74.27" r="12" fill="#10B981" />
34-
<circle cx="32.37" cy="74.27" r="12" fill="#F59E0B" />
35-
<circle cx="21.47" cy="40.73" r="12" fill="#EC4899" />
36-
</svg>
37-
);
38-
};
3923

40-
const Navbar = React.memo(function Navbar(){
41-
const { isFlat, plotOn} = useGlobalStore(
42-
useShallow(state=>({
43-
isFlat: state.isFlat,
44-
plotOn: state.plotOn,
45-
})))
24+
const Navbar = React.memo(function Navbar() {
25+
const { isFlat, plotOn } = useGlobalStore(
26+
useShallow((state) => ({
27+
isFlat: state.isFlat,
28+
plotOn: state.plotOn,
29+
})),
30+
);
4631

47-
const {resetCamera, useOrtho, setResetCamera, setUseOrtho} = usePlotStore(useShallow(state=> ({
48-
resetCamera: state.resetCamera,
49-
useOrtho: state.useOrtho,
50-
setResetCamera: state.setResetCamera,
51-
setUseOrtho: state.setUseOrtho
52-
})))
32+
const { resetCamera, useOrtho, setResetCamera, setUseOrtho } = usePlotStore(
33+
useShallow((state) => ({
34+
resetCamera: state.resetCamera,
35+
useOrtho: state.useOrtho,
36+
setResetCamera: state.setResetCamera,
37+
setUseOrtho: state.setUseOrtho,
38+
})),
39+
);
5340

54-
const [isOpen, setIsOpen] = useState<boolean>(true)
55-
const navRef = useRef<HTMLElement | null>(null)
56-
const iconCol = useCSSVariable("--text-plot")
57-
58-
return (
59-
<nav className="navbar" ref={navRef}>
60-
<Tooltip delayDuration={500} >
61-
<TooltipTrigger asChild>
62-
<Button
63-
variant="ghost"
64-
size="icon"
65-
className="navbar-trigger size-10"
66-
aria-expanded={isOpen}
67-
onClick={() => setIsOpen((prev) => !prev)}
68-
>
69-
<FiveDotsIcon className="navbar-trigger-icon rotating size-6" />
70-
</Button>
71-
</TooltipTrigger>
72-
<TooltipContent side="right" align="start">
73-
{isOpen ? 'Close navigation' : 'Open navigation'}
74-
</TooltipContent>
75-
</Tooltip>
41+
const [isOpen, setIsOpen] = useState<boolean>(true);
42+
const navRef = useRef<HTMLElement | null>(null);
43+
const iconCol = useCSSVariable("--text-plot");
7644

77-
<div className={cn("navbar-content", isOpen ? "open" : "closed")}>
78-
{/* <LogoDrawer /> */}
79-
<div className="navbar-left">
80-
{plotOn && <>
81-
82-
<Tooltip delayDuration={500} >
83-
<TooltipTrigger asChild>
84-
<Button
85-
variant="ghost"
86-
size="icon"
87-
className="size-10 cursor-pointer"
88-
tabIndex={0}
89-
onClick={() => setResetCamera(!resetCamera)}
90-
>
91-
<MdFlipCameraIos className="size-8" />
92-
</Button>
93-
</TooltipTrigger>
94-
<TooltipContent side="right" align="start">
95-
<span>Reset camera view</span>
96-
</TooltipContent>
97-
</Tooltip>
98-
<Button
99-
variant="ghost"
100-
size="icon"
101-
className="cursor-pointer"
102-
onClick={()=>setUseOrtho(!useOrtho)}
103-
>
104-
{ useOrtho ? <Orthographic color={iconCol} className="size-8"/> : <Perspective color={iconCol} className="size-8"/>}
105-
</Button>
45+
return (
46+
<nav className="navbar" ref={navRef}>
47+
<Tooltip delayDuration={500}>
48+
<TooltipTrigger asChild>
49+
<Button
50+
variant="ghost"
51+
size="icon"
52+
className="navbar-trigger size-10"
53+
aria-expanded={isOpen}
54+
onClick={() => setIsOpen((prev) => !prev)}
55+
>
56+
{isOpen ? (
57+
<RiCloseLargeLine className="size-4" />
58+
) : (
59+
<RiMenu2Line className="size-6" />
60+
)}
61+
</Button>
62+
</TooltipTrigger>
63+
<TooltipContent side="right" align="start">
64+
{isOpen ? "Close navigation" : "Open navigation"}
65+
</TooltipContent>
66+
</Tooltip>
10667

107-
</>}
68+
<div className={cn("navbar-content", isOpen ? "open" : "closed")}>
69+
{/* <LogoDrawer /> */}
70+
<div className="navbar-left">
71+
{plotOn && (
72+
<>
73+
<Tooltip delayDuration={500}>
74+
<TooltipTrigger asChild>
75+
<Button
76+
variant="ghost"
77+
size="icon"
78+
className="size-10 cursor-pointer"
79+
tabIndex={0}
80+
onClick={() =>
81+
setResetCamera(!resetCamera)
82+
}
83+
>
84+
<MdFlipCameraIos className="size-8" />
85+
</Button>
86+
</TooltipTrigger>
87+
<TooltipContent side="right" align="start">
88+
<span>Reset camera view</span>
89+
</TooltipContent>
90+
</Tooltip>
91+
<Button
92+
variant="ghost"
93+
size="icon"
94+
className="cursor-pointer"
95+
onClick={() => setUseOrtho(!useOrtho)}
96+
>
97+
{useOrtho ? (
98+
<Orthographic
99+
color={iconCol}
100+
className="size-8"
101+
/>
102+
) : (
103+
<Perspective
104+
color={iconCol}
105+
className="size-8"
106+
/>
107+
)}
108+
</Button>
109+
</>
110+
)}
108111

109-
{plotOn && !isFlat && <PlotLineButton />}
110-
{plotOn &&
111-
<>
112-
<ExportImageSettings />
113-
<PerformanceMode/>
114-
</>
115-
}
116-
</div>
117-
</div>
118-
</nav>
119-
);
112+
{plotOn && !isFlat && <PlotLineButton />}
113+
{plotOn && (
114+
<>
115+
<ExportImageSettings />
116+
<PerformanceMode />
117+
</>
118+
)}
119+
</div>
120+
</div>
121+
</nav>
122+
);
120123
});
121124

122-
export default Navbar;
125+
export default Navbar;

‎src/components/ui/css/Colorbar.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,6 @@
5252
@media (max-width: 768px) {
5353
.colorbar {
5454
width: 70%;
55-
top: 64px;
55+
top: 72px;
5656
}
5757
}

‎src/components/ui/css/Navbar.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
align-content: center;
77
left: 8px;
88
right: auto;
9-
top: 42px;
9+
top: 120px;
1010
z-index: 10;
1111
user-select: none;
1212
background: var(--glass-bg);

0 commit comments

Comments
 (0)