убрал лишние элементы
This commit is contained in:
@@ -89,7 +89,6 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
|
|||||||
approvalsCount={approvalsCount}
|
approvalsCount={approvalsCount}
|
||||||
collapsed={navCollapsed}
|
collapsed={navCollapsed}
|
||||||
onToggleCollapsed={() => setNavCollapsed((v) => !v)}
|
onToggleCollapsed={() => setNavCollapsed((v) => !v)}
|
||||||
userName={context.pageContext.user.displayName}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -39,22 +39,6 @@
|
|||||||
min-width: 0;
|
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 {
|
.brandText {
|
||||||
font-family: $font-serif;
|
font-family: $font-serif;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
@@ -168,41 +152,3 @@
|
|||||||
top: 6px;
|
top: 6px;
|
||||||
right: 8px;
|
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;
|
approvalsCount?: number;
|
||||||
collapsed: boolean;
|
collapsed: boolean;
|
||||||
onToggleCollapsed: () => void;
|
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> = ({
|
export const SideNav: React.FC<ISideNavProps> = ({
|
||||||
activeId,
|
activeId,
|
||||||
onChange,
|
onChange,
|
||||||
approvalsCount,
|
approvalsCount,
|
||||||
collapsed,
|
collapsed,
|
||||||
onToggleCollapsed,
|
onToggleCollapsed,
|
||||||
userName,
|
|
||||||
}) => {
|
}) => {
|
||||||
const navClasses = [styles.nav, collapsed ? styles.navCollapsed : ''].filter(Boolean).join(' ');
|
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="Разделы портала">
|
<nav className={navClasses} aria-label="Разделы портала">
|
||||||
<div className={styles.head}>
|
<div className={styles.head}>
|
||||||
<div className={styles.brand}>
|
<div className={styles.brand}>
|
||||||
<span className={styles.logo}>ТС</span>
|
|
||||||
{!collapsed && <span className={styles.brandText}>Портал заявок</span>}
|
{!collapsed && <span className={styles.brandText}>Портал заявок</span>}
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
@@ -90,11 +78,6 @@ export const SideNav: React.FC<ISideNavProps> = ({
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</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>
|
</nav>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user