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 d75f260

Browse files
[feat]: Added cmd menu on mobile
[deprecated]: removed footer
1 parent 1610f76 commit d75f260

File tree

4 files changed

+57
-14
lines changed

4 files changed

+57
-14
lines changed

‎components/app/Header.tsx‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,16 @@ import Image from "next/image";
33
import { Input } from "@/components/ui/input";
44
import { Label } from "@/components/ui/label";
55
import { Button } from "@/components/ui/button";
6-
import { UploadCloud } from "lucide-react";
6+
import { UploadCloud,Command } from "lucide-react";
77
import { UserButton } from "@clerk/nextjs";
8-
import { ChangeEvent, Dispatch, SetStateAction } from "react";
8+
import { isMobile } from "react-device-detect";
9+
import {
10+
ChangeEvent,
11+
Dispatch,
12+
SetStateAction,
13+
useState,
14+
useEffect,
15+
} from "react";
916
import { typeUpldState } from "@/types/appx";
1017

1118
import LightImage from "@/public/assets/TransparentBlob White.png";
@@ -24,6 +31,19 @@ export default function Header({
2431
open,
2532
uploadState,
2633
}: HeaderProp) {
34+
const [count, setCount] = useState(0);
35+
const [isMobileUse, setIsMobileUse] = useState(false);
36+
37+
useEffect(() => {
38+
setCount((prev) => prev + 1);
39+
40+
count === 1 && setIsMobileUse(isMobile);
41+
42+
return () => {
43+
setCount(0);
44+
};
45+
}, [count]);
46+
2747
return (
2848
<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/30 dark:bg-darkestbg/70 backdrop-blur-md border border-transparent border-b-borderbtm/20 dark:border-b-borderbtm flex items-center justify-between">
2949
<div className="">
@@ -48,7 +68,7 @@ export default function Header({
4868
/>
4969
</Link>
5070
</div>
51-
<nav className="flex items-center md:gap-4 lg:gap-4 gap-1">
71+
<nav className="flex items-center md:gap-4 lg:gap-4 gap-3">
5272
{/* account */}
5373
<Input
5474
id="upload-file"
@@ -62,8 +82,8 @@ export default function Header({
6282
htmlFor="upload-file"
6383
className={`${
6484
uploadState.isUploading
65-
? "bg-royalblue/30 p-2 px-4 pointer-events-none border border-blueborder rounded text-white flex items-center gap-1"
66-
: "md:bg-royalblue lg:bg-royalblue bg-transparent md:transition-colors lg:transition-colors md:hover:bg-royalblue/60 lg:hover:bg-royalblue/60 p-2 px-4 cursor-pointer border md:border-blueborder/20 lg:border-blueborder/20 border-transparent rounded text-white flex items-center gap-1"
85+
? "bg-royalblue/30 p-2 md:px-4 lg:px-4 px-2 pointer-events-none border border-blueborder rounded text-white flex items-center gap-1"
86+
: "md:bg-royalblue lg:bg-royalblue bg-transparent md:transition-colors lg:transition-colors md:hover:bg-royalblue/60 lg:hover:bg-royalblue/60 p-2 md:px-4 lg:px-4 px-2 cursor-pointer border md:border-blueborder/20 lg:border-blueborder/20 border-transparent rounded text-white flex items-center gap-1"
6787
}`}
6888
>
6989
<UploadCloud className="md:w-auto md:h-auto lg:w-auto lg:h-auto w-6 h-6" />{" "}
@@ -73,12 +93,16 @@ export default function Header({
7393
: uploadState.props.upload}
7494
</span>
7595
</Label>
76-
<Button
77-
className="bg-darkestbg dark:bg-darkbtn hover:bg-thirdprop hover:dark:bg-borderbtm text-white dark:text-white rounded md:flex lg:flex hidden items-center gap-1"
78-
onClick={() => setOpen(!open)}
79-
>
80-
Menu
81-
</Button>
96+
{isMobileUse ? (
97+
<Command className="cursor-pointer" onClick={() => setOpen(!open)} />
98+
) : (
99+
<Button
100+
className="bg-darkestbg dark:bg-darkbtn hover:bg-thirdprop hover:dark:bg-borderbtm text-white dark:text-white rounded items-center gap-1"
101+
onClick={() => setOpen(!open)}
102+
>
103+
Menu
104+
</Button>
105+
)}
82106
<UserButton />
83107
</nav>
84108
</header>

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "stashblob",
3-
"version": "1.7.2",
3+
"version": "1.8.2",
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
@@ -29,6 +29,7 @@
2929
"next": "14.0.2",
3030
"next-themes": "^0.2.1",
3131
"react": "^18.2.0",
32+
"react-device-detect": "^2.2.3",
3233
"react-dom": "^18.2.0",
3334
"react-loader-spinner": "^5.4.5",
3435
"react-player": "^2.13.0",

‎pages/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -416,7 +416,7 @@ export default function Home() {
416416
</main>
417417
<CommandBx open={open} setOpen={setOpen} />
418418
<ModalUI show={show} setShow={setShow} extension={extension} />
419-
<footer className="fixed bottom-0 md:hidden lg:hidden block w-full z-10 md:p-3 md:px-10 lg:p-3 lg:px-10 p-4 dark:bg-darkestbg/70 bg-white/30 backdrop-blur-md border border-transparent border-b-borderbtm">
419+
{/* <footer className="fixed bottom-0 md:hidden lg:hidden block w-full z-10 md:p-3 md:px-10 lg:p-3 lg:px-10 p-4 dark:bg-darkestbg/70 bg-white/30 backdrop-blur-md border border-transparent border-b-borderbtm">
420420
<div className="flex items-center justify-between px-2">
421421
<Button
422422
className="dark:bg-darkbtn bg-darkestbg hover:bg-darkmxbtn hover:dark:bg-darkbtnhover dark:text-white text-white rounded"
@@ -425,7 +425,7 @@ export default function Home() {
425425
Menu
426426
</Button>
427427
</div>
428-
</footer>
428+
</footer> */}
429429
</div>
430430
<Toaster />
431431
</>

‎pnpm-lock.yaml‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

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