Open
Description
What package has an issue
@svelteuidev/core
A clear and concise description of what the bug is
Take the following AppShell
component example:
<AppShell>
<Header zIndex={101} slot="header" height={60} fixed>
<ContentHeader/>
</Header>
<Navbar
hiddenBreakpoint={'sm'}
slot="navbar"
hidden={!$app.navbarOpen}
fixed
width={{
sm: $app.navbarCollapsed ? 75 : 250
}}
class="duration-300 transition-all]"
>
<NavbarContent
on:collapse={(e) => {
setApp({ navbarCollapsed: e.detail });
}}
/>
</Navbar>
<ShellSection grow>
<div class={clsx('w-full duration-300 transition-all] p-4')}>
<slot />
</div>
</ShellSection>
</AppShell>
Lets focus on the Navbar configuration: (by default $app.navbarCollapsed is false), so the initial width is 250
<Navbar
hiddenBreakpoint={'sm'}
slot="navbar"
hidden={!$app.navbarOpen}
fixed
width={{
sm: $app.navbarCollapsed ? 75 : 250
}}
class="duration-300 transition-all]"
>
The width
property changes when $app.navbarCollapsed
changes
and the CSS variables for the ShellSection
takes only the first value of the navbar width:
.svelteui-c-nuDRu .svelteui-c-cRjbBW {
flex: 1 1 0%;
width: 100vw;
box-sizing: border-box;
min-height: 100vh;
padding-top: calc(var(--svelteui-header-height, 0px) + 16px);
padding-bottom: calc(var(--svelteui-footer-height, 0px) + 16px);
padding-left: calc(var(--svelteui-navbar-width, 0px) + 16px);
padding-right: calc(var(--svelteui-aside-width, 0px) + 16px);
}
@media (min-width: 769px)
<style>
:root {
--svelteui-navbar-width: 250px;
}
When $app.navbarCollapsed
changes and the Navbar width changes the --svelteui-navbar-width
is not updated.
There are some wrong with my configuration, or this is a really bug?
In which browser(s) did the problem occur?
Other - list in description
Steps To Reproduce
- Makes a simple AppShell component
- Mutate the width of the Navbar component
- Observe the behaviour with the AppShell content
Do you know how to fix the issue
No
Are you willing to participate in fixing this issue and create a pull request with the fix
No
Relevant Assets
bug.mp4
Metadata
Metadata
Assignees
Type
Projects
Status
Next