styling fiexes and logout fixed
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,6 +1,5 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import { Bell } from "lucide-react";
|
||||
|
||||
// Assume these icons are imported from an icon library
|
||||
import {
|
||||
@@ -8,18 +7,12 @@ import {
|
||||
GridIcon,
|
||||
HorizontaLDots,
|
||||
ListIcon,
|
||||
PieChartIcon,
|
||||
PlugInIcon,
|
||||
TaskIcon,
|
||||
BoltIcon,
|
||||
DocsIcon,
|
||||
PageIcon,
|
||||
DollarLineIcon,
|
||||
FileIcon,
|
||||
UserIcon,
|
||||
UserCircleIcon,
|
||||
ShootingStarIcon,
|
||||
CalendarIcon,
|
||||
TagIcon,
|
||||
} from "../icons";
|
||||
import { useSidebar } from "../context/SidebarContext";
|
||||
import { useAuthStore } from "../store/authStore";
|
||||
@@ -45,14 +38,12 @@ const AppSidebar: React.FC = () => {
|
||||
const { user, isAuthenticated } = useAuthStore();
|
||||
const { isModuleEnabled, settings: moduleSettings } = useModuleStore();
|
||||
|
||||
const [openSubmenu, setOpenSubmenu] = useState<{
|
||||
sectionIndex: number;
|
||||
itemIndex: number;
|
||||
} | null>(null);
|
||||
const [openSubmenus, setOpenSubmenus] = useState<Set<string>>(new Set());
|
||||
const [subMenuHeight, setSubMenuHeight] = useState<Record<string, number>>(
|
||||
{}
|
||||
);
|
||||
const subMenuRefs = useRef<Record<string, HTMLDivElement | null>>({});
|
||||
const submenusInitialized = useRef(false);
|
||||
|
||||
// Check if a path is active - exact match only for menu items
|
||||
// Prefix matching is only used for parent menus to determine if submenu should be open
|
||||
@@ -89,7 +80,7 @@ const AppSidebar: React.FC = () => {
|
||||
|
||||
// Setup Wizard at top - guides users through site setup
|
||||
setupItems.push({
|
||||
icon: <ShootingStarIcon />,
|
||||
icon: <BoltIcon />,
|
||||
name: "Setup Wizard",
|
||||
path: "/setup/wizard",
|
||||
});
|
||||
@@ -103,7 +94,7 @@ const AppSidebar: React.FC = () => {
|
||||
|
||||
// Keywords Library - Browse and add curated keywords
|
||||
setupItems.push({
|
||||
icon: <DocsIcon />,
|
||||
icon: <TagIcon />,
|
||||
name: "Keywords Library",
|
||||
path: "/keywords-library",
|
||||
});
|
||||
@@ -166,7 +157,7 @@ const AppSidebar: React.FC = () => {
|
||||
// Add Automation if enabled (with dropdown)
|
||||
if (isModuleEnabled('automation')) {
|
||||
workflowItems.push({
|
||||
icon: <BoltIcon />,
|
||||
icon: <ShootingStarIcon />,
|
||||
name: "Automation",
|
||||
subItems: [
|
||||
{ name: "Overview", path: "/automation/overview" },
|
||||
@@ -197,47 +188,6 @@ const AppSidebar: React.FC = () => {
|
||||
label: "WORKFLOW",
|
||||
items: workflowItems,
|
||||
},
|
||||
{
|
||||
label: "ACCOUNT",
|
||||
items: [
|
||||
{
|
||||
icon: <UserCircleIcon />,
|
||||
name: "Account Settings",
|
||||
path: "/account/settings", // Single page, no sub-items
|
||||
},
|
||||
{
|
||||
icon: <DollarLineIcon />,
|
||||
name: "Plans & Billing",
|
||||
path: "/account/plans",
|
||||
},
|
||||
{
|
||||
icon: <PieChartIcon />,
|
||||
name: "Usage",
|
||||
path: "/account/usage",
|
||||
},
|
||||
{
|
||||
icon: <PlugInIcon />,
|
||||
name: "AI Models",
|
||||
path: "/settings/integration",
|
||||
adminOnly: true, // Only visible to admin/staff users
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "HELP",
|
||||
items: [
|
||||
{
|
||||
icon: <Bell className="w-5 h-5" />,
|
||||
name: "Notifications",
|
||||
path: "/account/notifications",
|
||||
},
|
||||
{
|
||||
icon: <DocsIcon />,
|
||||
name: "Help & Docs",
|
||||
path: "/help",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}, [isModuleEnabled, moduleSettings]); // Re-run when settings change
|
||||
|
||||
@@ -247,50 +197,46 @@ const AppSidebar: React.FC = () => {
|
||||
}, [menuSections]);
|
||||
|
||||
useEffect(() => {
|
||||
const currentPath = location.pathname;
|
||||
let foundMatch = false;
|
||||
|
||||
// Find the matching submenu for the current path - use exact match only for subitems
|
||||
if (submenusInitialized.current) return;
|
||||
|
||||
const initialKeys = new Set<string>();
|
||||
allSections.forEach((section, sectionIndex) => {
|
||||
section.items.forEach((nav, itemIndex) => {
|
||||
if (nav.subItems && !foundMatch) {
|
||||
// Only use exact match for submenu items to prevent multiple active states
|
||||
if (nav.subItems) {
|
||||
initialKeys.add(`${sectionIndex}-${itemIndex}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setOpenSubmenus(initialKeys);
|
||||
submenusInitialized.current = true;
|
||||
}, [allSections]);
|
||||
|
||||
useEffect(() => {
|
||||
const currentPath = location.pathname;
|
||||
|
||||
allSections.forEach((section, sectionIndex) => {
|
||||
section.items.forEach((nav, itemIndex) => {
|
||||
if (nav.subItems) {
|
||||
const shouldOpen = nav.subItems.some((subItem) => currentPath === subItem.path);
|
||||
|
||||
if (shouldOpen) {
|
||||
setOpenSubmenu((prev) => {
|
||||
// Only update if different to prevent infinite loops
|
||||
if (prev?.sectionIndex === sectionIndex && prev?.itemIndex === itemIndex) {
|
||||
return prev;
|
||||
}
|
||||
return {
|
||||
sectionIndex,
|
||||
itemIndex,
|
||||
};
|
||||
});
|
||||
foundMatch = true;
|
||||
const key = `${sectionIndex}-${itemIndex}`;
|
||||
setOpenSubmenus((prev) => new Set([...prev, key]));
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// If no match found and we're not on a submenu path, don't change the state
|
||||
// This allows manual toggles to persist
|
||||
}, [location.pathname, allSections]);
|
||||
|
||||
useEffect(() => {
|
||||
if (openSubmenu !== null) {
|
||||
const key = `${openSubmenu.sectionIndex}-${openSubmenu.itemIndex}`;
|
||||
// Use requestAnimationFrame and setTimeout to ensure DOM is ready
|
||||
const frameId = requestAnimationFrame(() => {
|
||||
setTimeout(() => {
|
||||
const frameId = requestAnimationFrame(() => {
|
||||
setTimeout(() => {
|
||||
openSubmenus.forEach((key) => {
|
||||
const element = subMenuRefs.current[key];
|
||||
if (element) {
|
||||
// scrollHeight should work even when height is 0px due to overflow-hidden
|
||||
const scrollHeight = element.scrollHeight;
|
||||
if (scrollHeight > 0) {
|
||||
setSubMenuHeight((prevHeights) => {
|
||||
// Only update if height changed to prevent infinite loops
|
||||
if (prevHeights[key] === scrollHeight) {
|
||||
return prevHeights;
|
||||
}
|
||||
@@ -301,22 +247,22 @@ const AppSidebar: React.FC = () => {
|
||||
});
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
return () => cancelAnimationFrame(frameId);
|
||||
}
|
||||
}, [openSubmenu]);
|
||||
});
|
||||
}, 50);
|
||||
});
|
||||
return () => cancelAnimationFrame(frameId);
|
||||
}, [openSubmenus]);
|
||||
|
||||
const handleSubmenuToggle = (sectionIndex: number, itemIndex: number) => {
|
||||
setOpenSubmenu((prevOpenSubmenu) => {
|
||||
if (
|
||||
prevOpenSubmenu &&
|
||||
prevOpenSubmenu.sectionIndex === sectionIndex &&
|
||||
prevOpenSubmenu.itemIndex === itemIndex
|
||||
) {
|
||||
return null;
|
||||
const key = `${sectionIndex}-${itemIndex}`;
|
||||
setOpenSubmenus((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(key)) {
|
||||
next.delete(key);
|
||||
} else {
|
||||
next.add(key);
|
||||
}
|
||||
return { sectionIndex, itemIndex };
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
@@ -338,7 +284,7 @@ const AppSidebar: React.FC = () => {
|
||||
.map((nav, itemIndex) => {
|
||||
// Check if any subitem is active to determine parent active state (uses exact match for subitems)
|
||||
const hasActiveSubItem = nav.subItems?.some(subItem => isSubItemActive(subItem.path)) ?? false;
|
||||
const isSubmenuOpen = openSubmenu?.sectionIndex === sectionIndex && openSubmenu?.itemIndex === itemIndex;
|
||||
const isSubmenuOpen = openSubmenus.has(`${sectionIndex}-${itemIndex}`);
|
||||
|
||||
return (
|
||||
<li key={`${sectionIndex}-${nav.name}-${location.pathname}`}>
|
||||
@@ -476,7 +422,7 @@ const AppSidebar: React.FC = () => {
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<div className="py-4 flex justify-center items-center">
|
||||
<Link to="/" className="flex justify-center items-center">
|
||||
<Link to="/" className="flex flex-col items-center">
|
||||
{isExpanded || isHovered || isMobileOpen ? (
|
||||
<>
|
||||
<img
|
||||
@@ -493,6 +439,13 @@ const AppSidebar: React.FC = () => {
|
||||
width={113}
|
||||
height={30}
|
||||
/>
|
||||
<div
|
||||
className="mt-2 h-6 w-[163px] rounded-full"
|
||||
style={{
|
||||
background: "radial-gradient(ellipse at center, rgba(59,130,246,0.35) 0%, rgba(59,130,246,0) 70%)",
|
||||
filter: "blur(2px)",
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<img
|
||||
@@ -504,7 +457,7 @@ const AppSidebar: React.FC = () => {
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col overflow-y-auto duration-300 ease-linear no-scrollbar mt-[50px]">
|
||||
<div className="flex flex-col overflow-y-auto duration-300 ease-linear no-scrollbar mt-[25px]">
|
||||
<nav>
|
||||
<div className="flex flex-col gap-1">
|
||||
{allSections.map((section, sectionIndex) => (
|
||||
|
||||
Reference in New Issue
Block a user