From 691dc7c100f8ba164b967a1446501507db1f7fe7 Mon Sep 17 00:00:00 2001 From: Mahyar Khanbolooki Date: Fri, 4 Jul 2025 14:03:41 +0330 Subject: [PATCH] add: bottom nav bar --- src/app/auth/layout.tsx | 1 - src/app/auth/page.tsx | 1 - src/app/globals.css | 1 + src/app/layout.tsx | 12 +- src/app/menu/layout.tsx | 22 ++++ src/app/menu/page.tsx | 10 ++ src/app/page.tsx | 115 +----------------- src/components/icons/BagIcon.tsx | 33 +++++ src/components/icons/HeartIcon.tsx | 24 ++++ src/components/icons/HomeHashtagIcon.tsx | 45 +++++++ src/components/icons/NotifBoardIcon.tsx | 45 +++++++ src/components/icons/PagerIcon.tsx | 45 +++++++ src/components/loading/LoadingOverlay.tsx | 4 +- src/components/navigation/BottomNavBar.tsx | 86 +++++++++++++ src/components/navigation/BottomNavLink.tsx | 21 ++++ .../navigation/BottomNavLinkBig.tsx | 23 ++++ src/lib/api/axiosInstance.ts | 2 - 17 files changed, 368 insertions(+), 122 deletions(-) create mode 100644 src/app/menu/layout.tsx create mode 100644 src/app/menu/page.tsx create mode 100644 src/components/icons/BagIcon.tsx create mode 100644 src/components/icons/HeartIcon.tsx create mode 100644 src/components/icons/HomeHashtagIcon.tsx create mode 100644 src/components/icons/NotifBoardIcon.tsx create mode 100644 src/components/icons/PagerIcon.tsx create mode 100644 src/components/navigation/BottomNavBar.tsx create mode 100644 src/components/navigation/BottomNavLink.tsx create mode 100644 src/components/navigation/BottomNavLinkBig.tsx diff --git a/src/app/auth/layout.tsx b/src/app/auth/layout.tsx index fd29c3d..ccfac74 100644 --- a/src/app/auth/layout.tsx +++ b/src/app/auth/layout.tsx @@ -1,4 +1,3 @@ -"use client"; import { ReactQueryProvider } from '@/components/providers/ReactQueryProvider' diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index 646be9d..f6b2fd3 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -117,7 +117,6 @@ function AuthIndex({ }: Props) { }; const onSubmit = async (e: FormEvent) => { - console.log(step); e.preventDefault(); try { setIsPending(true); diff --git a/src/app/globals.css b/src/app/globals.css index 64e55d9..211731c 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -15,6 +15,7 @@ --color-disabled-text: #8C90A3; --radius-normal: 10px; --text-sm2: 13px; + --text-xs2: 10px; --radius-container: 24px; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 21fedd4..01ca00a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,20 +1,22 @@ -import type { Metadata } from "next"; +import { Metadata } from "next"; import "./globals.css"; export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; + title: 'Dashboard', + description: 'Webapp dashboard' +} export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { + return ( + {children} diff --git a/src/app/menu/layout.tsx b/src/app/menu/layout.tsx new file mode 100644 index 0000000..b92855f --- /dev/null +++ b/src/app/menu/layout.tsx @@ -0,0 +1,22 @@ +import BottomNavBar from "@/components/navigation/BottomNavBar"; +import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider"; + +export const metadata = { + title: 'Menu', +} + +export default function MenuLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + + return ( + +
+ {children} +
+ + + ); +} diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx new file mode 100644 index 0000000..fb369bb --- /dev/null +++ b/src/app/menu/page.tsx @@ -0,0 +1,10 @@ +'use client'; + +export default function MenuIndex() { + + return ( + <> + Menu + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 70b9c0b..4bf1ca8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,118 +1,11 @@ -'use client'; - -import { useAuthStore } from "@/zustand/authStore"; -import Image from "next/image"; import Link from "next/link"; export default function Home() { - - const logout = useAuthStore((state) => state.logout); - const isAuthenticated = useAuthStore((state) => state.isAuthenticated); - return ( -
-
- {!isAuthenticated && Login} - {isAuthenticated && -
- {/* Profile -
*/} - Logout -
} - Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- +
+ Auth
+ Menu
+ Index
); } diff --git a/src/components/icons/BagIcon.tsx b/src/components/icons/BagIcon.tsx new file mode 100644 index 0000000..13bbc6a --- /dev/null +++ b/src/components/icons/BagIcon.tsx @@ -0,0 +1,33 @@ +import React from "react"; + +type Props = React.SVGProps; + +const BagIcon = (props: Props) => ( + + + + +); + +export default BagIcon; diff --git a/src/components/icons/HeartIcon.tsx b/src/components/icons/HeartIcon.tsx new file mode 100644 index 0000000..aacc6fe --- /dev/null +++ b/src/components/icons/HeartIcon.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +type Props = React.SVGProps; + +const HeartIcon = (props: Props) => ( + + + +); + +export default HeartIcon; diff --git a/src/components/icons/HomeHashtagIcon.tsx b/src/components/icons/HomeHashtagIcon.tsx new file mode 100644 index 0000000..933edc5 --- /dev/null +++ b/src/components/icons/HomeHashtagIcon.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +type Props = React.SVGProps; + +const HomeHashtagIcon = (props: Props) => ( + + + + + + +); + +export default HomeHashtagIcon; diff --git a/src/components/icons/NotifBoardIcon.tsx b/src/components/icons/NotifBoardIcon.tsx new file mode 100644 index 0000000..a0d6725 --- /dev/null +++ b/src/components/icons/NotifBoardIcon.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +type Props = React.SVGProps; + +const NotifiBoardIcon = (props: Props) => ( + + + + + + +); + +export default NotifiBoardIcon; diff --git a/src/components/icons/PagerIcon.tsx b/src/components/icons/PagerIcon.tsx new file mode 100644 index 0000000..ae139e3 --- /dev/null +++ b/src/components/icons/PagerIcon.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +type Props = React.SVGProps; + +const PagerIcon = (props: Props) => ( + + + + + + +); + +export default PagerIcon; diff --git a/src/components/loading/LoadingOverlay.tsx b/src/components/loading/LoadingOverlay.tsx index bf4a52e..970b50e 100644 --- a/src/components/loading/LoadingOverlay.tsx +++ b/src/components/loading/LoadingOverlay.tsx @@ -25,8 +25,8 @@ const LoadingOverlay = ({ visible = true, bgOpacity = 30, delay = 0, children = className={`absolute inset-0 flex items-center justify-center backdrop-blur-sm bg-background/${bgOpacity} opacity-0 transition-opacity duration-300 ease-in-out delay-${delay} - data-[loaded=false]:-z-100 - data-[visible=true]:z-100 + data-[loaded=false]:-z-50 + data-[visible=true]:z-50 data-[visible=true]:opacity-100`} > {children} diff --git a/src/components/navigation/BottomNavBar.tsx b/src/components/navigation/BottomNavBar.tsx new file mode 100644 index 0000000..7be7ffd --- /dev/null +++ b/src/components/navigation/BottomNavBar.tsx @@ -0,0 +1,86 @@ +import React from 'react' +import BottomNavLink from './BottomNavLink' +import BottomNavHighlightLink from './BottomNavLinkBig' +import HomeHashtagIcon from '../icons/HomeHashtagIcon' +import PagerIcon from '../icons/PagerIcon' +import NotifiBoardIcon from '../icons/NotifBoardIcon' +import BagIcon from '../icons/BagIcon' +import HeartIcon from '../icons/HeartIcon' + +type Props = object + +function BottomNavBar({ }: Props) { + return ( +
+
+ + + + + + {/* 🔽 Your HTML content inside SVG */} + +
+ } value="پسند ها" /> + } value="اعلان ها" /> + } value="منو" /> + } value="پیجر" /> + } value="سبد خرید" /> +
+ + + + + + + + + + + + + + + +
+
+ ) +} + +export default BottomNavBar \ No newline at end of file diff --git a/src/components/navigation/BottomNavLink.tsx b/src/components/navigation/BottomNavLink.tsx new file mode 100644 index 0000000..b7a08d5 --- /dev/null +++ b/src/components/navigation/BottomNavLink.tsx @@ -0,0 +1,21 @@ +import Link from 'next/link' +import React from 'react' +import type { LinkProps } from 'next/link' + +type Props = { + icon: React.ReactElement + value: string +} & LinkProps & React.AnchorHTMLAttributes + +function BottomNavLink({ icon, value, ...restProps }: Props) { + return ( + + {icon} + + {value} + + + ) +} + +export default BottomNavLink diff --git a/src/components/navigation/BottomNavLinkBig.tsx b/src/components/navigation/BottomNavLinkBig.tsx new file mode 100644 index 0000000..80bed7d --- /dev/null +++ b/src/components/navigation/BottomNavLinkBig.tsx @@ -0,0 +1,23 @@ +import Link from 'next/link' +import React from 'react' +import type { LinkProps } from 'next/link' + +type Props = { + icon: React.ReactElement + value: string +} & LinkProps & React.AnchorHTMLAttributes + +function BottomNavHighlightLink({ icon, value, ...restProps }: Props) { + return ( + +
+ {icon} +
+ + {value} + + + ) +} + +export default BottomNavHighlightLink diff --git a/src/lib/api/axiosInstance.ts b/src/lib/api/axiosInstance.ts index 490afa2..6873e33 100644 --- a/src/lib/api/axiosInstance.ts +++ b/src/lib/api/axiosInstance.ts @@ -28,8 +28,6 @@ const processQueue = (error: unknown, token: string | null = null) => { // Attach access token to requests api.interceptors.request.use((config) => { const state = useAuthStore.getState(); - console.log('AuthStore state:', state); - const token = state.user?.accessToken; if (token) {