Navbar completed static design

Author: Arunkoo

Client/package-lock.json

@@ -11,7 +11,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/vite": "^4.1.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

Client/package.json

@@ -0,0 +1,5 @@
+import logo1 from "./doc_10389487.png";
+
+export const navLogo = {
+  logo1,
+};

Client/src/assets/doc_10389487.png

@@ -4,11 +4,11 @@ import SideBar from "./SideBar";
 
 const AppLayout = () => {
   return (
-    <div className="flex gap-1 flex-col min-h-screen text-foreground bg-background lg:ml-[120px] md:ml-[60px] ml-5 mt-1.5  lg:mr-[120px] md:mr-[60px] mr-5">
+    <div className="flex gap-1 flex-col min-h-screen text-foreground bg-accent lg:ml-40 md:ml-[60px] lg:mr-40 ml-5 md:mr-[60px] mr-5 mt-6">
       <Navbar />
       <div className="flex flex-1 w-full">
         <SideBar />
-        <main className="bg-amber-800 w-full md:w-[75%]">
+        <main className=" w-full md:w-[75%]">
           <Outlet />
           <h1>Hello</h1>
         </main>

Client/src/assets/images.ts

@@ -1,9 +1,42 @@
+import { navLogo } from "../../assets/images";
+import { Moon, Bell } from "lucide-react";
+import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar";
+
 const Navbar = () => {
   return (
-    <div className=" min-w-full h-[77px] bg-red-500 flex  justify-between items-center px-4 py-2  border-b ">
-      <div>logo</div>
-      <div>button</div>
-    </div>
+    <nav className="w-full h-16 md:h-[77px]  bg-gray-500/15 border-b flex items-center justify-between px-4 py-2 rounded-2xl">
+      {/* Logo Section */}
+      <div className="flex items-center gap-2">
+        <img
+          src={navLogo.logo1}
+          alt="BrainVector Logo"
+          className="h-7 md:h-9 object-contain"
+        />
+        <h1 className="flex items-end gap-1 text-xl md:text-2xl font-semibold">
+          <span>Brain</span>
+          <span className="italic font-normal">Vector</span>
+        </h1>
+      </div>
+
+      {/* Right Section */}
+      <div className="flex items-center gap-3">
+        {/* Responsive Icon Sizes */}
+        <Moon
+          size={20}
+          className="md:size-5 cursor-pointer transition hover:opacity-70"
+        />
+        <Bell
+          size={20}
+          className="md:size-5 cursor-pointer transition hover:opacity-70"
+        />
+
+        {/* Avatar */}
+        <Avatar className="ml-2 cursor-pointer">
+          <AvatarImage src="https://github.com/shadcn.png" alt="User Avatar" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+      </div>
+    </nav>
   );
 };
 

Client/src/components/Layout/AppLayout.tsx

@@ -1,6 +1,6 @@
 const SideBar = () => {
   return (
-    <div className="hidden md:block bg-amber-100 w-[25%] min-h-dvh">
+    <div className="hidden md:block  w-[25%] min-h-dvh">
       <h1 className="">sideBars</h1>
     </div>
   );

Client/src/components/Layout/Navbar.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

Client/src/components/Layout/SideBar.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }