Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 82c0849

Browse files
[feat]: Added command menu for accessibility
[fix]: fixed other accessibility issues
1 parent d75f260 commit 82c0849

File tree

4 files changed

+80
-54
lines changed

4 files changed

+80
-54
lines changed

‎components/app/bill/Header.tsx‎

Lines changed: 78 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,62 +4,90 @@ import LightImage from "@/public/assets/TransparentBlob White.png";
44
import DarkImage from "@/public/assets/TransparentBlob Color.png";
55
import { UserButton } from "@clerk/nextjs";
66
import { useRouter } from "next/router";
7+
import { Command } from "lucide-react";
8+
import { isMobile } from "react-device-detect";
9+
import { useState, useEffect } from "react";
10+
import { booleanType } from "@/types/appx";
11+
import { CommandBx } from "../command-bx";
712

813
export default function Header() {
914
const router = useRouter();
1015
const getPath = router.pathname;
16+
const [count, setCount] = useState(0);
17+
const [isMobileUse, setIsMobileUse] = useState(false);
18+
const [open, setOpen] = useState<booleanType>(false);
19+
20+
useEffect(() => {
21+
setCount((prev) => prev + 1);
22+
23+
count === 1 && setIsMobileUse(isMobile);
24+
25+
return () => {
26+
setCount(0);
27+
};
28+
}, [count]);
29+
1130
return (
12-
<header className="fixed top-0 w-full z-10 md:p-3 md:px-10 lg:p-3 lg:px-10 p-4 bg-white/70 dark:bg-darkestbg/70 backdrop-blur-md border border-transparent border-b-whitebg dark:border-b-borderbtm flex items-center justify-between">
13-
<div className="">
14-
<Link href="/dashboard">
15-
<Image
16-
src={DarkImage}
17-
width={150}
18-
height={42}
19-
placeholder="blur"
20-
className="md:w-[150px] lg:w-[150px] w-[120px] block dark:hidden"
21-
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
22-
alt="forget logo"
23-
/>
24-
<Image
25-
src={LightImage}
26-
width={150}
27-
height={42}
28-
placeholder="blur"
29-
className="md:w-[150px] lg:w-[150px] w-[120px] hidden dark:block"
30-
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
31-
alt="forget logo"
32-
/>
33-
</Link>
34-
</div>
35-
<nav className="flex items-center md:gap-4 lg:gap-4">
36-
{/* account */}
37-
<Link
38-
href="/dashboard"
39-
className="flex items-center gap-1 text-blackmid dark:text-lightgrey bg-transparent transition-colors hover:text-thirdprop hover:dark:text-white p-2 rounded-md"
40-
>
41-
Dashboard
42-
</Link>
43-
{getPath === "/billing" ? (
44-
<Link
45-
href="/settings"
46-
className="flex items-center gap-1 text-blackmid dark:text-lightgrey bg-transparent transition-colors hover:text-thirdprop hover:dark:text-white p-2 rounded-md"
47-
>
48-
Settings
31+
<>
32+
<header className="fixed top-0 w-full z-10 md:p-3 md:px-10 lg:p-3 lg:px-10 p-4 bg-white/70 dark:bg-darkestbg/70 backdrop-blur-md border border-transparent border-b-whitebg dark:border-b-borderbtm flex items-center justify-between">
33+
<div className="">
34+
<Link href="/dashboard">
35+
<Image
36+
src={DarkImage}
37+
width={150}
38+
height={42}
39+
placeholder="blur"
40+
className="md:w-[150px] lg:w-[150px] w-[120px] block dark:hidden"
41+
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
42+
alt="forget logo"
43+
/>
44+
<Image
45+
src={LightImage}
46+
width={150}
47+
height={42}
48+
placeholder="blur"
49+
className="md:w-[150px] lg:w-[150px] w-[120px] hidden dark:block"
50+
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
51+
alt="forget logo"
52+
/>
4953
</Link>
50-
) : (
51-
getPath === "/settings" && (
52-
<Link
53-
href="/billing"
54-
className="flex items-center gap-1 text-blackmid dark:text-lightgrey bg-transparent transition-colors hover:text-thirdprop hover:dark:text-white p-2 rounded-md"
55-
>
56-
Billing
57-
</Link>
58-
)
59-
)}
54+
</div>
55+
<nav className="flex items-center md:gap-4 lg:gap-4">
56+
{/* account */}
57+
{isMobileUse ? (
58+
<Command className="x mr-4" onClick={() => setOpen(!open)} />
59+
) : (
60+
<>
61+
<Link
62+
href="/dashboard"
63+
className="flex items-center gap-1 text-blackmid dark:text-lightgrey bg-transparent transition-colors hover:text-thirdprop hover:dark:text-white p-2 rounded-md"
64+
>
65+
Dashboard
66+
</Link>
67+
{getPath === "/billing" ? (
68+
<Link
69+
href="/settings"
70+
className="flex items-center gap-1 text-blackmid dark:text-lightgrey bg-transparent transition-colors hover:text-thirdprop hover:dark:text-white p-2 rounded-md"
71+
>
72+
Settings
73+
</Link>
74+
) : (
75+
getPath === "/settings" && (
76+
<Link
77+
href="/billing"
78+
className="flex items-center gap-1 text-blackmid dark:text-lightgrey bg-transparent transition-colors hover:text-thirdprop hover:dark:text-white p-2 rounded-md"
79+
>
80+
Billing
81+
</Link>
82+
)
83+
)}
84+
</>
85+
)}
6086

61-
<UserButton />
62-
</nav>
63-
</header>
87+
<UserButton />
88+
</nav>
89+
</header>
90+
<CommandBx open={open} setOpen={setOpen} />
91+
</>
6492
);
6593
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "stashblob",
3-
"version": "1.8.2",
3+
"version": "1.9.2",
44
"private": true,
55
"scripts": {
66
"dev": "next dev",

‎pages/billing.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export default function Billing() {
157157
<link rel="icon" href="/favicon.ico?v=2" sizes="any" />
158158
</Head>
159159
<Header />
160-
<main className="p-10 md:mt-20 lg:mt-20 mt-10">
160+
<main className="md:p-10 lg:p-10 p-4 mt-20">
161161
<section>
162162
<hgroup className="flex flex-col gap-4">
163163
<h1 className="md:text-5xl lg:text-5xl text-4xl font-medium dark:text-white text-blackmid font-Noto">

‎pages/settings.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import Head from "next/head";
22
import Header from "@/components/app/bill/Header";
3-
import { useState } from "react";
43
import { useTheme } from "next-themes";
54
export default function Settings() {
6-
const [mode, setMode] = useState("dark");
75
const { setTheme } = useTheme()
86
return (
97
<>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /