navbar sidebar redux-store updated

client/app/(patient)/signin/page.tsx

@@ -24,8 +24,8 @@ const SignIn = ()=> {
             <p className="justify-items-end text-dark-600 xl:text-left">
               © 2024 AVM  Ayurveda&apos;s
             </p>
-            <Link href={"/doctor/staf-login"} className="text-green-500">
-              Staf
+            <Link href={"/staff/login"} className="text-green-500">
+              Staff
             </Link>
           </div>
         </div>

client/app/StoreProvider.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Provider } from 'react-redux';
-import { makeStore,AppStore } from '@/lib/redux/store';
+import { makeStore,AppStore } from '@/lib/store';
 import { useRef } from 'react';
 
 export const  StoreProvider = ({ children }: { children: React.ReactNode })=> {

client/app/staff/layout.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import SideBar from "@/components/SideBar";
+
+interface AdminLayoutWrapperProps {
+  children: React.ReactNode;
+}
+
+const AdminLayoutWrapper: React.FC<AdminLayoutWrapperProps> = ({ children }) => {
+  return (
+    <div className="flex min-h-screen bg-background">
+      <SideBar />
+      <div className="flex-1 overflow-auto">
+        <main className="container mx-auto p-3 sm:p-5 lg:p-7">{children}</main>
+      </div>
+    </div>
+  );
+};
+
+export default AdminLayoutWrapper;

client/app/stafs/signin/page.tsx → client/app/staff/signin/page.tsx

@@ -19,7 +19,7 @@ const SignIn = () => {
             <p className="justify-items-end text-dark-600 xl:text-left">
               © 2024 AVM Ayurveda&apos;s
             </p>
-            <Link href={"/patient/signin"} className="text-green-500">
+            <Link href={"/signin"} className="text-green-500">
               Patient
             </Link>
           </div>

client/components/NavBar.tsx

@@ -1,3 +1,4 @@
+'use client'
 import Link from "next/link";
 import { Sheet, SheetTrigger, SheetContent, SheetTitle } from "@/components/ui/sheet";
 import { Button } from "@/components/ui/button";
@@ -13,8 +14,15 @@ import {
 } from "@/components/ui/dropdown-menu";
 import Image from "next/image";
 import { NavLinks } from "@/constants";
+import { usePathname } from "next/navigation";
 
-export default function Component() {
+export const NavBar = () => {
+  const path = usePathname();
+
+  if(path.includes('signup')|| path.includes('staff')||  path.includes('signin') || []){
+    return null;
+  }
+
   return (
     <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
       <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
@@ -45,13 +53,7 @@ export default function Component() {
           </SheetTitle>
           <nav className="grid gap-6 text-lg font-medium">
             <Link href="/client" className="flex items-center gap-2 text-lg font-semibold" prefetch={false}>
-              <Image
-                src={"/assets/icons/logo-icon.svg"}
-                width={33}
-                height={33}
-                alt="Logo"
-                className="h-11 w-11"
-              />
+              <Image src={"/assets/icons/logo-icon.svg"} width={33} height={33} alt="Logo" className="h-11 w-11" />
               <span className="sr-only">Acme Inc</span>
             </Link>
             {NavLinks.map((link) => (
@@ -108,4 +110,6 @@ export default function Component() {
       </div>
     </header>
   );
-}
+};
+
+export default NavBar;

client/components/SideBar.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 import { AdminSideBarLinks } from "@/constants";
 
 const  SideBar= () =>{
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
 
   return (
     <div className="flex h-screen">
@@ -23,7 +23,7 @@ const  SideBar= () =>{
           <div>
             <SidebarLink
               link={{
-                label: "Manu Arora",
+                label: "Admin",
                 href: "#",
                 icon: (
                   <Image

client/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

client/components/ui/sidebar.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "@/lib/utils";
 import Link, { LinkProps } from "next/link";
-import React, { useState, createContext, useContext } from "react";
+import React, { useState, createContext, useContext, useEffect } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 
@@ -74,22 +74,33 @@ export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => {
 
 export const DesktopSidebar = ({ className, children, ...props }: React.ComponentProps<typeof motion.div>) => {
   const { open, setOpen, animate } = useSidebar();
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    setOpen(false);
+  }, [setOpen]);
+
   return (
-    <>
-      <motion.div
-        className={cn(
-          "h-full px-4 py-4 hidden  md:flex md:flex-col bg-neutral-100 dark:bg-neutral-800 w-[300px] flex-shrink-0",
-          className
-        )}
-        animate={{
-          width: animate ? (open ? "300px" : "60px") : "300px",
-        }}
-        onMouseEnter={() => setOpen(true)}
-        onMouseLeave={() => setOpen(false)}
-        {...props}>
-        {children}
-      </motion.div>
-    </>
+    <motion.div
+      className={cn(
+        "h-full px-4 py-4 hidden md:flex md:flex-col bg-neutral-100 dark:bg-neutral-800 flex-shrink-0 transition-all duration-300 ease-in-out",
+        className
+      )}
+      animate={{
+        width: animate ? (isHovered ? "180px" : "60px") : "180px",
+      }}
+      onMouseEnter={() => {
+        setIsHovered(true);
+        setOpen(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+        setOpen(false);
+      }}
+      {...props}
+    >
+      {children}
+    </motion.div>
   );
 };
 
@@ -99,10 +110,11 @@ export const MobileSidebar = ({ className, children, ...props }: React.Component
     <>
       <div
         className={cn(
-          "h-10 px-4 py-4 flex flex-row md:hidden  items-center justify-between bg-neutral-100 dark:bg-neutral-800 w-full"
+          "h-10 px-4 py-4 flex flex-row md:hidden items-center justify-between bg-neutral-100 bg-inherit800 w-full mt-6"
         )}
-        {...props}>
-        <div className="flex justify-end z-20 w-full">
+        {...props}
+      >
+        <div className="flex justify-end z-20 w-full bg-">
           <Image
             src={"/assets/icons/menu.svg"}
             alt="Menu Icon"
@@ -125,10 +137,12 @@ export const MobileSidebar = ({ className, children, ...props }: React.Component
               className={cn(
                 "fixed h-full w-full inset-0 bg-white dark:bg-neutral-900 p-10 z-[100] flex flex-col justify-between",
                 className
-              )}>
+              )}
+            >
               <div
                 className="absolute right-10 top-10 z-50 text-neutral-800 dark:text-neutral-200"
-                onClick={() => setOpen(!open)}>
+                onClick={() => setOpen(!open)}
+              >
                 <Image src="/assets/icons/x.svg" alt="X icon" width={23} height={23} />
               </div>
               {children}
@@ -145,18 +159,20 @@ export const SidebarLink = ({ link, className, ...props }: { link: Links; classN
   return (
     <Link
       href={link.href}
-      className={cn("flex items-center justify-start gap-2  group/sidebar py-2", className)}
-      {...props}>
+      className={cn("flex items-center justify-start gap-2 group/sidebar py-2", className)}
+      {...props}
+    >
       {link.icon}
 
       <motion.span
         animate={{
           display: animate ? (open ? "inline-block" : "none") : "inline-block",
           opacity: animate ? (open ? 1 : 0) : 1,
         }}
-        className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0">
+        className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0"
+      >
         {link.label}
       </motion.span>
     </Link>
   );
-};
+};

client/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

client/lib/redux/store.ts → client/lib/store.ts

@@ -1,7 +1,7 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { authApi } from "./features/api/authApi";
 import authSlice from "./features/slices/authSlice";
-import localStorageMiddleWare from "../middlewares/localStorageMiddlewarre";
+import localStorageMiddleWare from "./middlewares/localStorageMiddleware";
 
 export const makeStore = () => {
   return configureStore({