Feat: Frontend app shell
This commit is contained in:
MangoPig
135
Frontend/src/components/shell/AppShell/AppShell.module.scss
Normal file
135
Frontend/src/components/shell/AppShell/AppShell.module.scss
Normal file
@@ -0,0 +1,135 @@
|
||||
.shell {
|
||||
height: 100dvh;
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
background: var(--color-canvas);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.body {
|
||||
--rail-width: 4.75rem;
|
||||
--sidebar-width: 16.75rem;
|
||||
--shell-top-left-radius: calc(var(--radius-xl) + var(--space-1));
|
||||
--shell-frame-border: color-mix(in srgb, var(--color-border-strong) 44%, transparent);
|
||||
--shell-divider-border: color-mix(in srgb, var(--color-border-strong) 34%, transparent);
|
||||
--sidebar-panel-surface: color-mix(in srgb, var(--color-surface-muted) 92%, transparent);
|
||||
--workspace-panel-surface: color-mix(in srgb, var(--color-canvas) 94%, var(--color-surface));
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: var(--rail-width) minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.railColumn {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.workspaceRegion {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
|
||||
overflow: visible;
|
||||
z-index: 1;
|
||||
isolation: isolate;
|
||||
border-top-left-radius: var(--shell-top-left-radius);
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.workspaceRegion::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(--sidebar-panel-surface) 0,
|
||||
var(--sidebar-panel-surface) calc(var(--sidebar-width) - 0.5px),
|
||||
var(--workspace-panel-surface) calc(var(--sidebar-width) - 0.5px),
|
||||
var(--workspace-panel-surface) 100%
|
||||
);
|
||||
border: 1px solid var(--shell-frame-border);
|
||||
border-top: 0;
|
||||
border-top-left-radius: var(--shell-top-left-radius);
|
||||
border-top-right-radius: 0;
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sidebarColumn {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
overflow: visible;
|
||||
z-index: 1;
|
||||
background: var(--sidebar-panel-surface);
|
||||
border-top: 1px solid var(--shell-frame-border);
|
||||
border-left: 1px solid var(--shell-frame-border);
|
||||
border-top-left-radius: var(--shell-top-left-radius);
|
||||
}
|
||||
|
||||
.workspaceMain {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
border-top: 1px solid var(--shell-frame-border);
|
||||
border-left: 1px solid var(--shell-divider-border);
|
||||
background: var(--workspace-panel-surface);
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.sidebarDock {
|
||||
position: absolute;
|
||||
right: var(--space-1);
|
||||
bottom: var(--space-3);
|
||||
left: calc(var(--space-1) - (var(--rail-width) * 0.9));
|
||||
z-index: calc(var(--z-modal) + 1);
|
||||
pointer-events: none;
|
||||
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-up(mobile) {
|
||||
.body {
|
||||
--rail-width: 5rem;
|
||||
--sidebar-width: 17.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-down(tablet) {
|
||||
.body {
|
||||
--rail-width: 4.5rem;
|
||||
--sidebar-width: 13.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.body {
|
||||
grid-template-columns: 4.5rem minmax(0, 1fr);
|
||||
--rail-width: 4.5rem;
|
||||
}
|
||||
|
||||
.railColumn {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.workspaceRegion,
|
||||
.sidebarDock {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
50
Frontend/src/components/shell/AppShell/AppShell.tsx
Normal file
50
Frontend/src/components/shell/AppShell/AppShell.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
// Path: Frontend/src/components/shell/AppShell/AppShell.tsx
|
||||
|
||||
import { createSignal, onMount, type JSX } from "solid-js";
|
||||
import { getDocumentTheme, setTheme, type Theme } from "../../../helpers/theme";
|
||||
import { WorkspaceHome } from "../../workspace-home/WorkspaceHome/WorkspaceHome";
|
||||
import { LeftRail } from "../LeftRail/LeftRail";
|
||||
import { ProfileDock } from "../ProfileDock/ProfileDock";
|
||||
import { TopBar } from "../TopBar/TopBar";
|
||||
import { WorkspaceSidebar } from "../WorkspaceSidebar/WorkspaceSidebar";
|
||||
import styles from "./AppShell.module.scss";
|
||||
|
||||
export const AppShell = (): JSX.Element => {
|
||||
const [themeState, setThemeState] = createSignal<Theme>("light");
|
||||
|
||||
onMount((): void => {
|
||||
setThemeState(getDocumentTheme());
|
||||
});
|
||||
|
||||
const toggleTheme = (): void => {
|
||||
const next: Theme = themeState() === "dark" ? "light" : "dark";
|
||||
|
||||
setTheme(next);
|
||||
setThemeState(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={styles.shell}>
|
||||
<TopBar theme={themeState()} onToggleTheme={toggleTheme} />
|
||||
<div class={styles.body}>
|
||||
<div class={styles.railColumn}>
|
||||
<LeftRail />
|
||||
</div>
|
||||
|
||||
<div class={styles.workspaceRegion}>
|
||||
<div class={styles.sidebarColumn}>
|
||||
<WorkspaceSidebar />
|
||||
|
||||
<div class={styles.sidebarDock}>
|
||||
<ProfileDock />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class={styles.workspaceMain}>
|
||||
<WorkspaceHome />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user