README.md

# elixir-navigation-tree
A navigation tree representation with helpers to generate HTML out of it - depending of userroles. Creates nice HTML navbars for Bootstrap.

# How to use
Of course, include elixir-navigation-tree to your project's dependecies.

In your mix.exs
```
  defp deps do
    [
        ...
        { :navigation_tree, ">= 0.1.0" }
    ]
  end
```

Then, createa navigation module like this (assuming MyApp as your Application's name):

lib/myapp/navigation_tree.ex
```
defmodule MyApp.Navigation do

  require NavigationTree.Loader
  alias NavigationTree.Node, as: Node

  NavigationTree.Loader.make_module(
    Tree,
    %Node{
          name: "Home",
          children: [
              %Node{
                  name: "Login",
                  url:  "/auth",
              },
              %Node{
                  name: "Private",
                  url:  "/private",
                  roles: ["user"]
              },
              %Node{
                  name: "MYAdmin",
                  roles: ["admin"],
                  children: [
                      %Node{ name: "MYUsers" },
                      %Node{ name: "MYRoles" },
                  ]
              }
          ]
      }, 
      
      # this is going to be removed 
      fn( user_id ) when is_integer( user_id ) ->
        
        # a function that translates user_id => ["role1", "role2", ... ]
        MyApp.get_userroles_for( user_id )
        
        # or if you use phoenix-skeleton:
        # MyApp.User.Helper.roles_of( MyApp.Repo.get Myapp.User, user_id )

      end
  );

end

```

# Usage (minimal draft)

The above module will create a module `MyApp.Navigation.Tree`.

## Functions

### tree
Returns the tree as data structure

### allowed_tree([ "role1", "role2", ... ])
Returns the accessible tree for a user with userroles "role1" and "role2"

### as_list
Returns the traversed tree as flat list of elements

```
[%{classes: ["nav navbar-nav"], ul_start: true}, %{classes: [], li_start: true},
 %{anchor: true, href: "/auth", text: "Login"}, %{li_stop: true},
 %{classes: [], li_start: true},
 %{anchor: true, href: "/private", text: "Private"}, %{li_stop: true},
 %{classes: ["before-dropdown"], li_start: true},
 %{anchor: true, href: "/myadmin", text: "Admin"}, %{li_stop: true},
 %{classes: ["dropdown"], li_start: true}, %{dropdown_toggle: true},
 %{classes: ["dropdown-menu"], ul_start: true}, %{classes: [], li_start: true},
 %{anchor: true, href: "/myadmin/myusers", text: "Users"}, %{li_stop: true},
 %{classes: [], li_start: true},
 %{anchor: true, href: "/myadmin/myroles", text: "Roles"}, %{li_stop: true},
 %{ul_stop: true}, %{li_stop: true}, %{ul_stop: true}]

```

## as HTML

Currently, this module spits out navigation bars for Bootstrap

### as_html(), as_html( user_id ), as_html( [ "role1", ..] )

layout.eex
```
<html>
    ...
   <body>

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <%= raw MyApp.NavigationTree.as_html_for( current_get_user_roles() ) %>
      </div>
    </nav>
    
    <div class="container">
      <%= @inner %>
    </div>

  </body>

</html>       
```