From 7e54eb525e43b773b71a56a2b6e56b513313455b Mon Sep 17 00:00:00 2001
From: "sravan.j" <sjreddy@landolakes.com>
Date: Fri, 21 Feb 2025 20:52:44 +0530
Subject: [PATCH 1/2] Added NavBar and Updated SideBar icons

---
 frontend/src/app/(panel)/layout.tsx           | 24 ++++--
 frontend/src/app/dashboard/page.tsx           | 19 +++--
 frontend/src/app/interviews/page.tsx          |  2 +
 frontend/src/assets/icons/client-sidebar.svg  | 16 ++++
 frontend/src/assets/icons/interview.svg       |  3 +
 frontend/src/assets/icons/job.svg             |  4 +
 frontend/src/assets/icons/logout.svg          |  4 +
 frontend/src/assets/icons/navicon.svg         | 10 +++
 frontend/src/assets/icons/paltech-logo.svg    |  9 ++
 frontend/src/assets/icons/profile.svg         |  3 +
 frontend/src/assets/icons/settings.svg        |  3 +
 frontend/src/lib/components/shared/Icon.tsx   | 28 ++++++-
 frontend/src/lib/components/shared/NavBar.tsx | 25 ++++++
 .../src/lib/components/shared/SideBar.tsx     | 83 +++++++++++++++----
 14 files changed, 197 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/assets/icons/client-sidebar.svg
 create mode 100644 frontend/src/assets/icons/interview.svg
 create mode 100644 frontend/src/assets/icons/job.svg
 create mode 100644 frontend/src/assets/icons/logout.svg
 create mode 100644 frontend/src/assets/icons/navicon.svg
 create mode 100644 frontend/src/assets/icons/paltech-logo.svg
 create mode 100644 frontend/src/assets/icons/profile.svg
 create mode 100644 frontend/src/assets/icons/settings.svg
 create mode 100644 frontend/src/lib/components/shared/NavBar.tsx

diff --git a/frontend/src/app/(panel)/layout.tsx b/frontend/src/app/(panel)/layout.tsx
index 6d93e4e..a95cd7b 100644
--- a/frontend/src/app/(panel)/layout.tsx
+++ b/frontend/src/app/(panel)/layout.tsx
@@ -1,15 +1,25 @@
+"use client";
+import { Navbar } from "@/lib/components/shared/NavBar";
 import { Sidebar } from "@/lib/components/shared/SideBar";
+import { usePathname } from "next/navigation";
 import React, { PropsWithChildren } from "react";
 
 export default function Panel({ children }: PropsWithChildren) {
+  const pathname = usePathname();
+
+  const getTitle = () => {
+    if (pathname.startsWith("/jds")) return "Jobs";
+    if (pathname.startsWith("/profiles")) return "Candidates";
+    return "";
+  };
+
   return (
-    <React.Fragment>
-      <div className="min-h-screen bg-gray-50">
-        <Sidebar />
-        <div className="lg:pl-64">
-          <main className="p-4 lg:px-8">{children}</main>
-        </div>
+    <div className="min-h-screen bg-gray-50">
+      <Navbar title={getTitle()} />
+      <Sidebar />
+      <div className="lg:pl-[90px] pt-[72px]">
+        <main className="p-4 lg:px-8 bg-white rounded-[4px] mr-[14px] ml-[10px]">{children}</main>
       </div>
-    </React.Fragment>
+    </div>
   );
 }
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index a4ad6e0..053efd4 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -1,18 +1,19 @@
+import { Navbar } from "@/lib/components/shared/NavBar";
 import { Sidebar } from "@/lib/components/shared/SideBar";
 
 const Dashboard = () => {
   return (
-    <>
-      <div className="min-h-screen bg-gray-50">
-        <Sidebar />
-        <div className="lg:pl-64">
-          <main className="p-4 lg:px-8">
-            <div>Coming soon!</div>
-          </main>
-        </div>
+    <div className="min-h-screen bg-gray-50 flex">
+      <Sidebar />
+      {/* <Navbar /> */}
+      <div className="lg:pl-[100px] pt-[72px]">
+        <main className="p-4 lg:px-8"> 
+          <div>Coming soon!</div>
+        </main>
       </div>
-    </>
+    </div>
   );
 };
 
 export default Dashboard;
+
diff --git a/frontend/src/app/interviews/page.tsx b/frontend/src/app/interviews/page.tsx
index 98f627b..e3d9051 100644
--- a/frontend/src/app/interviews/page.tsx
+++ b/frontend/src/app/interviews/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { Navbar } from "@/lib/components/shared/NavBar";
 import { Sidebar } from "@/lib/components/shared/SideBar";
 import { APP_URL } from "@/lib/constants/configs";
 
@@ -10,6 +11,7 @@ const Interviews = () => {
   return (
     <>
       <div className="min-h-screen bg-gray-50">
+        {/* <Navbar /> */}
         <Sidebar />
         <div className="lg:pl-64">
           <main className="p-4 lg:px-8">
diff --git a/frontend/src/assets/icons/client-sidebar.svg b/frontend/src/assets/icons/client-sidebar.svg
new file mode 100644
index 0000000..4820b7c
--- /dev/null
+++ b/frontend/src/assets/icons/client-sidebar.svg
@@ -0,0 +1,16 @@
+<svg width="32" height="32" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.2677 23.5338C31.1169 23.7015 30.8677 23.5861 30.6938 23.5246C30.3123 23.3892 29.9492 23.2384 29.5431 23.1892C28.52 23.0661 27.5385 23.5399 26.7477 24.1599C25.9923 24.7522 25.4323 25.5261 24.7431 26.1769C24.1092 26.7753 23.4954 27.3784 22.8015 27.9107C21.4369 28.9569 19.9 29.7753 18.24 30.2384C17.8815 30.3384 17.5169 30.4215 17.1508 30.4892C16.0554 30.6922 11.48 31.4646 7.06769 28.7122C2.46154 25.8384 0.633845 20.743 0.624615 16.9753C0.619999 15.0092 1.10923 13.4184 1.22769 13.0492C1.83077 11.1692 2.84615 9.55071 4.08615 8.1984C4.37231 7.88763 4.50154 7.46609 4.43231 7.04917C4.00769 4.4784 3.58769 0.761478 4.69538 0.332247C4.83385 0.278401 5.00615 0.273786 5.22 0.344555C5.42769 0.407632 5.63692 0.478401 5.84769 0.55994C7.51538 1.20763 8.77538 2.27379 9.70308 3.34456C10.0585 3.75532 10.6262 3.90609 11.1431 3.74302C12.3169 3.37532 13.4446 3.18148 14.4308 3.16763C16.5277 3.13532 18.5354 3.78917 18.5354 3.78917C18.7062 3.84456 18.8708 3.89994 19.0323 3.95686C19.5277 4.13071 20.0831 4.00456 20.4477 3.62609C21.4677 2.56917 22.8523 1.51686 24.6554 0.967632C24.8723 0.901478 25.0862 0.846093 25.2969 0.798401C25.5169 0.743016 25.6862 0.75994 25.8215 0.824555C27.0369 1.3984 26.2908 5.47225 25.66 7.91686C25.6462 7.96148 25.5692 8.2984 25.56 8.35071C25.4492 9.03225 24.9723 10.1015 24.88 10.3461C24.7385 10.7246 24.5462 11.1307 24.2708 11.5846C23.38 13.0507 21.9492 14.0446 21.1492 14.2707C20.8277 14.3599 20.4862 14.2107 20.3138 13.9246C19.7846 13.0522 18.6431 11.5538 16.6692 10.9184C16.4077 10.8338 15.6677 10.6338 14.7831 10.6338C11.1308 10.6338 8.2 13.7215 8.45846 17.4292C8.67538 20.5338 11.1738 23.0553 14.2769 23.2969C15.4815 23.3907 16.5708 23.0646 16.6692 23.0307C17.6369 22.7107 18.4892 22.1369 19.2262 21.443C20.2215 20.5046 21.1646 19.3522 22.4015 18.6938C23.72 17.9922 25.3062 17.743 26.7692 18.0492C30.1385 18.7553 31.8415 22.8984 31.2662 23.5338H31.2677Z" fill="url(#paint0_linear_393_2311)"/>
+<defs>
+<linearGradient id="paint0_linear_393_2311" x1="33.7108" y1="35.7769" x2="2.53384" y2="-1.34621" gradientUnits="userSpaceOnUse">
+<stop offset="0.08" stop-color="#5353EF"/>
+<stop offset="0.28" stop-color="#3333ED"/>
+<stop offset="0.29" stop-color="#3232ED"/>
+<stop offset="0.44" stop-color="#3434ED"/>
+<stop offset="0.55" stop-color="#3E3EEF"/>
+<stop offset="0.65" stop-color="#4E4EF2"/>
+<stop offset="0.74" stop-color="#6464F6"/>
+<stop offset="0.76" stop-color="#6969F7"/>
+<stop offset="0.91" stop-color="#7B7BFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/src/assets/icons/interview.svg b/frontend/src/assets/icons/interview.svg
new file mode 100644
index 0000000..843d802
--- /dev/null
+++ b/frontend/src/assets/icons/interview.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7193 19.3465H9.28073C8.81966 19.3465 8.44784 19.7192 8.44784 20.1703V23.1762C8.44288 23.6273 8.81966 24 9.27577 24H14.7193C15.1803 24 15.5522 23.6273 15.5522 23.1762V20.1703C15.5522 19.7143 15.1754 19.3465 14.7193 19.3465ZM6.27639 19.3416H0.832886C0.371824 19.3416 0 19.7143 0 20.1654V23.1713C0 23.6273 0.376782 23.9951 0.832886 23.9951H6.27639C6.73745 23.9951 7.10927 23.6224 7.10927 23.1713V20.1654C7.10927 19.7094 6.73249 19.3416 6.27639 19.3416ZM23.1622 19.3416H17.7236C17.2625 19.3416 16.8907 19.7143 16.8907 20.1654V23.1713C16.8907 23.6273 17.2675 23.9951 17.7236 23.9951H23.1671C23.6282 23.9951 24 23.6224 24 23.1713V20.1654C23.995 19.7143 23.6232 19.3416 23.1622 19.3416ZM20.4454 15.4825H3.55464C3.19273 15.4825 2.90518 15.7718 2.90518 16.1248V18.2089H4.20905V16.7672H11.3481V18.2089H12.6519V16.7672H19.791V18.2089H21.0948V16.1248C21.0948 15.7669 20.8023 15.4825 20.4454 15.4825ZM18.3532 11.1575C16.6032 9.73547 14.7143 8.78908 14.3326 8.60275C14.288 8.58313 14.2632 8.539 14.2632 8.48996V7.1709C14.4664 6.81784 14.6003 6.45007 14.6548 6.11663C14.8036 6.10682 15.0019 5.89597 15.2101 5.16043C15.4827 4.21404 15.2299 4.0228 14.982 4.0228C15.0068 3.93944 15.0266 3.86098 15.0415 3.78252C15.4828 1.16401 14.1789 1.07084 14.1789 1.07084C14.1789 1.07084 13.9608 0.658938 13.3956 0.350012C13.0138 0.124447 12.4834 -0.047178 11.7843 0.011665C11.5563 0.0214722 11.3431 0.0656044 11.1398 0.134255C10.882 0.222519 10.6441 0.345109 10.4309 0.492216C10.1681 0.658938 9.92026 0.855082 9.70213 1.08555C9.35509 1.4337 9.04772 1.88483 8.91386 2.44875C8.79983 2.87045 8.82462 3.30687 8.91882 3.78252C8.93369 3.86098 8.95352 3.94434 8.97831 4.0228C8.73538 4.0277 8.49246 4.22875 8.76017 5.16043C8.97335 5.90087 9.1667 6.10682 9.31543 6.11663C9.36996 6.45007 9.49886 6.82274 9.70708 7.1709V8.48996C9.72196 8.539 9.69221 8.58313 9.64759 8.60275C9.26585 8.78908 7.3869 9.72567 5.63685 11.1477C5.31956 11.4076 5.13117 11.7901 5.13117 12.1971V13.423C5.13117 13.8054 5.4435 14.1095 5.82524 14.1095H11.2093L11.6852 11.9421C10.5251 10.3435 11.7695 10.2651 11.9876 10.2651C12.2057 10.2651 13.4501 10.3435 12.29 11.9421L12.766 14.1095H18.15C18.5367 14.1095 18.844 13.8005 18.844 13.423V12.1971C18.844 11.795 18.6656 11.4125 18.3532 11.1575Z" />
+</svg>
diff --git a/frontend/src/assets/icons/job.svg b/frontend/src/assets/icons/job.svg
new file mode 100644
index 0000000..b1da7a0
--- /dev/null
+++ b/frontend/src/assets/icons/job.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.11505 11.9316C8.11505 10.5607 8.83505 9.3534 9.91868 8.6734C9.0745 8.20026 8.12278 7.95231 7.15505 7.9534C4.40959 7.9534 2.05687 9.90612 1.56232 12.6043C1.53323 12.7643 1.57687 12.917 1.68232 13.0479C1.79141 13.1789 1.94777 13.2516 2.11505 13.2516H8.35141C8.19868 12.8407 8.11505 12.3934 8.11505 11.9316ZM16.7623 7.04431H16.7914C18.1696 7.03703 19.2896 5.9134 19.2896 4.53521C19.2896 3.14976 18.1623 2.02612 16.7805 2.02612C15.3987 2.02612 14.2714 3.1534 14.2714 4.53521C14.2678 5.9134 15.3841 7.03703 16.7623 7.04431ZM7.1405 7.04431H7.16959C8.54777 7.03703 9.66414 5.9134 9.66414 4.53521C9.66414 3.14976 8.53687 2.02612 7.15505 2.02612C5.77323 2.02612 4.64596 3.1534 4.64596 4.53521C4.64232 5.91703 5.76232 7.03703 7.1405 7.04431ZM11.966 15.7825C8.75868 15.7825 6.00596 18.0698 5.42777 21.2189C5.39505 21.4043 5.44232 21.5861 5.56596 21.7352C5.69323 21.8879 5.87868 21.9752 6.07505 21.9752H17.8569C18.0532 21.9752 18.2387 21.8879 18.366 21.7352C18.4896 21.5861 18.5369 21.4043 18.5041 21.2189C17.926 18.0698 15.1732 15.7825 11.966 15.7825ZM22.435 12.6079C22.1944 11.3015 21.5034 10.1207 20.4822 9.27097C19.4611 8.42124 18.1744 7.95631 16.846 7.95703C15.835 7.95703 14.875 8.22249 14.0387 8.69521C15.1041 9.37885 15.8169 10.5716 15.8169 11.9352C15.8169 12.4007 15.7332 12.8479 15.5841 13.2552H21.886C22.0532 13.2552 22.2132 13.1825 22.3187 13.0516C22.4205 12.9207 22.4678 12.7679 22.435 12.6079Z" />
+<path d="M9.02755 11.9362C9.02755 13.5508 10.3366 14.8635 11.9476 14.8744H11.9803C13.5948 14.8671 14.9039 13.5508 14.9039 11.9362C14.9039 10.3144 13.5839 8.99805 11.9657 8.99805C10.3439 8.99442 9.02755 10.3144 9.02755 11.9362Z" />
+</svg>
diff --git a/frontend/src/assets/icons/logout.svg b/frontend/src/assets/icons/logout.svg
new file mode 100644
index 0000000..a3eec8f
--- /dev/null
+++ b/frontend/src/assets/icons/logout.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.83395 0.668701C2.17091 0.668701 1.53503 0.932093 1.06618 1.40093C0.597344 1.86978 0.333952 2.50566 0.333952 3.1687V14.8354C0.333952 15.4984 0.597344 16.1343 1.06618 16.6031C1.53503 17.072 2.17091 17.3354 2.83395 17.3354H11.1673C11.8303 17.3354 12.4662 17.072 12.9351 16.6031C13.4039 16.1343 13.6673 15.4984 13.6673 14.8354V14.002C13.6673 13.5418 13.2942 13.1687 12.834 13.1687C12.3737 13.1687 12.0006 13.5418 12.0006 14.002V14.8354C12.0006 15.0564 11.9128 15.2683 11.7565 15.4246C11.6003 15.5809 11.3883 15.6687 11.1673 15.6687H2.83395C2.61294 15.6687 2.40098 15.5809 2.2447 15.4246C2.08842 15.2683 2.00062 15.0564 2.00062 14.8354V3.1687C2.00062 2.94769 2.08842 2.73573 2.2447 2.57945C2.40098 2.42317 2.61294 2.33537 2.83395 2.33537H11.1673C11.3883 2.33537 11.6003 2.42317 11.7565 2.57945C11.9128 2.73573 12.0006 2.94769 12.0006 3.1687V4.00203C12.0006 4.46227 12.3737 4.83537 12.834 4.83537C13.2942 4.83537 13.6673 4.46227 13.6673 4.00203V3.1687C13.6673 2.50566 13.4039 1.86977 12.9351 1.40093C12.4662 0.932093 11.8303 0.668701 11.1673 0.668701H2.83395Z" fill="#E53939"/>
+<path d="M10.9232 5.91278C10.5978 5.58734 10.0701 5.58734 9.7447 5.91278C9.41926 6.23822 9.41926 6.76585 9.7447 7.09129L10.8221 8.1687H7.00062C6.54038 8.1687 6.16729 8.5418 6.16729 9.00204C6.16729 9.46227 6.54038 9.83537 7.00062 9.83537H10.8221L9.7447 10.9128C9.41926 11.2382 9.41926 11.7659 9.7447 12.0913C10.0701 12.4167 10.5978 12.4167 10.9232 12.0913L13.4232 9.59129C13.7486 9.26585 13.7486 8.73822 13.4232 8.41278L10.9232 5.91278Z" fill="#E53939"/>
+</svg>
diff --git a/frontend/src/assets/icons/navicon.svg b/frontend/src/assets/icons/navicon.svg
new file mode 100644
index 0000000..e613c01
--- /dev/null
+++ b/frontend/src/assets/icons/navicon.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_393_2332)">
+<path d="M23.0284 1.94121V5.94816C23.0284 6.0806 23.0023 6.21176 22.9517 6.33414C22.901 6.45652 22.8268 6.56772 22.7331 6.6614C22.6395 6.75507 22.5283 6.82937 22.406 6.88007C22.2836 6.93077 22.1524 6.95686 22.02 6.95686H1.98C1.84755 6.95686 1.7164 6.93077 1.59404 6.88007C1.47168 6.82937 1.3605 6.75507 1.26686 6.6614C1.17322 6.56772 1.09896 6.45652 1.0483 6.33414C0.997649 6.21176 0.971601 6.0806 0.971647 5.94816V1.94121C0.971647 1.67378 1.07788 1.4173 1.26699 1.2282C1.45609 1.0391 1.71257 0.932861 1.98 0.932861H22.02C22.2874 0.932861 22.5439 1.0391 22.733 1.2282C22.9221 1.4173 23.0284 1.67378 23.0284 1.94121ZM14.6979 9.99639V14.0033C14.6979 14.2708 14.5916 14.5272 14.4025 14.7163C14.2134 14.9054 13.957 15.0117 13.6895 15.0117H1.98C1.71257 15.0117 1.45609 14.9054 1.26699 14.7163C1.07788 14.5272 0.971647 14.2708 0.971647 14.0033V9.99639C0.971647 9.72896 1.07788 9.47248 1.26699 9.28338C1.45609 9.09427 1.71257 8.98804 1.98 8.98804H13.6895C13.957 8.98804 14.2134 9.09427 14.4025 9.28338C14.5916 9.47248 14.6979 9.72896 14.6979 9.99639ZM23.0284 18.0516V22.0582C23.0284 22.1906 23.0023 22.3218 22.9517 22.4441C22.901 22.5665 22.8268 22.6777 22.7331 22.7714C22.6395 22.8651 22.5283 22.9394 22.406 22.9901C22.2836 23.0408 22.1524 23.0669 22.02 23.0669H10.3105C10.043 23.0669 9.78656 22.9606 9.59746 22.7715C9.40835 22.5824 9.30212 22.3259 9.30212 22.0585V18.0512C9.30207 17.9188 9.32812 17.7876 9.37877 17.6652C9.42943 17.5428 9.50369 17.4316 9.59733 17.338C9.69097 17.2443 9.80215 17.17 9.92451 17.1193C10.0469 17.0686 10.178 17.0425 10.3105 17.0425H22.02C22.1524 17.0425 22.2836 17.0686 22.406 17.1193C22.5283 17.17 22.6395 17.2443 22.7331 17.338C22.8268 17.4316 22.901 17.5428 22.9517 17.6652C23.0023 17.7876 23.0284 17.9191 23.0284 18.0516ZM23.028 11.9965C23.028 13.6606 21.6833 15.0117 20.0192 15.0117C18.3551 15.0117 17.0104 13.6606 17.0104 11.9969C17.0104 10.3391 18.3551 8.98804 20.0192 8.98804C21.6833 8.98804 23.028 10.3387 23.028 11.9965ZM6.98894 20.052C6.98894 21.7162 5.64424 23.0672 3.98047 23.0672C2.31671 23.0672 0.971647 21.7162 0.971647 20.052C0.971647 18.3946 2.31635 17.0432 3.98047 17.0432C5.64459 17.0432 6.98894 18.3946 6.98894 20.052Z" />
+</g>
+<defs>
+<clipPath id="clip0_393_2332">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/assets/icons/paltech-logo.svg b/frontend/src/assets/icons/paltech-logo.svg
new file mode 100644
index 0000000..1dffe96
--- /dev/null
+++ b/frontend/src/assets/icons/paltech-logo.svg
@@ -0,0 +1,9 @@
+<svg width="80" height="30" viewBox="0 0 80 30" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="80" height="30" fill="url(#pattern0_5_2155)"/>
+<defs>
+<pattern id="pattern0_5_2155" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_5_2155" transform="matrix(0.003125 0 0 0.00833333 0 -0.05)"/>
+</pattern>
+<image id="image0_5_2155" width="320" height="132" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/frontend/src/assets/icons/profile.svg b/frontend/src/assets/icons/profile.svg
new file mode 100644
index 0000000..2f32bcb
--- /dev/null
+++ b/frontend/src/assets/icons/profile.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.41531 17.3727H8.39031V14.2477L1.24968 11.2789V16.2102C1.24968 16.8508 1.77156 17.3727 2.41531 17.3727ZM10.1184 14.8664C10.0809 14.882 10.0403 14.8914 9.99968 14.8914C9.95906 14.8914 9.91843 14.882 9.88093 14.8664L9.01531 14.507V17.3727H10.9841V14.507L10.1184 14.8664ZM11.6091 17.3727H17.5841C18.2278 17.3727 18.7497 16.8508 18.7497 16.2102V11.2789L11.6091 14.2477V17.3727ZM17.5841 5.06016H2.41531C1.77156 5.06016 1.24968 5.58203 1.24968 6.22266V10.6039L8.80281 13.7445C8.81843 13.7477 8.83093 13.7539 8.84343 13.7602L9.99968 14.2414L11.1559 13.7602C11.1684 13.7539 11.1809 13.7477 11.1966 13.7445L18.7497 10.6039V6.22266C18.7497 5.58203 18.2278 5.06016 17.5841 5.06016ZM10.7184 11.5289H9.28093C9.10906 11.5289 8.96843 11.3883 8.96843 11.2164C8.96843 11.0445 9.10906 10.9039 9.28093 10.9039H10.7184C10.8903 10.9039 11.0309 11.0445 11.0309 11.2164C11.0309 11.3883 10.8903 11.5289 10.7184 11.5289ZM13.1809 4.43516V3.22266C13.1809 2.55078 12.6341 2.00391 11.9622 2.00391H8.03718C7.36531 2.00391 6.81843 2.55078 6.81843 3.22266V4.43516H7.44343V3.22266C7.44343 2.89453 7.71218 2.62891 8.03718 2.62891H11.9622C12.2872 2.62891 12.5559 2.89453 12.5559 3.22266V4.43516H13.1809Z" />
+</svg>
diff --git a/frontend/src/assets/icons/settings.svg b/frontend/src/assets/icons/settings.svg
new file mode 100644
index 0000000..4b3d4eb
--- /dev/null
+++ b/frontend/src/assets/icons/settings.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10.9181C7.42284 10.9181 6.85864 10.747 6.37875 10.4263C5.89885 10.1057 5.52482 9.64991 5.30395 9.11668C5.08308 8.58345 5.02529 7.99671 5.13789 7.43063C5.25049 6.86456 5.52842 6.34459 5.93653 5.93648C6.34465 5.52836 6.86462 5.25043 7.43069 5.13783C7.99676 5.02523 8.58351 5.08302 9.11674 5.30389C9.64997 5.52476 10.1057 5.89879 10.4264 6.37869C10.747 6.85858 10.9182 7.42278 10.9182 7.99994C10.917 8.77352 10.6091 9.51508 10.0621 10.0621C9.51513 10.6091 8.77358 10.9169 8 10.9181ZM13.7864 8.71358C13.85 8.23995 13.85 7.75994 13.7864 7.28631L15.0818 5.96358C15.1568 5.8857 15.2048 5.7858 15.2187 5.6786C15.2326 5.5714 15.2117 5.46256 15.1591 5.36812L13.8318 3.13176C13.777 3.03823 13.6933 2.96504 13.5933 2.92322C13.4932 2.88141 13.3823 2.87324 13.2773 2.89994L11.4864 3.35449C11.1003 3.06418 10.6806 2.82151 10.2364 2.63176L9.78182 0.87267C9.75144 0.768217 9.68812 0.676379 9.60129 0.610849C9.51446 0.545319 9.40878 0.509605 9.3 0.509033H6.71364C6.60486 0.509605 6.49918 0.545319 6.41235 0.610849C6.32552 0.676379 6.2622 0.768217 6.23182 0.87267L5.72727 2.62267C5.28161 2.81237 4.8604 3.05503 4.47273 3.3454L2.68182 2.89085C2.57675 2.8649 2.46612 2.87343 2.36626 2.91517C2.26641 2.95692 2.18262 3.02966 2.12727 3.12267L0.863637 5.36812C0.806631 5.45977 0.78111 5.56753 0.790956 5.67501C0.800801 5.78249 0.845474 5.88381 0.918183 5.96358L2.19546 7.28631C2.13182 7.75994 2.13182 8.23995 2.19546 8.71358L0.918183 10.0363C0.843213 10.1142 0.795238 10.2141 0.781326 10.3213C0.767415 10.4285 0.788301 10.5373 0.84091 10.6318L2.16818 12.8681C2.22299 12.9617 2.30671 13.0348 2.40673 13.0767C2.50676 13.1185 2.61766 13.1266 2.72273 13.0999L4.51364 12.6454C4.89876 12.9359 5.31868 13.1772 5.76364 13.3636L6.26818 15.1272C6.29589 15.228 6.35478 15.3175 6.43642 15.3828C6.51807 15.4481 6.61829 15.486 6.72273 15.4909H9.3C9.41403 15.5007 9.52796 15.4708 9.62242 15.4061C9.71688 15.3415 9.78606 15.2462 9.81818 15.1363L10.3227 13.3727C10.7677 13.1863 11.1876 12.945 11.5727 12.6545L13.3636 13.109C13.4584 13.1209 13.5545 13.1053 13.6407 13.0642C13.7269 13.0232 13.7995 12.9583 13.85 12.8772L15.1409 10.6454C15.2001 10.5545 15.2281 10.4468 15.2207 10.3386C15.2134 10.2303 15.171 10.1274 15.1 10.0454L13.7864 8.71358Z" fill="#9F9999"/>
+</svg>
diff --git a/frontend/src/lib/components/shared/Icon.tsx b/frontend/src/lib/components/shared/Icon.tsx
index daeb2cd..5d9e5af 100644
--- a/frontend/src/lib/components/shared/Icon.tsx
+++ b/frontend/src/lib/components/shared/Icon.tsx
@@ -9,6 +9,14 @@ import Quotes from "@/assets/icons/quotes.svg";
 import Pdf from "@/assets/icons/pdf.svg";
 import User from "@/assets/icons/user.svg";
 import Medal from "@/assets/icons/medal.svg";
+import Interview from "@/assets/icons/interview.svg";
+import Job from "@/assets/icons/job.svg";
+import Profile from "@/assets/icons/profile.svg";
+import Settings from "@/assets/icons/settings.svg";
+import Logout from "@/assets/icons/logout.svg";
+import PaltechLogo from "@/assets/icons/paltech-logo.svg";
+import ClientSideBar from "@/assets/icons/client-sidebar.svg";
+
 import React from "react";
 
 export type IconProps = {
@@ -25,7 +33,14 @@ export type IconNames =
   | "quotes"
   | "pdf"
   | "user"
-  | "medal";
+  | "medal"
+  | "interview"
+  | "job"
+  | "profile"
+  | "settings"
+  | "logout"
+  | "paltechLogo"
+  | "clientSideBar";
 
 const icons: { [key: string]: any } = {
   volumeOn: VolumeOnIcon,
@@ -38,15 +53,22 @@ const icons: { [key: string]: any } = {
   pdf: Pdf,
   user: User,
   medal: Medal,
+  interview: Interview,
+  job: Job,
+  profile: Profile,
+  settings: Settings,
+  logout: Logout,
+  paltechLogo: PaltechLogo,
+  clientSideBar : ClientSideBar,
 };
 
-const Icon = ({ name, ...rest }: IconProps) => {
+const Icon = ({ name,fill, ...rest }: IconProps) => {
   if (!name) return <></>;
 
   if (!icons[name]) {
     return <></>;
   }
   const Component = icons[name];
-  return <Component {...rest} />;
+  return <Component fill={fill} {...rest} />;
 };
 export default Icon;
diff --git a/frontend/src/lib/components/shared/NavBar.tsx b/frontend/src/lib/components/shared/NavBar.tsx
new file mode 100644
index 0000000..deef74a
--- /dev/null
+++ b/frontend/src/lib/components/shared/NavBar.tsx
@@ -0,0 +1,25 @@
+"use client";
+import Icon, { IconNames } from "./Icon";
+
+interface NavProps {
+  title: string;
+}
+
+interface NavItemIcons {
+  name: IconNames;
+}
+
+export const paltechLogo: NavItemIcons = { name: "paltechLogo" };
+
+export const Navbar = ({ title }: NavProps) => {
+  return (
+    <div className="fixed top-[16px] left-[80px] h-[40px] z-50 flex items-center justify-between w-[calc(100%-80px)] px-5 py-3 pr-1">
+      
+      <div className="text-[22px] font-medium leading-[22px]">{title}</div>
+
+        <div className="flex items-center pt-3 rounded-lg text-sm font-medium transition-all">
+            <Icon name={paltechLogo.name}  width={92} height={36}/>
+        </div>
+    </div>
+  );
+};
diff --git a/frontend/src/lib/components/shared/SideBar.tsx b/frontend/src/lib/components/shared/SideBar.tsx
index a670bfd..3829a8a 100644
--- a/frontend/src/lib/components/shared/SideBar.tsx
+++ b/frontend/src/lib/components/shared/SideBar.tsx
@@ -1,12 +1,13 @@
 "use client";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { cn } from "@/lib/shad-utils";
-import { LogOut } from "lucide-react";
-import { useRouter } from "next/navigation";
 import { useSuperProtection } from "@/lib/utils/contexts/SuperProtectionProvider";
 import { Roles } from "@/lib/enums/Roles";
 import { APP_URL } from "@/lib/constants/configs";
+import Icon, { IconNames } from "./Icon";
+import { Button } from "../ui/button";
+import { Avatar } from "@/lib/components/shared/Avatar";
 
 export const taNavigationItems = [
   { name: "Profiles", href: "/profiles" },
@@ -14,6 +15,28 @@ export const taNavigationItems = [
   { name: "Interviews", href: "/interviews" },
 ];
 
+interface TopSideBarItemProps {
+  name: IconNames;
+  href: string;
+}
+
+interface BottomSideBarItemProps {
+  name: IconNames;
+  width: number;
+  height: number;
+}
+
+export const topSideBarItems: TopSideBarItemProps[] = [
+  { name: "profile", href: "/profiles" },
+  { name: "job", href: "/jds" },
+  { name: "interview", href: "/interviews" },
+];
+
+export const bottomSideBarItems: BottomSideBarItemProps[] = [
+  { name: "settings", width: 10, height: 10 },
+  { name: "logout", width: 10, height: 10 },
+];
+
 export const others = [{ name: "Interviews", href: "/interviews" }];
 
 export const Sidebar = () => {
@@ -26,35 +49,61 @@ export const Sidebar = () => {
     localStorage.clear();
     router.push(`${APP_URL}`);
   };
+
   console.log(userDetails);
+
   const filteredNavItems =
     userDetails?.role === Roles.TA ? taNavigationItems : others;
 
   return (
-    <div className="fixed inset-y-0 left-0 z-50 w-64 bg-white hidden lg:block bg-primary-high-contrast">
-      <nav className="space-y-1 p-4">
-        {filteredNavItems.map((item) => (
+    <div className="fixed inset-y-0 left-0 z-50 w-15 bg-white hidden lg:flex flex-col justify-between bg-primary-high-contrast m-2.5 rounded-[0.6rem]">
+      <nav className="gap-8 p-4 flex flex-col items-center">
+        <Icon name="clientSideBar" width={40} height={40} className="mb-2" />
+        {topSideBarItems.map((item) => (
           <Link
             key={item.name}
             href={item.href}
             className={cn(
-              "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium",
+              "flex items-center gap-2 rounded-lg px-2 py-2 text-sm font-medium",
               pathname === item.href
                 ? "bg-gray-100 text-gray-900"
-                : "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+                : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
             )}
+            style={{
+              backgroundColor: pathname === item.href ? "#5353EF" : "transparent",
+            }}
           >
-            {item.name}
+            <Icon
+              name={item.name}
+              fill={pathname === item.href ? "white" : "#888383"}
+              width={24}
+              height={24}
+            />
           </Link>
         ))}
-        <Link
-          href=""
-          onClick={onLogout}
-          className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium"
-        >
-          <LogOut className="h-4 w-4" />
-          Logout
-        </Link>
+      </nav>
+
+      <nav className="gap-6 px-4 flex flex-col items-center pb-10">
+          <Button
+            key="settings"
+            style={{ width: "10px", height: "10px" }}
+            className="text-sm font-medium bg-white border-none shadow-none outline-none hover:bg-white active:bg-white focus:bg-white p-0"
+          >
+            <Icon name={"settings"} width={10} height={10} />
+          </Button>
+          <Button
+            key="logout"
+            onClick={onLogout}
+            style={{ width: "10px", height: "10px" }}
+            className="text-sm font-medium bg-white border-none shadow-none outline-none hover:bg-white active:bg-white focus:bg-white p-0"
+          >
+            <Icon name={"logout"} width={10} height={10} />
+          </Button>
+        <div className="flex gap-2">
+          <div className="w-[36px] h-[36px] rounded-full bg-yellow-500">
+            <Avatar />
+          </div>
+        </div>
       </nav>
     </div>
   );
-- 
GitLab


From d5a3c56fce4640d9b4bb55be8e39d95e80ef4371 Mon Sep 17 00:00:00 2001
From: "sravan.j" <sjreddy@landolakes.com>
Date: Fri, 21 Feb 2025 21:17:06 +0530
Subject: [PATCH 2/2] Updated Sidebar changes

---
 frontend/src/lib/components/shared/SideBar.tsx | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/shared/SideBar.tsx b/frontend/src/lib/components/shared/SideBar.tsx
index 3829a8a..2f32a8a 100644
--- a/frontend/src/lib/components/shared/SideBar.tsx
+++ b/frontend/src/lib/components/shared/SideBar.tsx
@@ -15,28 +15,17 @@ export const taNavigationItems = [
   { name: "Interviews", href: "/interviews" },
 ];
 
-interface TopSideBarItemProps {
+interface SideBarItemProps {
   name: IconNames;
   href: string;
 }
 
-interface BottomSideBarItemProps {
-  name: IconNames;
-  width: number;
-  height: number;
-}
-
-export const topSideBarItems: TopSideBarItemProps[] = [
+export const sideBarItems: SideBarItemProps[] = [
   { name: "profile", href: "/profiles" },
   { name: "job", href: "/jds" },
   { name: "interview", href: "/interviews" },
 ];
 
-export const bottomSideBarItems: BottomSideBarItemProps[] = [
-  { name: "settings", width: 10, height: 10 },
-  { name: "logout", width: 10, height: 10 },
-];
-
 export const others = [{ name: "Interviews", href: "/interviews" }];
 
 export const Sidebar = () => {
@@ -59,7 +48,7 @@ export const Sidebar = () => {
     <div className="fixed inset-y-0 left-0 z-50 w-15 bg-white hidden lg:flex flex-col justify-between bg-primary-high-contrast m-2.5 rounded-[0.6rem]">
       <nav className="gap-8 p-4 flex flex-col items-center">
         <Icon name="clientSideBar" width={40} height={40} className="mb-2" />
-        {topSideBarItems.map((item) => (
+        {sideBarItems.map((item) => (
           <Link
             key={item.name}
             href={item.href}
-- 
GitLab