Side tab menu at the bottom and/or on the top

Hi, is there a way to put left side menu of tabs on the top or at the bottom of page?

Hi. Sorry no not easily no.

Thank you dceejay, I am trying to build a UI for mobile phone screen. Tabs as side menu takes a lot of space. Bottom or Top would be been nicer.

I am pretty new to NR. Any hints I can follow?

For small screens I'd get rid of top bar and side menu completely. The top bar takes a lot of space but has only one button - open the menu. Not very practical usage of available space.

Build the navigation between tabs with regular buttons and place them where ever you like.
I do it like this ->
image
The marked button switches to tab where is settings for that item.
From settings tab there is button to navigate back to main page.

But there is more options how to make such solutions.

1 Like

That's a brilliant and very attractive layout. Any chance you could share the code / CSS ??

Well, it is not full theme for dashboard, it contains overrides for elements I have in use so kind of incomplete stuff for sharing. I use only button, dropdown and ui_template from dashboard standard components.
And the look of cards and widget containers is just colors, borders, rounded corners and shadows (inner/outer) for them. Just couple of CSS rules.
It maybe another good starting point but the real art should still be created by the artist.

<style id="custom-styles">
:root {
  --color-green-primary: rgb(51, 204, 51);
  --color-green-secondary: rgb(26, 101, 26);
  --color-red-primary: rgb(255, 0, 0);
  --color-red-secondary: rgba(153,0,0,1);
  --color-gray-primary:rgba(40,40,40,1);
  --color-gray-secondary:rgba(65,65,65,1);
  --color-text-primary: rgb(230, 226, 209);
  --color-widget-border: rgb(105, 100, 100);
}
.masonry-container {
    position: relative;
    width: 100%;
    height:100%;
    margin: 0 auto;
    background-image: linear-gradient(0deg, var(--nr-dashboard-widgetBgndColor), var(--color-gray-secondary));
}
.nr-dashboard-theme .nr-dashboard-template {
     background-color: #33333300; 
}

.nr-dashboard-cardcontainer {
    position: relative;
    box-shadow: inset 0px 4px 4px 0px #100f0f6e;
    border-radius: 15px;
}
.nr-dashboard-theme ui-card-panel {
    font-family: Calibri;
    background-color: #33333300;
    color:var(--color-text-primary);
    border-radius: 15px;
    box-shadow: 0 0 8px 0px #00000080;
    border: 1px solid #555555;
    border-top: 2px solid #484848;
}
body.nr-dashboard-theme md-content md-card {
    background-color: #33333300;
    color: var(--color-text-primary);
    text-shadow: 4px 2px 4px #00000044;
    box-shadow: inset 0px 10px 20px 0px #0000006b;
    border-radius: 12px;
    border: 1px solid #565655e6;
    border-top: 2px solid #4b4b4a;
}
</style>
1 Like

Ok, now where do we find 'the artist'??? :rofl:

1 Like

Moderate introspection can help you find it :upside_down_face:

3 Likes

Many thanks. its beautiful :slightly_smiling_face:
I tried putting buttons to appear at the bottom of the UI dashboard. The problem is it scrolls with the page. Its not fixed at the bottom unlike left navigation sidebar.

I didn't mean that you can do it just by that. I was explaining that the menu or menu bar is completely waist of space so you can do navigation inside cards.

But as you are still looking for menu like thing, I did try a bit. t is kind of possible at least.
Not tested too much so you know if something is not working ....

[{"id":"11af8890.7bdd97","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"18a96a33.a46496","type":"ui_template","z":"11af8890.7bdd97","group":"77ce005a.e80ae","name":"menu for first tab","order":0,"width":0,"height":0,"format":"<div id=\"sticky\">\n    <md-button ng-click=\"send({payload:{tab:'First'}})\">FIRST</md-button>\n    <md-button ng-click=\"send({payload:{tab:'Second'}})\">SECOND</md-button>\n</div>\n\n<style>\n    #sticky{\n        width:100%!important;\n    }\n    #First_Sticky_cards{\n        width:100%!important;\n    }\n    #First_Sticky_cards > md-card{\n        width:100%!important;\n    }\n    #nr-dashboard-footer > ui-card-panel{\n        width:100%!important;\n    }\n    #sticky > .md-button:not(:first-of-type) {\n        margin-top: 0px;\n    }\n}\n    \n</style>\n<script>\n    $(\"#nr-dashboard-footer\").empty();\n    $(\"#First_Sticky\").detach().appendTo(\"#nr-dashboard-footer\");\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":60,"wires":[["e6008f41.28499"]]},{"id":"58736b8.8f55a94","type":"inject","z":"11af8890.7bdd97","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":60,"wires":[["18a96a33.a46496"]]},{"id":"72b224b5.aa401c","type":"ui_template","z":"11af8890.7bdd97","group":"62b12239.3b28fc","name":"menu for second tab","order":0,"width":0,"height":0,"format":"<div id=\"sticky\">\n    <md-button ng-click=\"send({payload:{tab:'First'}})\">FIRST</md-button>\n    <md-button ng-click=\"send({payload:{tab:'Second'}})\">SECOND</md-button>\n</div>\n\n<style>\n    #sticky{\n        width:100%!important;\n    }\n    #Second_Sticky_cards{\n        width:100%!important;\n    }\n    #Second_Sticky_cards > md-card{\n        width:100%!important;\n    }\n    #nr-dashboard-footer > ui-card-panel{\n        width:100%!important;\n    }\n    #sticky > .md-button:not(:first-of-type) {\n        margin-top: 0px;\n    }\n}\n    \n</style>\n<script>\n    $(\"#nr-dashboard-footer\").empty();\n    $(\"#Second_Sticky\").detach().appendTo(\"#nr-dashboard-footer\");\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":400,"y":100,"wires":[["e6008f41.28499"]]},{"id":"bde0c96e.be12e8","type":"inject","z":"11af8890.7bdd97","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":100,"wires":[["72b224b5.aa401c"]]},{"id":"e6008f41.28499","type":"ui_ui_control","z":"11af8890.7bdd97","name":"","events":"all","x":620,"y":80,"wires":[[]]},{"id":"acadb5fa.a47058","type":"ui_text","z":"11af8890.7bdd97","group":"ec2640ca.7dc6c","order":0,"width":0,"height":0,"name":"","label":"Text node  First Default","format":"Text node value","layout":"row-spread","x":200,"y":180,"wires":[]},{"id":"dde7a12f.224f2","type":"ui_text","z":"11af8890.7bdd97","group":"43b6cc92.f38c24","order":0,"width":0,"height":0,"name":"","label":"Text node Second Default","format":"Text node value","layout":"row-spread","x":470,"y":180,"wires":[]},{"id":"31de9f74.44ccb","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"ec2640ca.7dc6c","order":1,"width":"1","height":"1","passthru":false,"label":"F","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":240,"wires":[[]]},{"id":"5fe67e4f.c080d","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"ec2640ca.7dc6c","order":1,"width":"1","height":"1","passthru":false,"label":"I","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":280,"wires":[[]]},{"id":"31d6b4f2.54353c","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"ec2640ca.7dc6c","order":1,"width":"1","height":"1","passthru":false,"label":"R","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":320,"wires":[[]]},{"id":"9e04d5fc.6be788","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"ec2640ca.7dc6c","order":1,"width":"1","height":"1","passthru":false,"label":"S","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":360,"wires":[[]]},{"id":"17826f71.8930f1","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"ec2640ca.7dc6c","order":1,"width":"1","height":"1","passthru":false,"label":"T","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":150,"y":400,"wires":[[]]},{"id":"c67ef9ba.83c608","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"43b6cc92.f38c24","order":1,"width":"1","height":"1","passthru":false,"label":"S","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":410,"y":240,"wires":[[]]},{"id":"8b515e95.2d9a8","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"43b6cc92.f38c24","order":1,"width":"1","height":"1","passthru":false,"label":"E","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":410,"y":280,"wires":[[]]},{"id":"c07360ac.15cf6","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"43b6cc92.f38c24","order":1,"width":"1","height":"1","passthru":false,"label":"C","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":410,"y":320,"wires":[[]]},{"id":"aab4484.0812eb8","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"43b6cc92.f38c24","order":1,"width":"1","height":"1","passthru":false,"label":"O","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":410,"y":360,"wires":[[]]},{"id":"d506063f.e788e8","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"43b6cc92.f38c24","order":1,"width":"1","height":"1","passthru":false,"label":"N","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":410,"y":400,"wires":[[]]},{"id":"ce862222.8798d","type":"ui_button","z":"11af8890.7bdd97","name":"","group":"43b6cc92.f38c24","order":1,"width":"1","height":"1","passthru":false,"label":"D","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":410,"y":440,"wires":[[]]},{"id":"77ce005a.e80ae","type":"ui_group","name":"Sticky","tab":"778b34de.5446ac","order":2,"disp":false,"width":"6","collapse":false},{"id":"62b12239.3b28fc","type":"ui_group","name":"Sticky","tab":"291b24ce.78311c","order":3,"disp":false,"width":"6","collapse":false},{"id":"ec2640ca.7dc6c","type":"ui_group","name":"tab First - Group 1 ","tab":"778b34de.5446ac","order":1,"disp":true,"width":"6","collapse":false},{"id":"43b6cc92.f38c24","type":"ui_group","name":"tab Second - Group 1 ","tab":"291b24ce.78311c","order":1,"disp":true,"width":"6","collapse":false},{"id":"778b34de.5446ac","type":"ui_tab","name":"First","icon":"dashboard","disabled":false,"hidden":false},{"id":"291b24ce.78311c","type":"ui_tab","name":"Second","icon":"dashboard","disabled":false,"hidden":false}]

@noBody, you could hide all menus and use context-menu node for navigating screens...

mod

Screenshot shamelessly nabbed from @Paul-Reed

2 Likes

@noBody: I might misunderstand your question completely ... mh ... why not use dashboard standards?

Dashboard settings - site menu:

  • set option to hide menu
  • and to show menu on click (which provides a hamburger menu as shown above from @Steve-Mcl)
  • or even allow tab switching with wiping

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.