How can I only show the icons and not the text when sidebar is compressed-CodePudding

I want to hide the text and only show the icons when sidebar menu is toggled and sidebar container is compressed

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div >
    <a th:href="@{/dashboard/}" ><span ></span>Dashboard</a>
    <a th:href="@{/profile/}" ><span ></span>Admin Profile</a>
    <a th:href="@{/notification/}" ><span ></span>Notifications</a>
    <a th:href="@{/account/}" ><span ></span>User Accounts</a>
    <a th:href="@{/product/}" ><span ></span>Product List</a>
    <a th:href="@{/order/}" ><span ></span>Transactions</a>
    <a th:href="@{/report/}" ><span ></span>Sales report</a>
</div>

Please help

CodePudding user response：

<div >
<a th:href="@{/dashboard/}" ><span ></span><span >Dashboard</span></a>
<a th:href="@{/profile/}" ><span ></span><span >Admin Profile</span></a>
<a th:href="@{/notification/}" ><span ></span><span >Notifications</span></a>
<a th:href="@{/account/}" ><span ></span><span >User Accounts</span></a>
<a th:href="@{/product/}" ><span ></span><span >Product List</span></a>
<a th:href="@{/order/}" ><span ></span><span >Transactions</span></a>
<a th:href="@{/report/}" ><span ></span><span >Sales report</span></a>

wrap the text in span and add compressed class when sidebar is compressed and remove the class when sidebar is expanded. Then add below css:

.sidebar.compressed .menu-text{display:none}

CodePudding user response：

You cannot use a css selector to target text nodes. (There is an experimental feature called ::target-text, but this will not help you in this case anyway).

You should wrap the text in an element (most likely a span) and then use a selector for that to show/hide the text.

CodePudding user response：

Below a possible solution for your issue.

I've wrappen a span around the text of the navbar items to easily address them using CSS.
The word 'compress' is used to allow the text to disappear. You need to hover it with the mouse.
Required CSS is added to let the text disappear.

.sidebar {
  display: flex;
  flex-direction: column;
}

.fas {
  width: 40px;
  text-align: center;
}

#compress:hover~a>.nav-text {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div >
  <div id="compress">Compress</div>
  <a th:href="@{/dashboard/}" ><span ></span><span >Dashboard</span></a>
  <a th:href="@{/profile/}" ><span ></span><span >Admin Profile</span></a>
  <a th:href="@{/notification/}" ><span ></span><span >Notifications</span></a>
  <a th:href="@{/account/}" ><span ></span><span >User Accounts</span></a>
  <a th:href="@{/product/}" ><span ></span><span >Product List</span></a>
  <a th:href="@{/order/}" ><span ></span><span >Transactions</span></a>
  <a th:href="@{/report/}" ><span ></span><span >Sales report</span></a>
</div>