Display the Vaadin side nav item icon only when the menu is in a collapsed state

Currently utilizing Vaadin 24. I have implemented a side menu with the use of "DrawerToggle" to toggle the visibility of menu items when the burger icon is clicked, which functions smoothly.

DrawerToggle toggle = new DrawerToggle();
    
SideNav nav = createSideNav();

The SideNavItems are generated in this manner:

SideNavItem item = new SideNavItem(label);
item.setPrefixComponent(icon);

While everything is working as intended, my goal now is to selectively hide labels only when the drawer is collapsed. I want the icons to remain visible even when the drawer is minimized. Essentially, I aim for the drawer to be visibly collapsed at around 60px width, yet still display the icons.

Is there a viable method to accomplish this task?

I've experimented with various CSS approaches, but it seems to clash with Vaadin's internal mechanism for opening and closing the drawer.

Thank you, Thorsten

javacssvaadinvaadin24drawertoggle

Answer №1

Unfortunately, the current functionality does not support partial opening of the drawer. It can only be fully opened or closed.

If you want to have an icons-only state for both the AppLayout and the SideNav, you will need to implement it yourself.

You can adjust the width of the AppLayout drawer using the css property --vaadin-app-layout-drawer-width. However, hiding item labels in the SideNav with css may be tricky, so consider handling it in Java instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Saving ArrayList of model classes to a text file can be achieved by utilizing BufferedWriter

After retrieving data using the enqueue call, I attempted to access the data from the arrayBundlePack. Using BufferedWriter, I tried to save this data in the arrayBundlePack and write it to a .txt file, but the desired output was not achieved. I'm un ...

javaandroidandroid-studioarraylistbufferedwriter

View text preview split across multiple pages

When using the <p> tag to display information, I noticed that when I print preview it, the words are split onto another page. Is there a way to prevent this from happening? See the sample below: https://i.sstatic.net/1EHIV.jpg ...

htmlcssprintingparagraph

SpringBoot encountered a JSON parse error when attempting to create an instance of 'com.example.new_model.BenzenoidCriterions'

In my SpringBoot project, I am utilizing the following controller: @Autowired BenzenoidService service; @PostMapping("/find_benzenoid") public List<Benzenoid> find(@RequestBody BenzenoidCriterions benzenoidData) { Triplet<String[], ...

javajsonspring-bootrestjackson

Does anyone have any information on the fact that Selenium 3.0.1 is marking the Marionette driver as obsolete?

Here's a snapshot of the problem I'm facing I've noticed that Selenium 3.0.1 is flagging the Marionette driver as outdated. Has anyone encountered this issue before? https://i.sstatic.net/FALyB.png ...

javaintellij-ideaselenium-webdriver

The CSS was modified once the router-outlet was added

As I was working on creating a login page within Angular, I initially included the code in the app.component.html file like this: app.component.ts <div class="container"> <app-login></app-login> </div> The corresponding CSS lo ...

htmlcssangular

What could be causing the p tag to be displacing the parent div downwards?

Can someone help with an issue I'm having? I have two divs that are supposed to take up half of the screen each. However, when I add a p tag inside the second div, it gets pulled down. I am working on creating an HTML email, so I can only use inline s ...

htmlcssinline-styles

What is the method for extracting a value that is being displayed beneath a text in a React component using Selenium?

Attached is a screenshot showcasing HTML tags: Our task is to display the 3 within react-text. Here's the code snippet I attempted: WebElement MyText = driver.findElement(By.xpath("(//div[@class='badge-number'])[6]")); JavascriptExecut ...

javascriptjavaselenium-webdriverwebdriverselenium-chromedriver

Implementing custom styles in JavaScript according to the specific browser or platform

When it comes to adding multiple css styles to a dom element and ensuring compatibility across different browsers, which approach is more optimal for performance? Combining all prefixed css properties together, allowing the browser to decide which one ...

javascripthtmlcsscross-browser

How to extract HTML content between two specific tags using Jsoup

When browsing a site like , it is interesting to note that sections such as "Districts", "Understand", and "Get in" are not actually the entire section within the HTML. These sections are essentially just span classes within a heading. This means that it i ...

javahtmlwikijsoup

designing two unique JTables within separate JTabbedPanes

I am attempting to create 2 JTabbedPanes that will both display the same JTable but with different values in one of the columns. However, I am encountering an issue where only one tab is displaying and I am unsure of the reason behind this. Additionally, ...

javaswingjtablejtabbedpanedefaulttablemodel

Creating a header using pseudo elements

Check out a CodePen I created to demonstrate the issue. It would be easiest if you could take a look at it here. I am trying to figure out a way to include pseudo elements before and after a heading to display a 1px height line that extends from the sides ...

htmlcss

Utilizing jQuery to correspond with CSS media queries

Continuing from my previous question about an automatic jQuery image slider, you can refer to it here. I have made some changes in my CSS using media queries and I am trying to incorporate them into my JavaScript code using an 'if / else if' sta ...

javascriptjqueryhtmlcss

Disrupt the standard css float and clear layout

I have a main container with a specific width containing four divs of varying sizes. When I set float left for each div, they are displayed as follows: ########################################################## # ## ## ...

javascripthtmlcsscss-float

Executing an if statement twice within a JSF tag

If I focus on the tag directly, it will help me better understand my issue. The question lies within the styleClass attribute: <h:outputText value="#{prod.actualStock}" styleClass=" #{productBean.getSeverity(prod.actualStock, prod.replacementAlertLeve ...

javafunctionjsfif-statement

Obtain today's date excluding any timestamp

I am faced with a challenge that requires me to generate a date for comparison with another date, but I need this date to be without the time component in order to compare timemillis accurately. Despite trying a variety of methods, I have been unsuccessfu ...

javadatetime

Creating a radial gradient effect using JavaScript

I've been experimenting with setting a radial gradient as the background of a div using JavaScript. My goal is to have the gradient start in the middle with around 0.8 opacity, gradually fading to 0 towards the edges to create a soft fading effect. I& ...

javascriptcss

What are some creative ways to enhance the appearance of a deactivated radio button?

In a table cell, I have a set of radio buttons with a background color that differs from the rest of the page. At times, based on another input, I need to disable certain radio buttons. When a radio button is disabled, its interior color blends with the t ...

cssradio-button

Exploring the world of Android through backward compatibility and innovative methods

As I work on updating a library that I maintain, I am exploring the idea of incorporating a method using MediaDataSource in the signature. However, MediaDataSource is only available in API 23 and above. The Android documentation suggests ensuring backward ...

javaandroidbackwards-compatibility

How to properly align an object in a specified ul, li list

I'm currently facing an issue while building a Joomla site. I have set a background image for my li elements, but the items within the li are not centered as expected. The website I am working on is www.outlawsofhealth.com. The specific list in quest ...

htmlcssjoomlahtml-lists

Exploring Vue and Webpack's tree shaking functionality, side effects management, and its impact on CSS: Loading unused component CSS

We are currently grappling with the challenge of effectively implementing tree shaking for CSS within Vue Single File Components using Webpack. Within our package.json file, we have specified: "sideEffects": ["*.css", "*.less","*.vue"], which appears to b ...

cssvue.jswebpackvuejs2