helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-11 18:28:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added colors to side bar

Browse Source
This commit is contained in:
moulichand16
2026-04-01 11:29:05 +05:30
parent 3cafe820cf
commit 9a2253b56e
6 changed files with 56 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/layout/sidebar.tsx
View File

@@ -153,7 +153,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
<aside
style={{ "--width": `${width}px` } as React.CSSProperties}
className={cx(
"flex h-full w-full max-w-full flex-col justify-between overflow-auto border-secondary bg-primary pt-4 shadow-xs transition-all duration-200 ease-linear md:border-r lg:w-(--width) lg:rounded-xl lg:border lg:pt-5",
"flex h-full w-full max-w-full flex-col justify-between overflow-auto bg-sidebar pt-4 shadow-xs transition-all duration-200 ease-linear lg:w-(--width) lg:pt-5",
)}
>
{/* Logo + collapse toggle */}
@@ -162,8 +162,8 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
<img src="/favicon-32.png" alt="Helix Engage" className="size-8 rounded-lg shrink-0" />
) : (
<div className="flex flex-col gap-1">
<span className="text-md font-bold text-primary">Helix Engage</span>
<span className="text-xs text-tertiary">Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
<span className="text-md font-bold text-white">Helix Engage</span>
<span className="text-xs text-white opacity-70">Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
</div>
)}
<button
@@ -180,7 +180,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
{navSections.map((group) => (
<li key={group.label}>
{!collapsed && (
<div className="px-5 pb-1">
<div className="px-5 pb-1 bg-sidebar">
<p className="text-xs font-bold text-quaternary uppercase">{group.label}</p>
</div>
)}
@@ -191,11 +191,19 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
<Link
to={item.href ?? '/'}
title={item.label}
style={
item.href !== activeUrl
? {
"--hover-bg": "var(--color-sidebar-nav-item-hover-bg)",
"--hover-text": "var(--color-sidebar-nav-item-hover-text)",
} as React.CSSProperties
: undefined
}
className={cx(
"flex size-10 items-center justify-center rounded-lg transition duration-100 ease-linear",
item.href === activeUrl
? "bg-active text-fg-brand-primary"
: "text-fg-quaternary hover:bg-primary_hover hover:text-fg-secondary",
: "text-fg-quaternary hover:bg-(--hover-bg) hover:text-(--hover-text)",
)}
>
{item.icon && <item.icon className="size-5" />}
@@ -224,7 +232,8 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
<button
onClick={handleSignOut}
title={`${user.name}\nSign out`}
className="rounded-lg p-1 hover:bg-primary_hover transition duration-100 ease-linear"
style={{ "--hover-bg": "var(--color-sidebar-nav-item-hover-bg)" } as React.CSSProperties}
className="rounded-lg p-1 hover:bg-(--hover-bg) transition duration-100 ease-linear"
>
<Avatar size="sm" initials={user.initials} status="online" />
</button>
@@ -249,9 +258,9 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
return (
<>
<MobileNavigationHeader>{content}</MobileNavigationHeader>
<div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:py-1 lg:pl-1">{content}</div>
<div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex">{content}</div>
<div
style={{ paddingLeft: width + 4 }}
style={{ paddingLeft: width }}
className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block transition-all duration-200 ease-linear"
/>