diff --git a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css index 5555e60ea..1bd45f388 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css +++ b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css @@ -1,7 +1,3 @@ .sidebar { - @apply w-60 border-none z-10; - - .body { - @apply pt-4 pb-3 px-2; - } + @apply w-60 border-none z-10 h-full flex flex-col; } diff --git a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx index b765a0d81..b687da6fd 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx @@ -2,6 +2,8 @@ import styles from "./Sidebar.module.css"; import { SidebarHeader } from "@/src/components/Sidebar/SidebarHeader"; import { SidebarBody } from "@/src/components/Sidebar/SidebarBody"; import cx from "classnames"; +import { Show, splitProps } from "solid-js"; +import { useMachineName } from "@/src/hooks/clan"; export interface LinkProps { path: string; @@ -19,10 +21,12 @@ export interface SidebarProps { } export const Sidebar = (props: SidebarProps) => { + const [bodyProps] = splitProps(props, ["staticSections"]); + return (
); }; diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css index 797485eed..2591684a3 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css @@ -1,10 +1,10 @@ div.sidebar-pane { - @apply border-none z-10; + @apply flex flex-col border-none z-20 h-full; animation: sidebarPaneShow 250ms ease-in forwards; &.open { - @apply w-60; + @apply w-72; } &.closing { @@ -90,7 +90,7 @@ div.sidebar-pane { @apply opacity-100; } 100% { - @apply w-60; + @apply w-72; } } diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css index faf6c421f..b7b7fd943 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css @@ -1,5 +1,5 @@ div.sidebar-section { - @apply flex flex-col gap-2 w-full h-fit; + @apply flex flex-col gap-2 w-full h-full; & > div.header { @apply flex items-center justify-between px-1.5; diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css b/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css index 3bad3090c..c24ac0585 100644 --- a/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css +++ b/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css @@ -7,9 +7,38 @@ @apply min-w-96; } -.sidebar { - @apply absolute left-4 top-[2.25rem] w-60; - @apply min-h-96; +.sidebarContainer { + @apply absolute left-4 top-4 w-60 z-10; + height: calc(100vh - 2rem); - height: calc(100vh - 7.5rem); + animation: sidebarNoMachine 250ms ease-in-out; + + &.machineSelected { + @apply top-16; + height: calc(100vh - 8rem); + + animation: sidebarMachine 250ms ease-in-out; + } +} + +@keyframes sidebarNoMachine { + 0% { + @apply top-16; + height: calc(100vh - 8rem); + } + 100% { + @apply top-4; + height: calc(100vh - 2rem); + } +} + +@keyframes sidebarMachine { + 0% { + @apply top-4; + height: calc(100vh - 2rem); + } + 100% { + @apply top-16; + height: calc(100vh - 8rem); + } } diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx index e2a3d15d7..3bdfb2a06 100644 --- a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx +++ b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx @@ -14,6 +14,7 @@ import { buildMachinePath, maybeUseMachineName, useClanURI, + useMachineName, } from "@/src/hooks/clan"; import { CubeScene } from "@/src/scene/cubes"; import { @@ -119,7 +120,13 @@ export const Clan: Component