Skip to content

Commit 67f7c1d

Browse files
christiansamaniego-oktachristiansamaniego-okta
committed
add tooltip and contextMenu on navbar
1 parent 24e008e commit 67f7c1d

File tree

12 files changed

+146
-89
lines changed

12 files changed

+146
-89
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎src/features/common/components/context-menu/context-menu.module.scss‎

Whitespace-only changes.

‎src/features/common/components/context-menu/context-menu.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// src/components/ContextMenu.tsx
2+
import React, { FC } from "react";
3+
import "./ContextMenu.scss";
4+
import { BrandMenuItem } from "@/features/localization/models/brand-dictionary.model";
5+
6+
interface ContextMenuProps {
7+
items: BrandMenuItem[];
8+
position: { x: number; y: number } | null;
9+
}
10+
11+
const ContextMenu: FC<ContextMenuProps> = ({ items, position }) => {
12+
if (!position) return null;
13+
14+
return (
15+
<ul className="context-menu" style={{ top: position.y, left: position.x }}>
16+
{items.map((item, index) => {
17+
if (item.type === "COPY") {
18+
return (
19+
<li
20+
key={index}
21+
className="context-menu-item"
22+
// onClick={item.onClick}
23+
>
24+
{item.label}
25+
</li>
26+
);
27+
}
28+
})}
29+
</ul>
30+
);
31+
};
32+
33+
export default ContextMenu;

‎src/features/common/components/footer/footer.component.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { createUrlPath } from "@/libs/utils/path.utils";
1717
import { SiteBrandComponent } from "@/features/common/components/site-brand/site-brand.component";
1818
import { Button } from "react-aria-components";
1919
import { Auth0LogoComponent } from "../../assets/auth0-logo.component";
20-
import { getImageDictionary } from "@/features/localization/services/images-dictionary.service";
20+
import { getBrandDictionary } from "@/features/localization/services/brand-dictionary.service";
2121

2222
interface FooterComponentProps {
2323
languageCode: string;
@@ -31,7 +31,7 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
3131
const [modalState, setModalState] = useState<ModalStateValues>(
3232
ModalStateValues.CLOSED,
3333
);
34-
const images = getImageDictionary(languageCode);
34+
const images = getBrandDictionary(languageCode);
3535

3636
const languagePathPrefix: string =
3737
languageCode === DEFAULT_LANGUAGE_CODE
@@ -158,7 +158,7 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
158158
target="_blank"
159159
href="https://auth0.com/"
160160
>
161-
<Auth0LogoComponent title={images.title}/>
161+
<Auth0LogoComponent title={images.tooltip}/>
162162
</Link>
163163
<span className={styles.bottomSection__copyright}>
164164
{dictionary.copyright}

‎src/features/common/components/site-brand/site-brand.component.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { PropsWithChildren } from "react";
1+
import React, { PropsWithChildren, useState } from "react";
22
import styles from "./site-brand.module.scss";
33
import Link from "next/link";
4-
import { getImageDictionary } from "@/features/localization/services/images-dictionary.service";
4+
import { getBrandDictionary } from "@/features/localization/services/brand-dictionary.service";
55
import { SecondaryFont } from "@/libs/theme/fonts";
66
import clsx from "clsx";
77
import { JwtLogoComponent } from "../../assets/jwt-logo.component";
@@ -16,10 +16,18 @@ export const SiteBrandComponent: React.FC<SiteBrandComponentProps> = ({
1616
path,
1717
languageCode,
1818
}) => {
19-
const images = getImageDictionary(languageCode);
19+
const [isVisible, setIsVisible] = useState(false);
20+
21+
const brandDictionary = getBrandDictionary(languageCode);
2022

2123
return (
22-
<Link className={styles.brand} href={path} title={images.title}>
24+
<Link
25+
className={styles.brand}
26+
href={path}
27+
title={brandDictionary.tooltip}
28+
onMouseEnter={() => setIsVisible(true)}
29+
onMouseLeave={() => setIsVisible(false)}
30+
>
2331
<div className={styles.brand__logo}>
2432
<JwtLogoComponent />
2533
</div>
@@ -29,6 +37,11 @@ export const SiteBrandComponent: React.FC<SiteBrandComponentProps> = ({
2937
<div className={clsx(SecondaryFont.className, styles.brand__headline)}>
3038
<span className={styles.brand__subtitle}>Debugger</span>
3139
</div>
40+
{isVisible && (
41+
<div className={styles.tooltip}>
42+
{brandDictionary.tooltip}
43+
</div>
44+
)}
3245
</Link>
3346
);
3447
};

‎src/features/common/components/site-brand/site-brand.module.scss‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
position: relative;
4848
display: flex;
4949
align-items: center;
50-
height: 1rem;
50+
height: 1rem;
5151
}
5252

5353
.brand__headline {
@@ -68,7 +68,25 @@
6868
display: flex;
6969
font-size: 1rem;
7070
font-weight: 500;
71-
line-height: .75rem;
71+
line-height: 0.75rem;
7272
margin-top: 1px;
73-
letter-spacing: .02rem;
73+
letter-spacing: 0.02rem;
74+
}
75+
76+
.tooltip {
77+
position: absolute;
78+
top: -30px;
79+
left: 50%;
80+
transform: translateX(-50%);
81+
padding: 4px 8px;
82+
color: var(--color_fg_bold);
83+
background-color: var(--color_bg_layer);
84+
border: 1px solid var(--color_border_default);
85+
border-radius: 0.5rem;
86+
font-size: 0.75rem;
87+
white-space: nowrap;
88+
pointer-events: none;
89+
transition: opacity 0.2s ease-in-out;
90+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
91+
z-index: 1000;
7492
}

‎src/features/localization/dictionaries/images/en.tsx‎

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,27 @@
1-
import { BrandDictionaryModel } from "@/features/localization/models/images-dictionary.model";
1+
import { BrandDictionaryModel } from "../../models/brand-dictionary.model"
22

33
export const enBrandDictionary: BrandDictionaryModel = {
4-
title: "Right-click or long-press for logo options",
4+
tooltip: "Right-click or long-press for logo options",
55
menu: {
66
brand: {
77
label: "Brand",
88
items: [
9-
{icon: "",
10-
label: "Copy Logo SVG"
11-
},
12-
{icon: "",
13-
label: "Download Logo"
14-
},
15-
{icon: "",
16-
label: "Copy Symbol SVG"
17-
},
18-
{icon: "",
19-
label: "Download Symbol"
20-
},
21-
{icon: "",
22-
label: "Copy Wordmark SVG"
23-
},
24-
{icon: "",
25-
label: "Download Wordmark"
26-
},
27-
]
9+
{ type: "COPY", icon: "copy-icon.svg", label: "Copy Logo SVG", assetSrc: "logo.svg" },
10+
{ type: "DOWNLOAD", icon: "download-icon.svg", label: "Download Logo", assetSrc: "logo.svg" },
11+
{ type: "COPY", icon: "copy-icon.svg", label: "Copy Symbol SVG", assetSrc: "symbol.svg" },
12+
{ type: "DOWNLOAD", icon: "download-icon.svg", label: "Download Symbol", assetSrc: "symbol.svg" },
13+
{ type: "COPY", icon: "copy-icon.svg", label: "Copy Wordmark SVG", assetSrc: "wordmark.svg" },
14+
{ type: "DOWNLOAD", icon: "download-icon.svg", label: "Download Wordmark", assetSrc: "wordmark.svg" },
15+
],
2816
},
2917
tools: {
3018
label: "Tools",
3119
items: [
32-
]
33-
}
34-
}
20+
{ label: "Passkeys Playground", url: "https://learnpasskeys.io" },
21+
{ label: "WebAuthn Playground", url: "https://webauthn.me" },
22+
{ label: "OIDC Playground", url: "https://openidconnect.net" },
23+
{ label: "SAML Tool", url: "https://samltool.io" }
24+
],
25+
},
26+
},
3527
};

‎src/features/localization/dictionaries/images/ja.tsx‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,27 @@
1-
import { BrandDictionaryModel } from "@/features/localization/models/images-dictionary.model";
1+
import { BrandDictionaryModel } from "../../models/brand-dictionary.model";
22

3-
export const jaImagesDictionary: BrandDictionaryModel = {
4-
title: "Right-click or long-press for logo options",
3+
export const jaBrandDictionary: BrandDictionaryModel = {
4+
tooltip: "Right-click or long-press for logo options",
55
menu: {
66
brand: {
77
label: "Brand",
88
items: [
9-
{icon: "",
10-
label: "Copy Logo SVG"
11-
},
12-
{icon: "",
13-
label: "Download Logo"
14-
},
15-
{icon: "",
16-
label: "Copy Symbol SVG"
17-
},
18-
{icon: "",
19-
label: "Download Symbol"
20-
},
21-
{icon: "",
22-
label: "Copy Wordmark SVG"
23-
},
24-
{icon: "",
25-
label: "Download Wordmark"
26-
},
27-
]
9+
{ icon: "copy-icon.svg", label: "Copy Logo SVG", assetSrc: "logo.svg" },
10+
{ icon: "download-icon.svg", label: "Download Logo", assetSrc: "logo.svg" },
11+
{ icon: "copy-icon.svg", label: "Copy Symbol SVG", assetSrc: "symbol.svg" },
12+
{ icon: "download-icon.svg", label: "Download Symbol", assetSrc: "symbol.svg" },
13+
{ icon: "copy-icon.svg", label: "Copy Wordmark SVG", assetSrc: "wordmark.svg" },
14+
{ icon: "download-icon.svg", label: "Download Wordmark", assetSrc: "wordmark.svg" },
15+
],
2816
},
2917
tools: {
3018
label: "Tools",
3119
items: [
32-
]
33-
}
34-
}
20+
{ label: "Passkeys Playground", url: "https://learnpasskeys.io" },
21+
{ label: "WebAuthn Playground", url: "https://webauthn.me" },
22+
{ label: "OIDC Playground", url: "https://openidconnect.net" },
23+
{ label: "SAML Tool", url: "https://samltool.io" }
24+
],
25+
},
26+
},
3527
};

‎src/features/localization/models/brand-dictionary.model.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
interface ToolsMenuItem {
2+
label: string,
3+
url: string,
4+
}
5+
export interface BrandMenuItem {
6+
type: "COPY" | "DOWNLOAD";
7+
icon: string;
8+
label: string;
9+
assetSrc: string;
10+
}
11+
interface MenuSection {
12+
label: string;
13+
items: BrandMenuItem[] | ToolsMenuItem[];
14+
}
15+
16+
interface BrandMenu {
17+
brand: MenuSection;
18+
tools: MenuSection;
19+
}
20+
21+
export interface BrandDictionaryModel {
22+
tooltip: string;
23+
menu: BrandMenu;
24+
}

‎src/features/localization/models/images-dictionary.model.ts‎

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

0 commit comments

Comments
 (0)