crippy · flip111 · Feb 22, 2017
diff --git a/index.elm b/index.elm
diff --git a/index_elm.html b/index_elm.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>FlexNav  - Playground</title>
+        <meta name="description" content="Flexbox Navigation - Playground for flexbox">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+        <link rel="apple-touch-icon" href="apple-touch-icon.png">
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
+       <link href="stylesheets/main.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
+       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+    </head>
+
+    <body>
+    </body>
+
+    <script type="text/javascript" src="main.js"></script>
+    <script>
+      var app = Elm.Main.fullscreen();
+
+      window.onclick = function(e) {
+        app.ports.bodyClick.send(e.target.classList.contains('menu'));
+      }
+    </script>
+
+    </body>
+</html>
diff --git a/main.elm b/main.elm
@@ -0,0 +1,113 @@
+port module Main exposing (main)
+
+import Html exposing (beginnerProgram, div, a, text, nav, ul, li, i)
+import Html.Events exposing (onClick, on, targetValue)
+import Html.Attributes exposing (rel, class, href, rel, media, classList)
+import List exposing (map)
+import Json.Decode as Json
+
+main = Html.program
+  { init = initModel ! []
+  , update = update
+  , view = view
+  , subscriptions = subscriptions
+  }
+
+-- model
+type alias Model =
+  { menu : Bool
+  }
+
+initModel : Model
+initModel =
+  { menu = False
+  }
+
+-- ports
+subscriptions _ =
+  bodyClick BodyMenuClick
+
+port bodyClick : (Bool -> msg) -> Sub msg
+
+-- update
+update msg model =
+  case msg of
+    MenuOpen -> if model.menu then
+                  { model | menu = False } ! []
+                else
+                  { model | menu = True } ! []
+    MenuClose -> { model | menu = False } ! []
+    BodyMenuClick isMenu -> if isMenu then
+                              model ! []
+                            else
+                              { model | menu = False } ! []
+    NoOp -> model ! []
+
+type MenuActions = NoOp | MenuOpen | MenuClose | BodyMenuClick Bool
+
+-- view
+view model =
+  div [ class "wrapper"]
+    [ div [ class "navbar" ]
+      [ a [ class "logo", href "#" ]
+        [ text "DEV-KIT" ]
+      , a [ class "menu", onClick MenuOpen]
+        [ text "Menu" ]
+      , nav [ classList
+              [ ("prim-nav", True)
+              , ("open", model.menu)
+              ]
+            ]
+        [ ul [] (map linkToLi links ++ socialLinks)
+        ]
+      ]
+    ]
+
+-- Stuff for view
+type alias Link =
+  { href : String
+  , text : String
+  }
+
+links =
+  [ { href = "#", text = "Home" }
+  , { href = "#", text = "About" }
+  , { href = "#", text = "Pricing" }
+  , { href = "#", text = "Partners" }
+  , { href = "#", text = "Articles" }
+  , { href = "#", text = "Contact" }
+  ]
+
+linkToLi : Link -> Html.Html msg
+linkToLi link =
+  li []
+  [ a [ href link.href ]
+    [ text link.text ]
+  ]
+
+socialLinks =
+  [ li [ class "social" ]
+    [ a [ href "#" ]
+      [ i [ class "fa fa-facebook" ]
+        []
+      ]
+    ]
+  , li [ class "social" ]
+    [ a [ href "#" ]
+      [ i [ class "fa fa-twitter" ]
+        []
+      ]
+    ]
+  , li [ class "social" ]
+    [ a [ href "#" ]
+      [ i [ class "fa fa-instagram" ]
+        []
+      ]
+    ]
+  , li [ class "social" ]
+    [ a [ href "#" ]
+      [ i [ class "fa fa-pinterest" ]
+        []
+      ]
+    ]
+  ]