Merge branch 'fix-reusable-sidebar'

frontend/src/components/layout/header/Header.jsx

@@ -15,7 +15,7 @@ function Header({ onConnectWallet, onLogout }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const location = useLocation(); // Getting object of currant route
 
-  const makeNavStick = location.pathname === "/overview" || location.pathname === "/documentation"
+  const makeNavStick = location.pathname === "/overview" || location.pathname === "/documentation" || location.pathname === "/dashboard" || location.pathname === "/stake" || location.pathname === "/withdraw"
 
   // Blocking screen scroll if menu is open
   useLockBodyScroll(isMenuOpen);

frontend/src/components/ui/Components/Sidebar/Sidebar.css

@@ -0,0 +1,110 @@
+.sidebar {
+    background-color: black;
+    border-right: 1px solid #300734;
+    display: none;
+    color: #83919F;
+}
+
+
+@media (min-width: 1024px) {
+    .sidebar {
+        display: block;
+    }
+}
+
+.sidebar-sticky {
+    position: absolute;
+    top: 0px;
+    height: calc(100vh - 50px);
+    overflow-y: auto;
+    width: 20%;
+}
+
+/* Title styles */
+.sidebar-title {
+    padding: 12px 8px;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.sidebar-title h2 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #d6d6d6;
+}
+
+/* Navigation styles */
+.sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 0;
+}
+
+/* Item styles */
+.sidebar-item-wrapper {
+    width: 100%;
+}
+
+.sidebar-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    font-size: 14px;
+    color: #374151;
+    text-decoration: none;
+    transition: background-color 0.2s, color 0.2s;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-align: left;
+}
+
+.sidebar-item:hover {
+   color: white;
+}
+
+.sidebar-item.active {
+    color: white;
+}
+
+.sidebar-item.nested {
+    padding-left: 32px;
+}
+
+/* Icon styles */
+.item-icon {
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+}
+
+.item-name {
+    flex: 1;
+}
+
+.expand-icon {
+    margin-left: 8px;
+}
+
+/* Nested items container */
+.nested-items {
+    margin-left: 16px;
+}
+
+/* Scrollbar styles */
+.sidebar-sticky::-webkit-scrollbar {
+    width: 4px;
+}
+
+.sidebar-sticky::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+.sidebar-sticky::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+.sidebar-sticky::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}

frontend/src/components/ui/Components/Sidebar/Sidebar.jsx

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import './Sidebar.css';
+
+const Sidebar = ({ 
+  title, 
+  items, 
+  className = '' 
+}) => {
+  const location = useLocation();
+  const [activeItemId, setActiveItemId] = useState('');
+  const [expandedItems, setExpandedItems] = useState({});
+
+  useEffect(() => {
+    // Handle hash changes for scroll navigation
+    const hash = location.hash.replace('#', '');
+    if (hash) {
+      setActiveItemId(hash);
+      const element = document.getElementById(hash);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+
+    // Find and set active item based on current path
+    const currentPath = location.pathname;
+    items.forEach(item => {
+      if (item.link === currentPath) {
+        setActiveItemId(item.id);
+      }
+      if (item.children) {
+        item.children.forEach(child => {
+          if (child.link === currentPath) {
+            setActiveItemId(child.id);
+            setExpandedItems(prev => ({ ...prev, [item.id]: true }));
+          }
+        });
+      }
+    });
+  }, [location, items]);
+
+  const handleItemClick = (item) => {
+    if (item.children) {
+      // Toggle expansion for items with children
+      setExpandedItems(prev => ({
+        ...prev,
+        [item.id]: !prev[item.id]
+      }));
+    } else if (item.link.startsWith('#')) {
+      // Handle hash navigation
+      const elementId = item.link.replace('#', '');
+      const element = document.getElementById(elementId);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+        setActiveItemId(item.id);
+        // Update URL with hash
+        window.history.pushState(null, '', item.link);
+      }
+    }
+  };
+
+  const renderSidebarItem = (item, level = 0) => {
+    const isActive = activeItemId === item.id;
+    const isExpanded = expandedItems[item.id];
+    const hasChildren = item.children && item.children.length > 0;
+    const itemClass = `sidebar-item ${isActive ? 'active' : ''} ${level > 0 ? 'nested' : ''}`;
+
+    return (
+      <div key={item.id} className="sidebar-item-wrapper">
+        {item.link.startsWith('#') ? (
+          <button
+            onClick={() => handleItemClick(item)}
+            className={itemClass}
+          >
+            {item.icon && (
+              <span className="item-icon">
+                <img src={item.icon} alt={item.name} />
+              </span>
+            )}
+            <span className="item-name">{item.name}</span>
+            {hasChildren && (
+              <span className="expand-icon">
+                {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+              </span>
+            )}
+          </button>
+        ) : (
+          <Link
+            to={item.link}
+            className={itemClass}
+          >
+            {item.icon && (
+              <span className="item-icon">
+              <img src={item.icon} alt={item.name} />
+            </span>
+            )}
+            <span className="item-name">{item.name}</span>
+            {hasChildren && (
+              <span className="expand-icon">
+                {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+              </span>
+            )}
+          </Link>
+        )}
+
+        {hasChildren && isExpanded && (
+          <div className="nested-items">
+            {item.children.map(child => renderSidebarItem(child, level + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={`sidebar ${className}`}>
+      {title && (
+        <div className="sidebar-title">
+          <h2>{title}</h2>
+        </div>
+      )}
+      <nav className="sidebar-nav">
+        {items.map(item => renderSidebarItem(item))}
+      </nav>
+    </div>
+  );
+};
+
+export default Sidebar;

frontend/src/components/vault/VaultLayout.jsx

@@ -1,11 +1,32 @@
 import React from 'react';
-import { NavLink, Outlet } from 'react-router-dom';
-import './vaultLayout.css';
+import { Outlet } from 'react-router-dom';
+ import './vaultLayout.css';
+import Sidebar from 'components/ui/Components/Sidebar/Sidebar';
 
 export function VaultLayout({ children }) {
+  const vaultItems = [
+    {
+      id: 'home',
+      name: 'Home',
+      link: '/',
+      icon: '•'
+    },
+    {
+      id: 'stake ',
+      name: 'Stake',
+      link: '/stake',
+      icon: '•'
+    },
+  {
+    id: 'withdraw',
+    name: 'Withdraw',
+    link: '/withdraw',
+    icon: '•'
+  }
+  ];
   return (
     <div className="layout">
-      <aside className="sidebar">
+      {/* <aside className="sidebar">
         <div className="sidebar-content">
           <h2 className="sidebar-title">Vault</h2>
           <nav className="sidebar-nav">
@@ -34,8 +55,13 @@ export function VaultLayout({ children }) {
               Withdraw
             </NavLink>
           </nav>
-        </div>
-      </aside>
+        </div> 
+       </aside> */}
+      <Sidebar 
+      title='Vault'
+  items={vaultItems}
+  className="sidebar-docs-sticky"
+/>
 
       <main className="@media (max-width: 1024px) {
   .sidebar-content {

frontend/src/components/vault/vaultLayout.css

@@ -1,14 +1,25 @@
-.sidebar {
+.layout {
+  display: flex; 
+  /* min-height: 100vh; */
+  /* background: url('../../../public/background.png') no-repeat; */
+  /* background-size: cover; */
+  /* background-position: center 39%; */
+  /* background-repeat: no-repeat; */
+  /* position: relative; */
+}
+
+/* .sidebar1 {
   width: 280px;
   background-color: #00000f;
   border-right: 1px solid #300734;
   display: flex;
   flex-direction: column;
   padding: 1.5rem 2.5rem 1.5rem;
   position: absolute;
+  top: 50;
 }
 
-.sidebar-title {
+.sidebar1-title {
   color: white;
   font-size: 1rem;
   font-weight: 500;
@@ -17,7 +28,7 @@
   border-bottom: 1px solid var(--light-purple);
 }
 
-.sidebar-nav {
+.sidebar1-nav {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -60,12 +71,13 @@
 
 .nav-item.active .nav-bullet {
   color: var(--nav-button-hover);
-}
+} */
 
 .main-content {
   flex: 1;
   padding: 2rem 0;
   position: relative;
+  width: 100%;
 }
 @media (min-width: 1024px) {
   .sidebar {