Got sidebar and header working.

src/assets/scripts/elm/Components/Header.elm

@@ -1,4 +1,4 @@
-module Components.Header exposing (view)
+port module Components.Header exposing (view, initHeader)
 
 import Html
     exposing
@@ -41,7 +41,7 @@ view user =
                         ]
                     ]
                 , li [ class "search-box" ]
-                    [ a [ class "search-toggle no-pdd-right", href "javascript:void(0);" ]
+                    [ a [ class "search-toggle no-pdd-right", href "" ]
                         [ i [ class "search-icon ti-search pdd-right-10" ]
                             []
                         , i [ class "search-icon-close ti-close pdd-right-10" ]
@@ -152,107 +152,6 @@ view user =
                             ]
                         ]
                     ]
-                , li [ class "notifications dropdown" ]
-                    [ span [ class "counter bgc-blue" ]
-                        [ text "3" ]
-                    , a [ href "", class "dropdown-toggle no-after", attribute "data-toggle" "dropdown" ]
-                        [ i [ class "ti-email" ]
-                            []
-                        ]
-                    , ul [ class "dropdown-menu" ]
-                        [ li [ class "pX-20 pY-15 bdB" ]
-                            [ i [ class "ti-email pR-10" ]
-                                []
-                            , span [ class "fsz-sm fw-600 c-grey-900" ]
-                                [ text "Emails" ]
-                            ]
-                        , li []
-                            [ ul [ class "ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm" ]
-                                [ li []
-                                    [ a [ href "", class "peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100" ]
-                                        [ div [ class "peer mR-15" ]
-                                            [ img [ class "w-3r bdrs-50p", src "https://randomuser.me/api/portraits/men/1.jpg", alt "" ]
-                                                []
-                                            ]
-                                        , div [ class "peer peer-greed" ]
-                                            [ div []
-                                                [ div [ class "peers jc-sb fxw-nw mB-5" ]
-                                                    [ div [ class "peer" ]
-                                                        [ p [ class "fw-500 mB-0" ]
-                                                            [ text "John Doe" ]
-                                                        ]
-                                                    , div [ class "peer" ]
-                                                        [ small [ class "fsz-xs" ]
-                                                            [ text "5 mins ago" ]
-                                                        ]
-                                                    ]
-                                                , span [ class "c-grey-600 fsz-sm" ]
-                                                    [ text "Want to create your own customized data generator for your app..." ]
-                                                ]
-                                            ]
-                                        ]
-                                    ]
-                                , li []
-                                    [ a [ href "", class "peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100" ]
-                                        [ div [ class "peer mR-15" ]
-                                            [ img [ class "w-3r bdrs-50p", src "https://randomuser.me/api/portraits/men/2.jpg", alt "" ]
-                                                []
-                                            ]
-                                        , div [ class "peer peer-greed" ]
-                                            [ div []
-                                                [ div [ class "peers jc-sb fxw-nw mB-5" ]
-                                                    [ div [ class "peer" ]
-                                                        [ p [ class "fw-500 mB-0" ]
-                                                            [ text "Moo Doe" ]
-                                                        ]
-                                                    , div [ class "peer" ]
-                                                        [ small [ class "fsz-xs" ]
-                                                            [ text "15 mins ago" ]
-                                                        ]
-                                                    ]
-                                                , span [ class "c-grey-600 fsz-sm" ]
-                                                    [ text "Want to create your own customized data generator for your app..." ]
-                                                ]
-                                            ]
-                                        ]
-                                    ]
-                                , li []
-                                    [ a [ href "", class "peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100" ]
-                                        [ div [ class "peer mR-15" ]
-                                            [ img [ class "w-3r bdrs-50p", src "https://randomuser.me/api/portraits/men/3.jpg", alt "" ]
-                                                []
-                                            ]
-                                        , div [ class "peer peer-greed" ]
-                                            [ div []
-                                                [ div [ class "peers jc-sb fxw-nw mB-5" ]
-                                                    [ div [ class "peer" ]
-                                                        [ p [ class "fw-500 mB-0" ]
-                                                            [ text "Lee Doe" ]
-                                                        ]
-                                                    , div [ class "peer" ]
-                                                        [ small [ class "fsz-xs" ]
-                                                            [ text "25 mins ago" ]
-                                                        ]
-                                                    ]
-                                                , span [ class "c-grey-600 fsz-sm" ]
-                                                    [ text "Want to create your own customized data generator for your app..." ]
-                                                ]
-                                            ]
-                                        ]
-                                    ]
-                                ]
-                            ]
-                        , li [ class "pX-20 pY-15 ta-c bdT" ]
-                            [ span []
-                                [ a [ href "email.html", class "c-grey-600 cH-blue fsz-sm td-n" ]
-                                    [ text "View All Email"
-                                    , i [ class "fs-xs ti-angle-right mL-10" ]
-                                        []
-                                    ]
-                                ]
-                            ]
-                        ]
-                    ]
                 , li [ class "dropdown" ]
                     [ a [ href "", class "dropdown-toggle no-after peers fxw-nw ai-c lh-1", attribute "data-toggle" "dropdown" ]
                         [ div [ class "peer mR-10" ]
@@ -304,3 +203,6 @@ view user =
                 ]
             ]
         ]
+
+
+port initHeader : () -> Cmd msg

src/assets/scripts/elm/Components/Sidebar.elm

@@ -1,4 +1,4 @@
-module Components.Sidebar exposing (view)
+port module Components.Sidebar exposing (view, initSidebar)
 
 import Html exposing (Html, a, div, h5, i, img, li, span, text, ul)
 import Html.Attributes exposing (class, href, src, alt)
@@ -118,7 +118,7 @@ view =
                         ]
                     ]
                 , li [ class "nav-item dropdown" ]
-                    [ a [ class "dropdown-toggle", href "javascript:void(0);" ]
+                    [ a [ class "dropdown-toggle", href "" ]
                         [ span [ class "icon-holder" ]
                             [ i [ class "c-orange-500 ti-layout-list-thumb" ]
                                 []
@@ -142,7 +142,7 @@ view =
                         ]
                     ]
                 , li [ class "nav-item dropdown" ]
-                    [ a [ class "dropdown-toggle", href "javascript:void(0);" ]
+                    [ a [ class "dropdown-toggle", href "" ]
                         [ span [ class "icon-holder" ]
                             [ i [ class "c-purple-500 ti-map" ]
                                 []
@@ -166,7 +166,7 @@ view =
                         ]
                     ]
                 , li [ class "nav-item dropdown" ]
-                    [ a [ class "dropdown-toggle", href "javascript:void(0);" ]
+                    [ a [ class "dropdown-toggle", href "" ]
                         [ span [ class "icon-holder" ]
                             [ i [ class "c-red-500 ti-files" ]
                                 []
@@ -202,7 +202,7 @@ view =
                         ]
                     ]
                 , li [ class "nav-item dropdown" ]
-                    [ a [ class "dropdown-toggle", href "javascript:void(0);" ]
+                    [ a [ class "dropdown-toggle", href "" ]
                         [ span [ class "icon-holder" ]
                             [ i [ class "c-teal-500 ti-view-list-alt" ]
                                 []
@@ -216,13 +216,13 @@ view =
                         ]
                     , ul [ class "dropdown-menu" ]
                         [ li [ class "nav-item dropdown" ]
-                            [ a [ href "javascript:void(0);" ]
+                            [ a [ href "" ]
                                 [ span []
                                     [ text "Menu Item" ]
                                 ]
                             ]
                         , li [ class "nav-item dropdown" ]
-                            [ a [ href "javascript:void(0);" ]
+                            [ a [ href "" ]
                                 [ span []
                                     [ text "Menu Item" ]
                                 , span [ class "arrow" ]
@@ -232,11 +232,11 @@ view =
                                 ]
                             , ul [ class "dropdown-menu" ]
                                 [ li []
-                                    [ a [ href "javascript:void(0);" ]
+                                    [ a [ href "" ]
                                         [ text "Menu Item" ]
                                     ]
                                 , li []
-                                    [ a [ href "javascript:void(0);" ]
+                                    [ a [ href "" ]
                                         [ text "Menu Item" ]
                                     ]
                                 ]
@@ -246,3 +246,6 @@ view =
                 ]
             ]
         ]
+
+
+port initSidebar : () -> Cmd msg

src/assets/scripts/elm/Main.elm

@@ -3,8 +3,8 @@ port module Main exposing (Model, Msg(..), init, main, update, view)
 import Browser exposing (Document, UrlRequest(..))
 import Browser.Navigation as Nav exposing (Key)
 import Components.Footer as Footer
-import Components.Header as Header
-import Components.Sidebar as Sidebar
+import Components.Header as Header exposing (initHeader)
+import Components.Sidebar as Sidebar exposing (initSidebar)
 import Html exposing (Html, a, br, div, h1, img, main_, text)
 import Html.Attributes exposing (class, href, id, src)
 import Html.Events exposing (onClick)
@@ -36,7 +36,7 @@ init user url key =
       , page = whichPage user url
       , user = user
       }
-    , Cmd.none
+    , Cmd.batch [ initSidebar (), initHeader () ]
     )
 
 

src/assets/scripts/elm/index.js

@@ -1,4 +1,6 @@
 import { Elm } from './Main.elm';
+import { initSidebar } from '.././sidebar';
+import { initSearch } from '../search';
 
 export default (function () {
     var firebaseConfig = require('./firebaseConfig');
@@ -29,6 +31,14 @@ export default (function () {
                         window.location.reload();
                     });
                 });
+
+                app.ports.initSidebar.subscribe(() => {
+                    initSidebar();
+                });
+
+                app.ports.initHeader.subscribe(() => {
+                    initSearch();
+                });
             });
         } else {
             initLoginForm();

src/assets/scripts/index.js

@@ -1,4 +1,4 @@
 import '../styles/index.scss';
 
 import './fancyloader';
-import './elm';
+import './elm';

src/assets/scripts/search/index.js

@@ -1,9 +1,9 @@
 import * as $ from 'jquery';
 
-export default (function () {
+export function initSearch() {
   $('.search-toggle').on('click', e => {
     $('.search-box, .search-input').toggleClass('active');
     $('.search-input input').focus();
     e.preventDefault();
   });
-}());
+};

src/assets/scripts/sidebar/index.js

@@ -1,6 +1,6 @@
 import * as $ from 'jquery';
 
-export default (function () {
+export function initSidebar() {
   // Sidebar links
   $('.sidebar .sidebar-menu li a').on('click', function () {
     const $this = $(this);
@@ -73,4 +73,4 @@ export default (function () {
       window.dispatchEvent(window.EVENT);
     }, 300);
   });
-}());
+}