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

[noBody]

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

[dceejay]

Hi. Sorry no not easily no.

[noBody]

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?

[hotNipi]

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 ->

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.

[dynamicdave]

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

[hotNipi]

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>

Customize dashboard CSS

Couple of things first.. Many things can happen if you start to play with CSS. You may break whole thing, but you can make your page really good looking. But be aware that it can be addictive. The result of your adjustments is art. So if you are changing CSS for your dashboard, you are an artist. (and a little bit a programmer of course) I'm not an expert of art nor the CSS. The tools Browser developer tools. https://developers.google.com/web/tools/chrome-devtools/css The main too…

[zenofmud]

@hotNipi

but the real art should still be created by the artist.

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

[hotNipi]

Moderate introspection can help you find it

[noBody]

Many thanks. its beautiful
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.

[hotNipi]

@hotNipi

Build the navigation between tabs with regular buttons and place them where ever you like.

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}]

[Steve-Mcl]

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

Screenshot shamelessly nabbed from @Paul-Reed

[jodelkoenig]

@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