Hi,
is there a fast way to show the V10 Bakery App menu vertically?
thanks
Gianluca
Yeah. It would require some CSS skills, though.
app-navigation.html: Change the <vaadin-tabs orientation="vertical">, change to :host {display:flex}, and set left:0 for the .branding class.
storefront-view.html: Change to :host {width: 100%}.
main-view.html: Change to flex-direction: row.
You’ll need to tweak some other stuff too, particularly to make responsiveness work accordingly. Hope that helps as a starting point. Please considering sharing your code if you accomplish it 
Thanks Alejandro.
I will start with your suggestion and then I will post the the code during its changes with the related screenshot
Hi Alejandro,
updating the html that you suggested me and some other ones I can show you the first result
I attached the modified files and the screenshot result in vmenu.png.
Now I need to fix the mobile view maybe changing something in the @media tag.
If you have some suggestions
Thanks
Gianluca
update:
changing the toolbar class
.toolbar {
display: flex;
justify-content: flex-start;
background-color: var(--lumo-base-color);
align-items: flex-start;
position: relative;
padding-top: 3em;
}
in app-navigation.html we can move the menu up
17162361.html (2.88 KB)
17162364.html (2.12 KB)
17162367.html (1.58 KB)
17162370.html (919 Bytes)
17162373.html (1.98 KB)
Hi Alejandro,
is there a way to change using @media css class or something else the vaadin-tabs orientation?
Because I need to be vertical on desktop view, but horizontal when it is on mobile view:
@media (min-width: 600px) {
vaadin-tab {
font-size: var(--lumo-font-size-m);
padding-left: 1em;
padding-right: 1em;
something like it --> **orientation: horizontal**;
}
I’m trying to understand how to have the default horizontal bottom menu on mobile view.
Somebody can help me to understand it?
Gianluca
Hi Alejandro,
I don’t know why I cannot see your response here that arrived through Vaadin Forum notification email.
I will post it now:
You could try with something like:
@media (min-width: 600px) {
vaadin-tabs {
content:orientation("horizontal");
}
}
You will have to add some more rules to change the flex-direction and other stuff at least in the storefront-view.html file.
Again, this could help as a starting point for your experiments ;) And please share your findings and code if you manage to implement it :)
I tried it on my code but the menu is always vertical as you can see on mobile.png.
Changing the orientation=“vertical” to “orizontal” the menu can be visible well.
Have you, or somebody else, any suggestion for me?
Two post ago I attached my html and the screenshot to view my result
Couldn’t find a CSS-only solution. But you could add something like the following to your web component JavaScript class:
constructor() {
super();
this._boundResizeHandler = this.resizeHandler.bind(this);
}
resizeHandler() {
var orientation = window.innerWidth <= 600 ? "horizontal" : "vertical";
var tabs = Polymer.dom(this.root).querySelector('#tabs');
tabs.setAttribute("orientation", orientation);
}
ready() {
super.ready();
this.resizeHandler();
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('resize', this._boundResizeHandler);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('resize', this._boundResizeHandler);
}
With this: <vaadin-tabs id="tabs"></vaadin-tabs>.
Please let us know your findings if you get it to work properly. I bet there are other developers willing to implement the same.
Gianluca Valentini:
Hi Alejandro,
I don’t know why I cannot see your response here that arrived through Vaadin Forum notification email.
I removed it 
Hi Alejandro,
it works fine!!!
I added also width: 100% to toolbar class to have the same background (white) in the menu bar.
in the Png you can see the result.
I attached the updated app-navigation
Thanks again.
If somebody want to continue my experiment he is welcome
17165680.html (2.9 KB)
Good to hear! Would you “dare” to publish the project on GitHub? And if so, are you on Twitter
Hi Alejandro,
I just update the Backery demo app, where should I publish it?
My twitter account is @GianlucaV4l
Thanks
Gianluca
Good! Best place would be [GitHub]
(https://github.com). I’m guessing you are not familiar with Git or GitHub. Create an account if don’t have one. Install Git, add a .gitignore file like [this]
(https://github.com/alejandro-du/vaadin-microservices-demo/blob/master/.gitignore) to the root directory of your project, run git commit -am "Initial commit". Create a new repository in GitHub and follow the instructions to push the changes. Once you have the repo published, please share its URL here
Ok,
as soon as I create the repository, I’ll post the URL here
Gianluca
Hi Alejandro,
I publish the project on [GitHub]
(https://github.com/gianluca-valentini/vaadin-bakery).
My only doubt is the license. I used the MIT on with this GitHub project. If necessary, we change it.
Let me now if is ok for you.
Thanks
Gianluca
Thanks a lot!
Gianluka, unfortunatelly the license for Backery doesn’t allow to publish this.
Commercial Vaadin Template License version 1
>>>2.2 Licensee shall not, unless expressly provided in Agreement or in the applicable legislation,
…
2.2.2 grant sub-licenses to Licensed Template or assign its rights or obligations under this Agreement to a third party;
2.2.3 distribute the Licensed Template as-is or any derivatives or parts of it for the purpose of them being used as source code examples or basis for other software applications.
I’d suggest to remove the repo or make it private. In any case, the snippets of code and ideas shared here should help other developers to accomplish the same by themseves. Thanks again, and sorry for the hassle
Hi Alejandro,
i will change the repository as soon as possible.
I need to change it even if I change my license with the vaadin license too?
I’m affraid so.
ok,
I will try ti change the repo as private.
If you can understand if si possible t
ok.
I will try to change my the repository as private.
Can you inform if using the vaadin license is possible to make it public again?