Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ShellSection paddings are not reactive to the Navbar width #450

Open
Angel-Ponce opened this issue Aug 25, 2023 · 0 comments
Open

ShellSection paddings are not reactive to the Navbar width #450

Angel-Ponce opened this issue Aug 25, 2023 · 0 comments
Labels
bug Something isn't working component New or changes to components

Comments

@Angel-Ponce
Copy link

Angel-Ponce commented Aug 25, 2023

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

  1. Makes a simple AppShell component
  2. Mutate the width of the Navbar component
  3. 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
@Angel-Ponce Angel-Ponce added the bug Something isn't working label Aug 25, 2023
@BeeMargarida BeeMargarida added the component New or changes to components label Aug 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working component New or changes to components
Projects
Status: Next
Development

No branches or pull requests

2 participants