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.
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">
© 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)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.