How to create Sign-In profile and Sign-Out mini Drop-Down?

 function shortcut_menu(){

?>

<style>

.cus-dropbtn {

    color: black;

    padding: 16px;

    border: none;

    background: white !important;

    text-decoration: none !important;

    font-size: 15px !important;

    text-transform: capitalize;

}

.cus-dropdown {

    position: relative;

    display: inline-block;

    height: 32px;

}

.cus-dropdown-content {

    display: none;

    position: absolute;

    background-color: #f1f1f1;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);

    z-index: 120;

    top: 33px;

}

.cus-dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}

.cus-dropdown-content a:hover {background-color: #f1f1f1;}

.cus-dropdown:hover .cus-dropdown-content {display: block;}

.cus-dropdown:hover .cus-dropbtn {background-color: white;}

.cus-dropdown-content:after {

bottom: 100%;

left: 50%;

border: solid transparent;

content: "";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

}

.cus-dropdown-content:after {

    border-color: rgba(213, 213, 213, 0);

    border-bottom-color: #d5d5d5;

    border-width: 9px;

    margin-left: -59px;

}

</style> 

</head>

<?php

global $current_user;

wp_get_current_user() ;

$username = $current_user->user_login;

$user_id = get_current_user_id();

$wcfmuser = wcfm_is_vendor( $user_id );

 if(wcfm_is_vendor( $user_id )){

$profile_url = site_url() . '/store-manager'; 

}

else{

$profile_url = site_url() . '/your-account';

}

 

if ( is_user_logged_in() ) {

?>

<div class="cus-dropdown">

  <a href="<?php echo site_url(); ?>/signin/" class="cus-dropbtn"><!--<i class="fas fa-user"></i> Hi ---><?php echo $username; ?></a>

  <div class="cus-dropdown-content">

    <a href="<?php echo $profile_url; ?>">Profile</a>

    <a href="<?php echo wp_logout_url( site_url() ); ?>">Sign Out</a>

  </div>

</div>

<?php

} else {

?>

<div class="cus-dropdown">

  <a href="<?php echo site_url(); ?>/signin/" class="cus-dropbtn"><i class="fas fa-user"></i> Sign In</a>

</div>

<?php

}

?>

<?php 

}

//add_action('wp_head', 'shortcut_menu'); 

add_shortcode('get_shortcut_menu', 'shortcut_menu');