Create navigation UI - Githubissues

dwyl / app-mvp-elm

:palm_tree: The Elm MVP @dwyl application

https://app-mvp-elm.herokuapp.com/

GNU General Public License v3.0

7 stars 0 forks source link

Create navigation UI #44

Open SimonLab opened 4 years ago

SimonLab commented 4 years ago

with https://github.com/dwyl/app-mvp-elm/issues/43 the home page which is currently displaying the link for authentication and logout won't exist anymore.

[x] Create a navigation UI containing logout or signin
[x] Display the navigation UI on all the pages

nelsonic commented 4 years ago

Simon, if possible, can you attempt to implement the Navigation as a Manu Bar: e.g: Such that the image is of the person using the App. The text in the middle is the list in view. The the "hamburger" (off canvas) navigation does not need to be implemented yet but it will eventually allow us to have several menu items.

SimonLab commented 4 years ago

I'm going to start building a simple structure with elm-ui using row. I've also added the epic label on this issue as it will take a bit more time to create the feature link to the image profile and the burger menu. I will create 2 separate issues for these features

SimonLab commented 4 years ago

Find this elm-ui widgets page: https://orasund.github.io/elm-ui-widgets/

which contains a side menu:

nelsonic commented 4 years ago

@SimonLab good detective work finding this example. 👍 Please note that the example does not allow the person to "hide" the menu once it's activated: Perhaps open an issue on https://github.com/Orasund/elm-ui-widgets/issues asking if will accept a PR enhancing the menu so that it has the UI at the top to close the menu if the person does not find the option they are looking for. 💭

SimonLab commented 4 years ago

Doing some test using the nearby functions inFront and below

SimonLab commented 4 years ago

Updating the styles for the navigation header:

The burger icon is created by using 3 element with a width of a few pixel and a background colour:

(column [width (fill |> maximum 40), Element.alignRight, spacing 10, pointer]
   [ el [ width fill, centerX, EltBackground.color UI.mint, height (px 3) ] none
   , el [ width fill, centerX, EltBackground.color UI.mint, height (px 3) ] none
   , el [ width fill, centerX, EltBackground.color UI.mint, height (px 3) ] none
   ]
)

SimonLab commented 4 years ago

Using the inFront function on the top layout. This will create a row with two elements where the one align to the right is the menu. The left element is used to disable the use actions on the main content while the menu is open. I'm also using the alpha function to change the opacity of the main content.

Now that I've define the main UI structure I'm looking at add Elm messages and updates to control the menu (open, close...)

SimonLab commented 4 years ago

I've created the UI.Nav module which manages the state:

nav

I'm looking at a way to toggle the menu when the user click on the left side of the screen. I've defined an onClick event however because this section doesn't contain any element I think the event is not triggered.

SimonLab commented 4 years ago

The navigation menu has been implemented with #50 I'm now looking at displaying the avatar of the logged in user, see https://github.com/dwyl/app-mvp-elm/issues/44#issuecomment-609827873

[x] Update the person decoder to get the avatar value
[x] If the avatar value is not defined display the default dwyl logo

linked to https://github.com/dwyl/auth-mvp/pull/24