Search requests #2
@@ -89,7 +89,6 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
|
||||
approvalsCount={approvalsCount}
|
||||
collapsed={navCollapsed}
|
||||
onToggleCollapsed={() => setNavCollapsed((v) => !v)}
|
||||
userName={context.pageContext.user.displayName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -39,22 +39,6 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: $r-sm;
|
||||
background: $gold-500;
|
||||
color: $navy-950;
|
||||
font-family: $font-serif;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.brandText {
|
||||
font-family: $font-serif;
|
||||
font-size: 15px;
|
||||
@@ -168,41 +152,3 @@
|
||||
top: 6px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
// ---- Подвал рейла: пользователь ----
|
||||
.footer {
|
||||
margin: auto $sp-4 0; // margin-top:auto прижимает к низу; по бокам — инсет для border-top
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $sp-2;
|
||||
padding-top: $sp-3;
|
||||
border-top: 1px solid rgba(255, 255, 255, .08);
|
||||
}
|
||||
|
||||
.navCollapsed .footer {
|
||||
justify-content: center;
|
||||
margin: auto 0 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .1);
|
||||
color: $white;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.userName {
|
||||
min-width: 0;
|
||||
color: rgba(255, 255, 255, .8);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@@ -24,27 +24,16 @@ interface ISideNavProps {
|
||||
approvalsCount?: number;
|
||||
collapsed: boolean;
|
||||
onToggleCollapsed: () => void;
|
||||
/** Имя текущего пользователя (для подвала рейла). */
|
||||
userName?: string;
|
||||
}
|
||||
|
||||
// Инициалы для аватара (первые буквы двух первых слов имени).
|
||||
function initials(name?: string): string {
|
||||
if (!name) return '—';
|
||||
const parts = name.trim().split(/\s+/).filter(Boolean);
|
||||
const value = ((parts[0]?.[0] ?? '') + (parts[1]?.[0] ?? '')).toUpperCase();
|
||||
return value || '—';
|
||||
}
|
||||
|
||||
// Тёмный боковой рейл портала на всю высоту: бренд сверху, разделы, пользователь
|
||||
// снизу. Сворачивается до узкой полосы с одними иконками.
|
||||
// Тёмный боковой рейл портала на всю высоту: бренд сверху, разделы снизу.
|
||||
// Сворачивается до узкой полосы с одними иконками.
|
||||
export const SideNav: React.FC<ISideNavProps> = ({
|
||||
activeId,
|
||||
onChange,
|
||||
approvalsCount,
|
||||
collapsed,
|
||||
onToggleCollapsed,
|
||||
userName,
|
||||
}) => {
|
||||
const navClasses = [styles.nav, collapsed ? styles.navCollapsed : ''].filter(Boolean).join(' ');
|
||||
|
||||
@@ -52,7 +41,6 @@ export const SideNav: React.FC<ISideNavProps> = ({
|
||||
<nav className={navClasses} aria-label="Разделы портала">
|
||||
<div className={styles.head}>
|
||||
<div className={styles.brand}>
|
||||
<span className={styles.logo}>ТС</span>
|
||||
{!collapsed && <span className={styles.brandText}>Портал заявок</span>}
|
||||
</div>
|
||||
<button
|
||||
@@ -90,11 +78,6 @@ export const SideNav: React.FC<ISideNavProps> = ({
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className={styles.footer} title={collapsed ? userName : undefined}>
|
||||
<span className={styles.avatar}>{initials(userName)}</span>
|
||||
{!collapsed && <span className={styles.userName}>{userName || 'Пользователь'}</span>}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user