Added notification 🔔

Author: tsaxena4k

components/Layout.jsx

@@ -22,11 +22,14 @@ export default function Layout({ children }) {
                 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
             </Head>
             <main className={user ? "#80cbc4 blue lighten-3" : "#80cbc4 teal lighten-3"}>
-                <div className="col s12 m12 right-align" style={{margin:'10px 10px'}}>
+                <div className="col s12 m12 right-align" style={{ margin: '20px 20px' }}>
                     <a className={user ? 'waves-effect waves-light btn-small blue left' : 'waves-effect waves-light btn-small left'} onClick={() => Router.replace("/")}><AiTwotoneHome /></a>&nbsp;
                     <a className={!user ? "waves-effect waves-light btn-small modal-trigger" : "waves-effect waves-light btn-small modal-trigger blue"} href="#modal1">About</a>&nbsp;
-                    <i className="btn-small blue"><MdNotifications /></i>
+                    <a className={user?"btn-small blue notification dropdown-trigger":"btn-small notification dropdown-trigger"} data-target='dropdown1'><MdNotifications /><span class="badgen red">1</span></a>
                 </div>
+                <ul id='dropdown1' class='dropdown-content'>
+                    <li><a >Welcome</a></li>
+                </ul>
                 <div className="container  valign-wrapper">
                     <div className="row">
                         <div className="col s12 m12">

style.css

@@ -15,4 +15,15 @@ a{
 }
 .row,.horizontal{
     margin-bottom: 0;
+}
+.notification{
+    position: relative;
+}
+.badgen{
+    position: absolute;
+    top: -15px;
+    right: -10px;
+    padding: 0px 10px;
+    border-radius: 50%;
+    color: white;
 }