<nav-main path="${out.global.url.pathname}" items="${out.global.navigation.main}" />
See Marko Roadmap for the changes in Marko V4
-
-
Save Jehu/1a4f9a867a3fd4738584bf6e1bf9e5b0 to your computer and use it in GitHub Desktop.
basic navigation component with marko (v4) and koa (v3)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Say lasso what files we want clientside for this layout | |
| // /views/layouts/browser.json | |
| { | |
| "dependencies": [ | |
| { "type":"js", "url":"https://code.jquery.com/jquery-3.1.1.min.js", "external":true}, | |
| { "type":"css", "url":"https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css", "external":true }, | |
| { "type":"js", "url":"https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js", "external":true }, | |
| "require: ../components/nav-main" | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // /views/components/nav-main/index.marko | |
| <script> | |
| let config = { | |
| caseSensitive: true | |
| }; | |
| /** | |
| * borrowed partially from https://github.com/zimme/meteor-active-route | |
| * Thanks! | |
| */ | |
| let test = function(value, input) { | |
| var result | |
| if ((input === "/" && value === "/")) { | |
| return true | |
| } else if(input === "/") { | |
| return false | |
| } | |
| let pattern = new RegExp(input) | |
| if (value.match(pattern)) { | |
| result = value.search(pattern); | |
| result = result > -1 | |
| } else if (value.search(pattern)) { | |
| if (!config.caseSensitive) { | |
| value = value.toLowerCase() | |
| } | |
| result = value === input | |
| } | |
| return result != null ? result : result = false | |
| } | |
| let isActive = function(input, path) { | |
| return test(input, path) | |
| } | |
| module.exports = { | |
| state: { | |
| path: '/' | |
| }, | |
| onInput(input) { | |
| return { | |
| path: input.path, | |
| items: input.items | |
| } | |
| } | |
| } | |
| </script> | |
| <nav class="ui secondary pointing menu"> | |
| <for(item in data.items)> | |
| <a class="${isActive(data.path, item.path) ? 'active' : ''} item" href="${item.path}"> | |
| ${item.name} | |
| </a> | |
| </for> | |
| <div class="right menu"> | |
| <a class="ui item"> | |
| Logout | |
| </a> | |
| </div> | |
| </nav> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- /views/layouts/layout.marko --> | |
| <lasso-page package-path="./browser.json" /> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>My Site</title> | |
| <lasso-head /> | |
| </head> | |
| <body> | |
| <div class="ui container"> | |
| <header> | |
| <!-- | |
| HERE WE USE OUR NAVIGATION COMPONENT | |
| notice the use of global variables from the route middleware | |
| --> | |
| <nav-main path="${out.global.url.pathname}" items="${out.global.navigation.main}" /> | |
| </header> | |
| <main> | |
| <if(data.content)> | |
| <include(data.content) /> | |
| </if> | |
| <else> | |
| <p>no contents</p> | |
| </else> | |
| </main> | |
| </div> | |
| <lasso-body /> | |
| <init-widgets /> | |
| <browser-refresh enabled="true" /> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ... | |
| router.use(function (ctx, next) { | |
| // add Url object to global context | |
| ctx.global.url = url.parse(ctx.request.url); | |
| next() | |
| }) | |
| router.use(function(ctx, next) { | |
| // add navigation link config to global context | |
| // navigation config could be loaded from yml file, app config.json or database | |
| ctx.global.navigation = { | |
| main: [ | |
| { | |
| name: 'Home', | |
| path: '/', | |
| children: [] | |
| }, { | |
| name: 'Linkname #1', | |
| path: '/a-path' | |
| }, { | |
| name: 'Linkname #2', | |
| path: '/another-path' | |
| }, { | |
| name: 'Linkname #3', | |
| path: '/a-path/like/this' | |
| } | |
| ] | |
| } | |
| next() | |
| }) | |
| // ... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment