How can i make a Vertical Icon Menu like Valo Demo

General
1

Hi all,
Iam trying some basics of Vaadin and i didnt found a solution to make a vertical icon based menu like in valo demo sampler … see the attachment!. Just a horizontal menu.

My next Question: When i have a horizontal layout and in there a splitpanel how can i change the color of one side in panel? also in valo demo? …

thanks a lot
Nico

16436.png

2

i used the
source code
 of the emo as a reference!
all you need to do is call the buildMenu() method with all its classes as well as the themes folder and configure it to your local project

3

Hi Reda,

But i dont know how, :confused: Can u explain it how can i do this? iam really beginner

4

what part exactly can I help you with? (a code snippet would be helpful) There is only so much I can explain. It’s easy to learn, believe me, I only started developing web apps a month ago

5

I dont have any Code at the moment. i started a new vaadin project and want now setup up the style.

6

here is a
link
to a very helpful video tutorial (purley technical) to build a responsive menu layout.

I used that to help me layout my current application, and have a better understanding on how Vaadin handles scss and responsive UIs

7



i’m just doing some coding so the code for example above is :

the first clase is the base layout, and the last one is the vertical menu actualy is a vertical layout and some buttons

Enjoy :.

public class BaseLayout extends HorizontalSplitPanel{

    /**
     *
     */
    private static final long serialVersionUID;
    static{
        serialVersionUID = -2265922916170768007L;
    }
    //initialize root & other components
    {
        initRoot();
        initComponents();
    }
    private void initRoot(){
        setStyleName("base-layout");
        /*    set component style name    */
        setSplitPosition(150, Unit.PIXELS, false);
        /*Moves the position of the splitter with given position and unit.
        Parameters:
        pos the new size of the first region. Fractions are only allowed when unit is percentage.
        unit the unit (from Sizeable) in which the size is given.
        reverse if set to true the split splitter position is measured by the second region else it is measured by the first region
         */
    }
    private void initComponents(){
        verticalMenu    = new VerticalMenu();
        setFirstComponent(verticalMenu);
        
        //the content .
        
        setSecondComponent(new Label("[ here goes the pretty body ]
"));
    }
    
    private VerticalMenu    verticalMenu;
    
}



[b]
{       ######  Second class   #####    }    
[/b]
public class VerticalMenu extends VerticalLayout{

    /**
     *
     */
    private static final long serialVersionUID;
    static{
        serialVersionUID = -1508291768897794634L;
    }
    //initialize root & other components
    {
        initRoot();
        initComponents();
    }
    private void initRoot(){
        setStyleName("vertical-menu");
    }
    private void initComponents(){
        initButtons();
    }
    
    private void initButtons(){
        buttons    = new ArrayList<>();
        
        buttons.add(new Button("First"));
        buttons.add(new Button("Second"));
        buttons.add(new Button("Third"));
        
        
        for(Button button:buttons){
            button.addClickListener((clickEvent)->{
                Notification.show("i'm "+button.getCaption()+" Button");
            });
            switch(button.getCaption()){
            case "First":{button.setIcon(FontAwesome.USER);}break;
            case "Second":{button.setIcon(FontAwesome.CLOUD);}break;
            case "Third":{button.setIcon(FontAwesome.MAGIC);}break;
            
            }
            addComponent(button);
        }
        
        
        
    }
    private ArrayList<Button> buttons;

}

the SCSS “styling code”

  $base-color:            rgba(37.6%,23.5%,72.9%, .8);
  .vertical-menu{
 
//    @include font("JF Flat", "../../afroTheme/fonts/jf_flat");
    $v-font-family: "JF Flat","Open Sans", sans-serif;
    
    font-family:    $v-font-family;
      .v-button{
          width:        100%;
          height:        89px;
          background:     darken($base-color, 30%);
          color:        lighten($base-color, 89%);
          .v-caption{
              font-size:    1.2em;
              height:        100%;
          }
          .v-icon{
              font-size:    2em;
          }
      }
 
  }
  .v-label{
          width:    100%;
          height:    100%;
          line-height:    100%;
          background-color:     lighten($base-color, 30%);
          text-align:    CENTER;
          font-size:    4em;
      }