Creating a hoverable menu

Question

I want to create a menu that appears on hovering the icons but I am unbale to do so. Despite trying all the ways, i am unable to create a hoverable menu. i want to create a menu just like this- https://www.instagram.com/p/Cu2EyHVNFbJ/?img_index=2 .

The code is as follows-

App.JS

import React from 'react';
import SideBar from './components/sideBar';
import './styles.css';

function App() {
  return (
    <div className="App">
      <SideBar />
    </div>
  );
}

export default App;

This is sideBar.js

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCode, faCog, faFont } from '@fortawesome/free-solid-svg-icons'; // Import the specific icons you need
import '@fortawesome/fontawesome-free/css/all.min.css';

export default function SideBar() {
    return (
        <div>
            <ul className="side-menu">
                <li>
                    <a href="#">
                        <FontAwesomeIcon icon={faCode} />
                        <span className="menu-text">Superguide</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <FontAwesomeIcon icon={faCog} />
                        <span className="menu-text">Installation and Dependencies</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <FontAwesomeIcon icon={faFont} />
                        <span className="menu-text">Typography</span>
                    </a>
                </li>
            </ul>
        </div>
    );
}

This is styles.css

.side-menu {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 60px;
    list-style-type: none;
    background: #fefffe;
    overflow: hidden;
    transition: width 0.6s;
}

.side-menu:hover {
    width: 300px;
}

/* ...Existing styles... */

.side-menu li {
    width: 60px;
  }
  
  .side-menu li a {
    display: block;
    font-size: 0;
    text-decoration: none;
    color: #333;
    height: 60px;
    position: relative;
  }
  
  /* Icons */
  .side-menu li a span.fa {
    font-size: 1.5rem;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
  }
  
  .side-menu li a .menu-text {
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translateY(-50%);
    opacity: 1; /* Set default opacity to 1 */
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out;
  }
  
  /* Show menu text on hover */
  .side-menu li a:hover .menu-text {
    opacity: 1;
  }
  
  /* Additional styles to ensure proper display on hover */
  .side-menu:hover li a .menu-text {
    opacity: 1;
  }

Answer 1

Rework the selector that targets the icons:

/* Icons */
.side-menu li a svg {
  …
}

Remove the font-size: 0 from the following rule so that the text is visible:

.side-menu li a {
  …
  font-size: 0;
  …
}

const { FontAwesomeIcon } = window['react-fontawesome'];
const { faCode, faCog, faFont } = window['free-solid-svg-icons']; 

function SideBar() {
  return (
    <div>
      <ul className="side-menu">
        <li>
          <a href="#">
            <FontAwesomeIcon icon={faCode} />
            <span className="menu-text">Superguide</span>
          </a>
        </li>
        <li>
          <a href="#">
            <FontAwesomeIcon icon={faCog} />
            <span className="menu-text">Installation and Dependencies</span>
          </a>
        </li>
        <li>
          <a href="#">
            <FontAwesomeIcon icon={faFont} />
            <span className="menu-text">Typography</span>
          </a>
        </li>
      </ul>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <SideBar />
    </div>
  );
}


ReactDOM.createRoot(document.getElementById('app')).render(<App/>);

.side-menu {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 60px;
  list-style-type: none;
  background: #fefffe;
  overflow: hidden;
  transition: width 0.6s;
}

.side-menu:hover {
  width: 300px;
}

/* ...Existing styles... */

.side-menu li {
  width: 60px;
}
.side-menu li a {
  display: block;
  text-decoration: none;
  color: #333;
  height: 60px;
  position: relative;
}

/* Icons */
.side-menu li a svg {
  font-size: 1.5rem;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.side-menu li a .menu-text {
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  opacity: 1; /* Set default opacity to 1 */
  white-space: nowrap;
  transition: opacity 0.3s ease-in-out;
}

/* Show menu text on hover */
.side-menu li a:hover .menu-text {
  opacity: 1;
}

/* Additional styles to ensure proper display on hover */
.side-menu:hover li a .menu-text {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.8.1/prop-types.min.js" integrity="sha512-M1OTu9xD1JPdXo2cOeJI+Z/f8P6E/pqK9ug3G8PRNLw1caUePewEmpFYKSYh4LEz483qnyB/UTlgX1Q4VCEsKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/index.min.js"></script>
<script>window.FontAwesome = window['fontawesome-svg-core']</script>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" integrity="sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=" crossorigin="anonymous">

<div id="app"></div>