PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, November 19, 2022

[FIXED] How to get user icon clickable to show user profile

 November 19, 2022     bootstrap-4, css, html, icons     No comments   

Issue

I'm trying to make the user profile icon clickable to show the user info (email address) and logout in bootstrap/html. Does anyone know how to do this in bootstrap or html like it is done here in an example using angular materials.

User Profile Icon Screenshot

Here is a codepen and snippet of what I currently

Codepen HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,no-store" />
<meta http-equiv="expires" content="0" />

<title>AZDOE: Core Demo</title>
<link rel="stylesheet" href="https://design.linq.com/10.4.0/vendors/angular-material- 
theme.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/storybook/angular/assets/linq- 
 snackpaq-core.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/theme/blueberry-muffin.css">
<link rel="stylesheet" href="../css/design-system-overrides/stylesheet.min.css">
<link rel="stylesheet" 
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" 
   integrity="sha384-TxKWSXbsweFt0o2WqfkfJRRNVaPdzXJ/YLqgStggBVRREXkwU7OKz+xXtqOU4u8+" 
   crossorigin="anonymous">
<link rel="stylesheet" href="../styles/master_common.css">
<link rel="stylesheet" href="../styles/master_760.css">
<link rel="stylesheet" href="../css/select2.css">   
<link rel="stylesheet" href="../css/core2.css"> 
</head>

<body class="loggedin">
  <div class="site-wrapper">
  <!-- HEADER -->
   <header id="header">
     <nav class="navbar navbar-expand-lg mb-2">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
      target="#sidebar- 
       wrapper"  aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle 
         navigation">
            <span class="material-icons">menu
            </span>
        </button>

    <a href='/' class="navbar-brand">
      <img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
    </a>    
   

    <div class="vl"></div>

    <div class="nav-container">

      <ul class="nav-items">
        <!-- Navigation -->

        <!-- Dropdown menu -->
        <li class="nav-item-select nav-item-dropdown">
          <a class="dropdown-trigger" href="#">Select SFA</a>
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="vl"></div>
    <div class="nav-container">

      <ul class="nav-items">
        <!-- Navigation -->

        <!-- Dropdown menu -->
        <li class="nav-item-select nav-item-dropdown">
          <a class="dropdown-trigger" href="#">Select Program Year</a>
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="navbar-collapse collapse" id="Div1">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
          <a href="#" class="nav-link" title="Settings"><i class="fas fa-search"></i></a>
        </li>

        <li class="nav-item rounded-icon">
          <a href="#" class="nav-link" title="Settings"><i class="fas fa-user"></i><b 
     class="caret"></b></a>
        </li>
      </ul>
    </div>
  </nav>

</header>
<!-- SPONSOR INFO SECTION -->

 <main role="main" id="main">
  <div id="wrapper">
    <!-- SIDEBAR -->
    <div id="sidebar-wrapper" class="sb-wrapper collapse">
        <i class="fas fa-chevron-circle-left"></i>
      
      <div class="list-wrapper">
        <div class="nav-wrapper">
          <ul class="sidebar-nav">
            <li>
              <a href="#" v-b-tooltip.hover.right title="Entity Manager">
                <div> Entity Manager</div>
              </a>
            </li>
           .....

      </div>

    </div>

    <!-- CONTENT -->
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div id="midcol-nslp" class="p-3">
         
          </div>
        </div>
      </div>
    </div>
    </div>
    <div class="clearfix"></div>

 </main>

 <footer class="mt-auto fixed-bottom">
   <div class="container-fluid py-2">
    <div class="row">
      <div class="col text-center small">
        &copy; 2020 Colyar Technology Solutions, LLC. All rights reserved.
      </div>
      <div class="text-sm-center text-md-right d-flex justify-content-end align-items-center">
        <ul class="nav">
          <li class="nav-item">
            <a href="mailto:info@colyar.com?subject=Website Test"><i class="fas fa-envelope- 
       open-text" data-toggle="tooltip" data-placement="top" title="Contact Support"></i></a>
          </li>
        </ul>
      </div>
      </div>
    </div>
   </footer>
    <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Popper JS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> 
       </script>

      <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> 
   </script>
    <script src="../JS/app.js"></script>


    <script>
        $("#menu-toggle").click(function (e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        });

             document.getElementById("datetime").innerHTML = formatAMPM();

            function formatAMPM() {
            var d = new Date(),
                minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : 
               d.getMinutes(),
                hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
                ampm = d.getHours() >= 12 ? 'pm' : 'am',
                months = 
          ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
            return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' 
       '+d.getFullYear()+' '+hours+':'+minutes+ampm;
            }
    </script>
    
 </body>

 </html>

Hopefully this is enough to help with what I'm trying to do.


Solution

You would want a single button dropdown, but and put your userinfo and logout inside the div and set the image icon style in the button instead.

https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns

Here is some sample code to get you started with.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="user-icon"></i></button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="info-header">Profile</div>
    <div class="user-email">richard.belding@bayside-hs.com</div>
    <button class="btn btn-primary>Logout</button
  </div>
</div>


Answered By - Jae
Answer Checked By - Terry (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing