Skip to content

Commit b51e9cd

Browse files
DenserMeerkatDenserMeerkat
committed
fix: navbar
1 parent 10910a5 commit b51e9cd

10 files changed

+7180
-36
lines changed

‎.prettierrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": ["prettier-plugin-tailwindcss"]
3+
}

‎app/page.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ export default function Home() {
55
<>
66
<main className="flex">
77
<Navbar />
8-
<section className="md:pl-[300px] flex flex-col items-center justify-center gap-4 py-8 md:py-10 h-40"></section>
8+
<div className="sm:w-[80px] lg:w-[280px]"></div>
9+
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10"></section>
910
</main>
1011
</>
1112
);

‎components/navbar.tsx

+23-16
Original file line numberDiff line numberDiff line change
@@ -38,26 +38,37 @@ export const Navbar = () => {
3838

3939
useEffect(() => {
4040
if (search == "") {
41-
router.push(pathname + "?" + createQueryString("l", "alphabets"));
41+
router.push(pathname + "?" + createQueryString("l", "alpha"));
4242
}
4343
setIsDomLoaded(true);
4444
}, [search, router, pathname, createQueryString]);
4545

4646
if (!isDomLoaded) return <></>;
4747
if (isMobile) {
4848
return (
49-
<nav className="w-screen fixed border-t-2 border-border bottom-0">
50-
<div className="flex justify-center gap-4 items-center py-4 px-8">
49+
<nav className="z-50 w-screen fixed border-t-2 border-border bottom-0 bg-background">
50+
<div className="flex justify-center gap-4 items-center py-4 px-6">
5151
<ProfileTile />
52-
<ThemeSwitch />
52+
<CharacterTile
53+
iconCharacters="Ab"
54+
label="Alphabets"
55+
isSelected={search == "alpha"}
56+
onPress={() => handleLessonChange("alpha")}
57+
/>
58+
<CharacterTile
59+
iconCharacters="12"
60+
label="Numbers"
61+
isSelected={search == "num"}
62+
onPress={() => handleLessonChange("num")}
63+
/>
5364
<MoreActionsTile />
5465
</div>
5566
</nav>
5667
);
5768
}
5869
if (isTablet)
5970
return (
60-
<nav className="w-[80px] h-screen fixed border-r-2 border-border">
71+
<nav className="w-[80px] h-screen fixed border-r-2 border-border bg-background">
6172
<div className="flex flex-col h-full justify-between p-4 pb-5">
6273
<Title />
6374
<div className="flex flex-col gap-4 items-center">
@@ -89,25 +100,21 @@ export const Navbar = () => {
89100
</nav>
90101
);
91102
return (
92-
<nav className="min-w-[250px] w-full max-w-[280px] h-screen fixed border-r-2 border-border">
103+
<nav className="min-w-[250px] w-full max-w-[280px] h-screen fixed border-r-2 border-border bg-background">
93104
<div className="flex flex-col h-full justify-between p-4 pb-5">
94105
<Title />
95106
<div className="flex flex-col gap-4 px-4 items-center">
96107
<CharacterTile
97-
iconCharacters="Abc"
108+
iconCharacters="Ab"
98109
label="Alphabets"
99-
isSelected={search == "alphabets"}
100-
onPress={() => {
101-
router.push(pathname + "?" + createQueryString("l", "alphabets"));
102-
}}
110+
isSelected={search == "alpha"}
111+
onPress={() => handleLessonChange("alpha")}
103112
/>
104113
<CharacterTile
105-
iconCharacters="123"
114+
iconCharacters="12"
106115
label="Numbers"
107-
isSelected={search == "numbers"}
108-
onPress={() => {
109-
router.push(pathname + "?" + createQueryString("l", "numbers"));
110-
}}
116+
isSelected={search == "num"}
117+
onPress={() => handleLessonChange("num")}
111118
/>
112119
</div>
113120
<div className="flex flex-col lg:flex-row w-full gap-3 justify-between items-center">

‎components/navbar/character.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
"use client";
2-
import { useState, useEffect, useCallback } from "react";
32
import { Button } from "@nextui-org/button";
43
import { useMediaQuery } from "@react-hook/media-query";
54
import clsx from "clsx";
@@ -14,14 +13,15 @@ interface CharacterTileProps extends ClassNameProp {
1413

1514
const CharacterTile = (props: CharacterTileProps) => {
1615
const { iconCharacters, label, isSelected, onPress, className } = props;
16+
const isMobile = useMediaQuery("(max-width: 625px)");
1717
const isTablet = useMediaQuery("(max-width: 1024px)");
1818

1919
const Icon = () => {
2020
return (
2121
<div className="flex justify-center items-center">
2222
<span
2323
className={clsx(
24-
"text-primary-foreground dark:text-primary text-lg lg:text-xl font-semibold lg:w-12 lg:bg-secondary/10 dark:lg:bg-primary/10 lgpx-1.5 lg:py-.5 lg:rounded-lg"
24+
"text-primary-foreground dark:text-primary text-2xl sm:text-lg lg:text-xl font-semibold lg:w-12 lg:bg-secondary/10 dark:lg:bg-primary/10 lgpx-1.5 lg:py-.5 lg:rounded-lg"
2525
)}
2626
>
2727
{iconCharacters}
@@ -36,11 +36,11 @@ const CharacterTile = (props: CharacterTileProps) => {
3636
isIconOnly={isTablet ? true : false}
3737
onPress={onPress}
3838
color="secondary"
39-
size="lg"
4039
variant={isSelected ? "bordered" : "light"}
4140
startContent={isTablet ? null : <Icon />}
41+
radius="lg"
4242
className={clsx(
43-
"flex items-center lg:pr-4 lg:pl-1.5 gap-2.5 text-primary-foreground dark:text-primary lg:w-full",
43+
"flex items-center lg:pr-4 lg:pl-1.5 gap-2.5 text-primary-foreground dark:text-primary lg:w-full h-14 w-14 lg:h-12",
4444
{ "bg-secondary/20 dark:bg-secondary/10": isSelected },
4545
className
4646
)}

‎components/navbar/more-actions.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,23 @@ import { Button } from "@nextui-org/button";
1010
import { Ellipsis } from "lucide-react";
1111
import { ClassNameProp } from "@/types";
1212
import clsx from "clsx";
13+
import { useMediaQuery } from "@react-hook/media-query";
1314

1415
const MoreActionsTile = ({ className }: ClassNameProp) => {
16+
const isMobile = useMediaQuery("(max-width: 625px)");
1517
const { isOpen, onOpen, onClose } = useDisclosure();
1618
return (
1719
<Button
1820
isIconOnly={true}
1921
onPress={onOpen}
20-
variant="flat"
21-
className={clsx("dark:border-zinc-800 dark:bg-zinc-900", className)}
22+
variant={isMobile ? "light" : "flat"}
23+
radius="lg"
24+
className={clsx(
25+
"sm:dark:border-zinc-800 sm:dark:bg-zinc-900 h-14 w-14 sm:h-12 sm:w-12 lg:h-10",
26+
className
27+
)}
2228
>
23-
<Ellipsis className="dark:text-primary h-5 w-5" />
29+
<Ellipsis className="dark:text-primary h-7 w-7 sm:h-5 sm:w-5" />
2430
</Button>
2531
);
2632
};

‎components/navbar/profile.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,16 @@ const ProfileTile = ({ className }: ClassNameProp) => {
3030
: "secondary"
3131
: "secondary"
3232
}
33-
variant="flat"
33+
variant={isMobile ? "light" : "flat"}
34+
radius="lg"
3435
startContent={isTablet ? null : <UserCircle2 size={22} />}
3536
className={clsx(
36-
"text-primary-foreground dark:text-primary lg:w-full",
37+
"text-primary-foreground dark:text-primary lg:w-full h-14 w-14 sm:h-12 sm:w-12 lg:h-10",
3738
className
3839
)}
3940
>
4041
{isTablet ? (
41-
<UserCircle2 size={22} />
42+
<UserCircle2 className="h-7 w-7 sm:h-5 sm:w-5" />
4243
) : (
4344
<span className="hidden lg:block ml-1 text-lg font-medium tracking-widest">
4445
Profile

‎components/navbar/theme-switch.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { FC } from "react";
44
import { useSwitch } from "@nextui-org/switch";
55
import { useTheme } from "next-themes";
66
import { useIsSSR } from "@react-aria/ssr";
7+
import { useMediaQuery } from "@react-hook/media-query";
8+
79
import { Button } from "@nextui-org/button";
810

911
import { SunMedium, MoonStar } from "lucide-react";
@@ -16,6 +18,7 @@ export interface ThemeSwitchProps {
1618
const ThemeSwitch: FC<ThemeSwitchProps> = ({ className }) => {
1719
const { theme, setTheme } = useTheme();
1820
const isSSR = useIsSSR();
21+
const isMobile = useMediaQuery("(max-width: 625px)");
1922

2023
const onChange = () => {
2124
theme === "light" ? setTheme("dark") : setTheme("light");
@@ -32,9 +35,14 @@ const ThemeSwitch: FC<ThemeSwitchProps> = ({ className }) => {
3235
return (
3336
<Button
3437
isIconOnly
35-
variant="flat"
38+
variant={isMobile ? "light" : "flat"}
3639
onClick={onChange}
37-
className={clsx(className)}
40+
size={isMobile ? "lg" : "md"}
41+
radius="lg"
42+
className={clsx(
43+
{ "dark:border-zinc-800 dark:bg-zinc-900": !isMobile },
44+
className
45+
)}
3846
>
3947
{!isSelected || isSSR ? (
4048
<MoonStar className="text-primary" size={22} />

‎components/navbar/title.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Title = ({ className }: ClassNameProp) => {
1212
"flex justify-center items-center gap-2.5 text-primary",
1313
className
1414
)}
15-
href="/?l=alphabets"
15+
href="/?l=alpha"
1616
>
1717
<HandMetal fill="currentColor" className="h-8 w-8" stroke="none" />
1818
<span className="hidden lg:block text-primary font-bold tracking-widest text-2xl">

0 commit comments

Comments
 (0)