Skip to content
This repository has been archived by the owner on Jan 6, 2022. It is now read-only.

2 Questions / feature requests: Regarding dock and nested togglable areas #90

Closed
CatinhoCR opened this issue Jun 7, 2017 · 5 comments
Closed
Labels

Comments

@CatinhoCR
Copy link

CatinhoCR commented Jun 7, 2017

@arkon
Thanks for your quick fix to my previous issue.

I have a non-related question though, didn't want to create a new issue for it but figured you wouldn't see it in the closed thread.
Is it ok if I ask it in here?

I'm trying to achieve 2 things (see image for reference):

  1. Have 1 sidebar docked only to it's specific container, instead of the entire document/page.
  2. Have nested togglable areas within that sidebar. So the docked part would have icons, each of those would toggle a secondary sub menu and then a third optional sub menu depending on chosen option. Kind of like how bitbucket's new nav works.

image

I am assuming none of these are contemplated in the project nor are achievable with the project as is right now?
If it's doable i'm wondering if you can shed some light into how to achieve it.
If it's not doable, then i'm wondering if this is something u might want to include in the project? I could help by creating a PR with it if you want as well, and work on it until you consider it acceptable to include.

@arkon
Copy link
Owner

arkon commented Jun 8, 2017

You can achieve a sidebar within a container by position-ing it absolute-ly, but it won't remain anchored to the container while the rest of the page scrolls, unfortunately. I haven't really thought about how to tackle that problem, so it's up to the user to figure that out for now. (There's an issue for this, actually: #51)

The docked icon portion doesn't really have much to do with ng-sidebar, and seems like a pretty straightforward thing to make separately, so I won't be considering adding something like to that to this library (i.e. it's out of scope).

I've never thought of opening up a sub-sidebar from within a sidebar. You could probably do some clever "hacks" to do it though, like having a second sidebar in your template that's just styled so it's wide enough or positioned such that it appears to be showing up beside your first sidebar, and the hooks to open/close it are you would normally do it within the first sidebar.

tl;dr: I do think that what you're aiming to achieve is (mostly) achievable without too much effort, and I think without any modification to what ng-sidebar can already do.

@arkon arkon added the question label Jun 8, 2017
@CatinhoCR
Copy link
Author

CatinhoCR commented Jun 8, 2017

@arkon ,

ok, I actually agree that question 2 might be out of scope and is relatively easy to accomplish, so I'm going to let that one go and handle it locally with some custom methods and buttons.
Probably will have to play around with the docked class to get the icons layouts to stay put when the 2nd sidebar is opened, so instead of toggling itself it would toggle the secondary one. Either that or do some CSS magic playing with the sidebar open/closed states.

As far as question 1 goes, yes.. I'm thinking about it and can't come up with an easy or quick way to handle this one so I'm going to think about it and let you know if I figure it out. I will need to either make this work or drop the component for this specific section of my app because of it's requirements so I might be able to come up with something that works.

@CatinhoCR
Copy link
Author

CatinhoCR commented Jun 8, 2017

You can close this issue I'll go ahead and report in the original #51 issue if I have news. Thanks again for your help, much appreciated.

@arkon
Copy link
Owner

arkon commented Jun 8, 2017

You probably shouldn't use the docked mode for it. In my head, it's more so something like this (in plain HTML, not Angular components):

<header>
  // Anders Ringfelter
</header>
<div class="container">
  <aside>
    // list of icons (eye, clock, etc.) that act as sidebar/sidebar content toggles
  </aside>
  <main>
    // sidebar container and sidebars would go here
    // ...content...
  </main>
</div>

@arkon arkon closed this as completed Jun 8, 2017
@CatinhoCR
Copy link
Author

CatinhoCR commented Jun 12, 2017

@arkon,
Yeah you're totally right. I was playing with the docked option and turned to be a pain in the ass.. Went for something pretty similar to this to do the trick, the icons would be the buttons for toggling each of the sidebars and then added a custom animation block for the 2nd sub menu from the sidebar itself in my component.
This worked because i'm working with fixed widths for the sidebars so I could easily calculate the position where the custom animation should fall into

Thanks dude, appreciate your time and dedication into this. Keep it up.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants