feat(ui): extend minimal doctor design across all screens
CI / ruff · pytest (pull_request) Successful in 2m16s
CI / ruff · pytest (pull_request) Successful in 2m16s
Refs #85
This commit is contained in:
@@ -3,13 +3,14 @@ import { Link, NavLink } from "react-router-dom";
|
||||
|
||||
import { ru } from "../content/ru";
|
||||
import { useDialog } from "../dialog/DialogContext";
|
||||
import { useSession } from "../session/SessionContext";
|
||||
import { HotlineCard, useHelp } from "./HelpSheet";
|
||||
import { Icon, LogoMark, type IconName } from "./Icon";
|
||||
|
||||
/*
|
||||
* Layout from docs/mock (series 2).
|
||||
* Shared patient workspace, following the approved doctor dashboard.
|
||||
* phone: content → «Экстренная помощь» block → bottom tab bar (signed in)
|
||||
* desktop: navy sidebar | content | right rail (optional `aside` + emergency panel)
|
||||
* desktop: white sidebar | workspace header | content + emergency panel
|
||||
* bare: one centred column on every width (questionnaires)
|
||||
*/
|
||||
|
||||
@@ -87,6 +88,10 @@ function Sidebar({ signedIn }: { signedIn: boolean }) {
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
<div className="sidebar__note">
|
||||
<strong>{ru.product.supportTitle}</strong>
|
||||
<span>{ru.product.supportText}</span>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -122,6 +127,24 @@ function Rail({ aside }: { aside?: ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
function WorkspaceHeader({ signedIn, bare = false }: { signedIn: boolean; bare?: boolean }) {
|
||||
const { session } = useSession();
|
||||
return (
|
||||
<header className={`workspace${bare ? " workspace--bare" : ""}`}>
|
||||
<div className="workspace__brand">
|
||||
<LogoMark size={30} />
|
||||
<span>{bare ? ru.product.name : signedIn ? ru.product.workspace : ru.nav.signIn}</span>
|
||||
</div>
|
||||
{signedIn && !bare ? (
|
||||
<Link className="workspace__profile" to="/profile">
|
||||
<span className="avatar"><Icon name="user" size={18} /></span>
|
||||
<span>{session?.displayName || ru.nav.profile}</span>
|
||||
</Link>
|
||||
) : <span className="workspace__tag">{ru.product.tagline}</span>}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export function AppShell({
|
||||
children,
|
||||
signedIn = true,
|
||||
@@ -144,6 +167,7 @@ export function AppShell({
|
||||
return (
|
||||
<div className="app app--bare">
|
||||
<div className="app__main">
|
||||
<WorkspaceHeader signedIn={signedIn} bare />
|
||||
<main className="screen" id="main">
|
||||
{children}
|
||||
{sos && <EmergencyBlock />}
|
||||
@@ -155,6 +179,7 @@ export function AppShell({
|
||||
<div className={`app${signedIn && !focus ? " app--tabs" : ""}`}>
|
||||
<Sidebar signedIn={signedIn} />
|
||||
<div className="app__main">
|
||||
<WorkspaceHeader signedIn={signedIn} />
|
||||
<main className="screen" id="main">
|
||||
{children}
|
||||
{sos && <EmergencyBlock />}
|
||||
|
||||
Reference in New Issue
Block a user