diff --git a/src/assets/scripts/elm/Components/Header.elm b/src/assets/scripts/elm/Components/Header.elm index 680e4b0..d9ae4c8 100644 --- a/src/assets/scripts/elm/Components/Header.elm +++ b/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 \ No newline at end of file diff --git a/src/assets/scripts/elm/Components/Sidebar.elm b/src/assets/scripts/elm/Components/Sidebar.elm index 0284f5c..9df5d74 100644 --- a/src/assets/scripts/elm/Components/Sidebar.elm +++ b/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 \ No newline at end of file diff --git a/src/assets/scripts/elm/Main.elm b/src/assets/scripts/elm/Main.elm index 31235e3..0c17359 100644 --- a/src/assets/scripts/elm/Main.elm +++ b/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 () ] ) diff --git a/src/assets/scripts/elm/index.js b/src/assets/scripts/elm/index.js index 3f5fb9e..cdd331f 100644 --- a/src/assets/scripts/elm/index.js +++ b/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(); diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index ef9c228..9990658 100755 --- a/src/assets/scripts/index.js +++ b/src/assets/scripts/index.js @@ -1,4 +1,4 @@ import '../styles/index.scss'; import './fancyloader'; -import './elm'; \ No newline at end of file +import './elm'; diff --git a/src/assets/scripts/search/index.js b/src/assets/scripts/search/index.js index bbd983b..802a299 100755 --- a/src/assets/scripts/search/index.js +++ b/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(); }); -}()); +}; diff --git a/src/assets/scripts/sidebar/index.js b/src/assets/scripts/sidebar/index.js index ab26f99..ab67188 100755 --- a/src/assets/scripts/sidebar/index.js +++ b/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); }); -}()); +}