Replies: 2 comments 1 reply
-
Hi @Typogram Sure I can help with some of this. We provide a tutorial which should cover the means to create a responsible sidebar, which appears fixed on large screens and appears in drawer a mobile. It's the same technique we use on the Skeleton documentation site in fact:
I developed this approach to help prevent redundancy. This is based on my experience creating web apps over the past 20+ years. In the wide majority of cases a single drawer with dynamic or "exchangeable" content cuts down on a lot of unnecessary repetition. It was also a design choice. There's rarely a silver bullet when you're building for an audience of the scale of Skeleton.
First, I'd encourage you to review this simple approach for swapping out the content within the drawer. If you only have a handful of pages, you might be able to abstract the sidebar content for each page to their own dedicated component. Then monitor the page route to determine which should be shown at a given time: If you have lots of pages, I'd like to recommend a more advanced option. In addition to the tutorial I linked above, which cover the the basic concept of switching between fixed side + drawer, I'd encourage you to review how we handle our dynamic contents for our doc site drawer. In our case, the sidebar navigation isn't truly unique for every section, it's a standardized list, but with different list items. I'll link the important references below: Implementing our abstracted Drawer and Sidebar components within an App Shell: Our local drawer and sidebar components: In our case, we listen to the page route via the SvelteKit The category of links is then maintained here: This file is also multi-purpose, as it's used to generate our search results as well. Hence the keywords. In our case search lives within a custom component modal: Hopefully that's enough to get you started. If I can clarify on any specifics let me know. I'd also encourage you to review whether our drawer system fits your mental model. You're are actively encourage to swap out parts of Skeleton that do not fit your needs. If you wish to roll your own drawer system or incorporate a third party solution, go for it. Whatever works best for you. |
Beta Was this translation helpful? Give feedback.
-
Hi Chris, Firstly, I want to express my gratitude for the comprehensive tutorial you provided. It laid a solid foundation and clarified the essentials of implementing the drawer using conditions. Your detailed explanation was instrumental in helping me grasp the main concepts. Regarding the singleton approach for the drawer, I have a few reservations. The drawer has versatile uses beyond just site navigation, such as for various configuration panels. In scenarios where multiple drawers could exist within the same page or across a multi-page application, having a singleton drawer might make the implementation awkward. Relying excessively on Exploring New Ideas: CSS Trick for Sidebar ReappearanceI experimented with a CSS trick to make the sidebar reappear with a click of a menu button. Although it lacks the backdrop or transitions, it simplifies the process and minimizes code repetition. This approach also ensures that the sidebar remains local. re-implementing them in a singleton root-level drawer does not seem worth the additional complexity and effort. Considering this, I wonder if there's room to encapsulate some drawer-like logic directly into a new app sidebar component (as part of the AppShell cluster)? This could provide a more modular and maintainable way to implement the drawer functionality, catering to a variety of use cases without being confined to a singleton structure. Thank you once again for the valuable insights shared in the tutorial, and I’m looking forward to any thoughts you might have on this feedback. |
Beta Was this translation helpful? Give feedback.
-
Hello everyone,
I'm having trouble understanding and implementing the drawer as a singleton in a responsive design. In my project, I have multiple pages each requiring different sidebars (drawers). For larger screens, a visible sidebar is present on the left, but on smaller screens, it’s hidden and replaced by a hamburger menu, which when clicked, opens the drawer from the left.
I comprehend that the drawer, among other components, is designed as a singleton. However, it's unclear to me why this is necessary and how to correctly use it in my case. I would like to learn and get guidance on how to effectively implement the singleton drawer to cater to varying menu items required by different pages in a mobile-responsive manner.
Any help, advice, or resources to guide me through this would be immensely appreciated. Thank you!
Beta Was this translation helpful? Give feedback.
All reactions