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.

Sign up for GitHub

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

Jump to bottom

Sidebar push content option instead of overlay #637

Closed
jouwdan opened this issue Dec 5, 2022 · 6 comments
Closed

Sidebar push content option instead of overlay #637

jouwdan opened this issue Dec 5, 2022 · 6 comments
Assignees
@endigo9740
Labels
feature request Request a feature or introduce and update to the project.
Milestone
Future Updates

Comments

@jouwdan
Copy link
Contributor

jouwdan commented Dec 5, 2022

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

Can we have the option for the sidebar to push the content instead of overlay the content - this would be useful on Tutors when navigating to see things loading from the table of contents dynamically.

What type of pull request would this be?

New Feature

Any links to similar examples or other references we should review?

https://getuikit.com/docs/offcanvas#animation-modes

The push / reveal options here
@jouwdan jouwdan added the feature request Request a feature or introduce and update to the project. label Dec 5, 2022
@endigo9740
Copy link
Contributor

endigo9740 commented Dec 5, 2022 •
edited
Loading

Hey Jord, I'd have to think about this one. You might take a look at the upcoming changes to the drawer here:

Now that the store will be built in for the drawer, it might be possible to listen to that. When it has a value you would use CSS transition class for translate-x-[amount]. You would probably need to use a set drawer width to make the calculations easier. You would also make sure overflow-hidden is set for the HTML element when this occurs.

As for building it into the drawer, perhaps, but I'll need to experiment with it. Currently the Drawer lives outside of the flow of say, the AppShell, so the tricky bit will figuring out how to communicate between the drawer and page itself. Perhaps <svelte:body> could be of use here?

@endigo9740
Copy link
Contributor

endigo9740 commented Dec 5, 2022 •
edited
Loading

Note that we do have a table of contents component planned:

But in our docs it would live on the right, and probably be inaccessible on mobile, ala Mantine:
https://mantine.dev/core/button/

@endigo9740 endigo9740 added this to the Future/Whenever milestone Dec 19, 2022
@endigo9740 endigo9740 mentioned this issue Feb 3, 2023
Closed
54 tasks
@endigo9740 endigo9740 self-assigned this Feb 3, 2023
@endigo9740
Copy link
Contributor

endigo9740 commented Feb 8, 2023 •
edited
Loading

@jordharr I've given some thought to implementing this feature as part of my audit here:

Unfortunately I don't think this will be something we implement on our side at this time.

To facilitate this, we would need to apply a translate style to our surrounding page elements, such as our body. Paired with a transition animation this should look pretty good. Unfortunately applying this to the body affects the drawer placement itself as well, leaving this big ugly gap on the left side:

<body  class="translate-x-[50%]">

Screenshot 2023-02-08 at 1 43 46 PM

Instead, we would need to adjust something like the AppShell component - if folks opt to use this:

<AppShell ...  class="translate-x-[50%]">

Screenshot 2023-02-08 at 1 45 17 PM

But this comes with two gotchas:

  1. We have to assume folks are using the AppShell, which may not always be the case
  2. We would have to implement cross-component dependencies between the Drawer/AppShell (which is an anti-pattern)

Additionally, by default, drawers appear to be attached to three edges of the screen at a time. But with style overrides can actually be "free floating", showing the content behind the drawer (see the mocks below). By doing this, this large empty area left of the AppShell would be visible and look broken.

Screenshot 2023-02-08 at 1 34 41 PM

Given this, I think the best case is to leave this up to devs to implement this themselves on a case-by-case basis. But, the good news is that it isn't terribly difficult. You need only do two things:

  1. Listen the for open state of the Drawer via the store
  2. Apply the appropriate styles to the AppShell (or similar wrapping element) while open

Here's a quick example:

$: positionClasses = $drawerStore.open && $drawerStore.position === 'left' ? 'translate-x-[50%]' : '';

Then on the AppShell itself:

<AppShell class="transition-transform {positionClasses}">

And here's the result. Note this is hardcoded for left position drawers, but with some additional logic could support any position.

Kapture.2023-02-08.at.13.56.27.mp4

@jouwdan
Copy link
Contributor Author

jouwdan commented Feb 8, 2023

@jordharr I've given some thought to implementing this feature as part of my audit here:

Unfortunately I don't think this will be something we implement on our side at this time.

To facilitate this, we would need to apply a translate style to our surrounding page elements, such as our body. Paired with a transition animation this should look pretty good. Unfortunately applying this to the body affects the drawer placement itself as well, leaving this big ugly gap on the left side:

<body  class="translate-x-[50%]">

Screenshot 2023-02-08 at 1 43 46 PM

Instead, we would need to adjust something like the AppShell component - if folks opt to use this:

<AppShell ...  class="translate-x-[50%]">

Screenshot 2023-02-08 at 1 45 17 PM

But this comes with two gotchas:

  1. We have to assume folks are using the AppShell, which may not always be the case
  2. We would have to implement cross-component dependencies between the Drawer/AppShell (which is an anti-pattern)

Additionally, by default, drawers appear to be attached to three edges of the screen at a time. But with style overrides can actually be "free floating", showing the content behind the drawer (see the mocks below). By doing this, this large empty area left of the AppShell would be visible and look broken.

Screenshot 2023-02-08 at 1 34 41 PM

Given this, I think the best case is to leave this up to devs to implement this themselves on a case-by-case basis. But, the good news is that it isn't terribly difficult. You need only do two things:

  1. Listen the for open state of the Drawer via the store
  2. Apply the appropriate styles to the AppShell (or similar wrapping element) while open

Here's a quick example:

$: positionClasses = $drawerStore.open && $drawerStore.position === 'left' ? 'translate-x-[50%]' : '';

Then on the AppShell itself:

<AppShell class="transition-transform {positionClasses}">

And here's the result. Note this is hardcoded for left position drawers, but with some additional logic could support any position.

Kapture.2023-02-08.at.13.56.27.mp4

Awesome thanks for the thorough response - it may be something I look into in the future to implement on our side with Tutors.

@jouwdan jouwdan closed this as completed Feb 8, 2023
@endigo9740
Copy link
Contributor

No problem! FYI I've documented this as an "advanced" feature on the Drawer documentation. This will be included in the next release.

Screenshot 2023-02-08 at 2 15 43 PM

@endigo9740
Copy link
Contributor

Solved as part of: #922

Closing this ticket. Please refer any further comments to the ticket linked above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@endigo9740 endigo9740

Labels
feature request Request a feature or introduce and update to the project.
Projects
None yet
Milestone
Future Updates
Development

No branches or pull requests
2 participants
@endigo9740 @jouwdan