diff --git a/README.md b/README.md
index 1bf490d7c5b5104e6b8481a16764abcd8033d5c6..62c0cb8770be98a42ed334c5740087d5638232fc 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
This component is currently a work in progress, right now it does work as a stand alone component and in tandem with the myuw-app-bar component.
-Right now all of the data is hardcoded in as a placeholder, this will be updated soon to use dynamic data pulled in from the MyUW session endpoint. I am also looking into ways for users to include custom link items using slots, but getting everything to style properly is proving difficult.
+Right now all of the data is hardcoded in as a placeholder, this will be updated soon to use dynamic data pulled in from the MyUW session endpoint.
## Testing
@@ -11,4 +11,8 @@ You can view a test of this component being used with the myuw-app-bar by openin
- **Login URL (login-url):** The URL to redirect users to on login
- **Logout URL (logout-url):** The Logout URL to redirect users to on logout
-- **Session Endpoint (session-endpoint):** The endpoint URL for session info
\ No newline at end of file
+- **Session Endpoint (session-endpoint):** The endpoint URL for session info
+
+#### Slots
+
+- **Profile Navigation Item (nav-item):** Add a custom item to the profile button's navigation menu, this slot expects an `<a>` tag
\ No newline at end of file
diff --git a/index.html b/index.html
index a5015ebdacbfd93a9c9a7c68841f1524451477c8..229297aa1f1ed132d8361bc295e66b6e3a6317e3 100644
--- a/index.html
+++ b/index.html
@@ -1,32 +1,25 @@
<html>
<head>
<style>
- *{
+ body {
padding: 0;
margin: 0;
}
- nav {
- text-align: right;
- background: #c5050c;
- height: 50px;
- width: calc(100% - 10px);
- max-width: 100%;
- padding-top: 10px;
- padding-right: 10px;
- }
</style>
<script src="https://unpkg.com/@myuw-web-components/myuw-app-bar@0.1.1"></script>
<link rel="import" href="myuw-profile.html">
</head>
<body>
- <myuw-app-bar appName="Bucky Backup">
+ <myuw-app-bar>
<myuw-profile
slot="myuw-profile"
login-url="https://wisc.edu/"
logout-url="https://wisc.edu/"
session-endpoint="https://my.wisc.edu/portal/web/session.json"
>
+ <a href="https://wisc.edu" slot="nav-item">UW Madison Home</a>
+ <a href="https://wisc.edu" slot="nav-item">STAR</a>
</myuw-profile>
</myuw-app-bar>
</body>
diff --git a/myuw-profile.css b/myuw-profile.css
index 28a20ae9ca931b30e1b92ce36fae484d03b02eee..210d00e823cfd1fcd101509e577448bbb1593fa2 100644
--- a/myuw-profile.css
+++ b/myuw-profile.css
@@ -21,6 +21,18 @@
height: 40px;
background: teal;
border-radius: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+}
+
+#myuw-profile-circle-initial {
+ padding: 0;
+ margin: 0;
+ font-weight: 100;
+ user-select: none;
+ text-transform: capitalize;
}
#myuw-profile-wrapper {
@@ -47,7 +59,7 @@
transform-origin: top right;
transform: scale(0);
opacity: 0;
- transition: all .25s ease;
+ transition: all .25s cubic-bezier(0.0, 0.0, 0.2, 1);
-webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
@@ -64,41 +76,36 @@
margin: 0;
}
-#myuw-profile-nav.visible a,
-#myuw-profile-nav.visible p {
- opacity: 1;
-}
-
#myuw-profile-nav a,
-#myuw-profile-nav p {
- opacity: 0;
+#myuw-profile-nav p,
+::slotted(a),
+::slotted(p){
transition: all .3s ease;
position: relative;
display: block;
padding: 14px 16px;
- /* transition: background-color .15s ease; */
color: black;
text-decoration: none;
+ background-color: #f9f9f9;
+ border-bottom: solid 1px #e5e5e5;
+ user-select: none;
}
#myuw-profile-nav a:first-child,
#myuw-profile-nav p:first-child {
padding: 14px 16px;
font-weight: bold;
+ background-color: white;
}
-#myuw-profile-wrapper a:hover,
-#myuw-profile-wrapper p:hover {
- background-color: rgba(158,158,158,0.2);
+#myuw-profile-nav a:first-child:hover,
+#myuw-profile-nav p:first-child:hover {
+ background-color: white;
}
-:global(#myuw-profile-nav li a) {
- transition: all .3s ease;
- position: relative;
- display: block;
- padding: 14px 16px;
- background-color: teal;
- /* transition: background-color .15s ease; */
- color: black;
- text-decoration: none;
+#myuw-profile-wrapper a:hover,
+#myuw-profile-wrapper p:hover,
+::slotted(a:hover),
+::slotted(p:hover) {
+ background-color: rgba(158,158,158,0.2);
}
\ No newline at end of file
diff --git a/myuw-profile.html b/myuw-profile.html
index 5c236faac2375aeeec3f476ac79fafea52088481..c60f3bec5304284c65c4360e41a92590233179b3 100644
--- a/myuw-profile.html
+++ b/myuw-profile.html
@@ -5,13 +5,15 @@
<a href="#" id="myuw-profile-login">Login</a>
<div id="myuw-profile-wrapper">
- <div id="myuw-profile-circle"></div>
+ <div id="myuw-profile-circle">
+ <p id="myuw-profile-circle-initial">B</p>
+ </div>
<div id="myuw-profile-nav">
- <p>Bucky</p>
- <slot name="list-item"></slot>
+ <p id="myuw-profile-nav-user">Bucky</p>
+ <slot name="nav-item"></slot>
<a href="#">Settings</a>
- <a href="#">Logout</a>
+ <a id="myuw-profile-logout" href="#">Logout</a>
</div>
</div>
@@ -92,14 +94,25 @@ class MyUWProfile extends HTMLElement {
// Set the Login URL
this.shadowRoot.getElementById('myuw-profile-login').setAttribute('href', this['login-url']);
+ // Set the logout URL
+ this.shadowRoot.getElementById('myuw-profile-logout').setAttribute('href', this['logout-url']);
+
// Show / hide elements based on shib state
if(this.user){
+ // Hide login button
this.shadowRoot.getElementById('myuw-profile-login').classList.add('hidden');
-
+ // Show Profile circle
this.shadowRoot.getElementById('myuw-profile-wrapper').classList.remove('hidden');
+
+ // Add user's name to first menu item
+ this.shadowRoot.getElementById('myuw-profile-nav-user').innerHTML = this.user.firstName;
+
+ // Change the letter in the profile circle
+ this.shadowRoot.getElementById('myuw-profile-circle-initial').innerHTML = this.user.firstName.substring(0,1);
} else {
+ // Show Login Button
this.shadowRoot.getElementById('myuw-profile-login').classList.remove('hidden');
-
+ // Hide profile Circle
this.shadowRoot.getElementById('myuw-profile-wrapper').classList.add('hidden');
}
}