header design

css/main.css

-:root{--primary:#9800bc;--dark-color:#333;--light-color:#fff;--border-radius:0}.app-header{padding:15px;background:var(--primary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;color:#fff}.user{display:-webkit-box;display:-ms-flexbox;display:flex}.user p{line-height:1.5}.user_designation{color:var(--text-color-light)}.user_name{margin-bottom:0 !important;font-weight:var(--font-weight-bold);color:var(--primary)}.user_avatar{margin-right:15px}.user_avatar img{width:75px;-o-object-fit:contain;object-fit:contain;height:75px;border-radius:50%;border:2px solid #fff;padding:9px}
+:root{--primary: #375471;--dark-color: #333;--light-color: #fff;--text-color: #333;--text-color-light: rgba(255, 255, 255, 0.9);--border-radius: 0;--font-weight: 400;--font-weight-light: 300;--font-weight-bold: 600}.scr-text{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}.app-header{padding:15px;background:var(--primary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}.app-header>a{color:#fff}.app-header .action{display:-webkit-box;display:-ms-flexbox;display:flex}.app-header .action a{display:block;padding:5px 15px;margin-bottom:5px;opacity:0.8;-webkit-transition:all ease-in-out 0.3s;-o-transition:all ease-in-out 0.3s;transition:all ease-in-out 0.3s}.app-header .action a:hover{opacity:1}.app-header .action>a,.app-header .action .action_text{color:#fff;font-size:1.5rem}.user{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline:15px auto}.user p{line-height:1.5;margin-bottom:0}.user_designation{color:var(--text-color-light);margin-bottom:5px !important}.user_name{margin-bottom:0 !important;font-weight:var(--font-weight-bold);color:var(--light-color);font-size:1.25rem}.user_avatar{margin-right:15px}.user_avatar img{width:65px;-o-object-fit:contain;object-fit:contain;height:65px;border-radius:50%;border:2px solid var(--light-color);padding:9px}.toggle{height:35px;width:35px;-webkit-box-flex:0;-ms-flex:0 0 35px;flex:0 0 35px;border:0;margin-right:15px;padding:7px 5px;position:relative;outline:0 !important;background:transparent;cursor:pointer}.toggle span{height:2px;width:80%;background:var(--light-color);display:block;position:absolute;right:0;left:0;margin:auto;-webkit-transition:all ease 0.3s;-o-transition:all ease 0.3s;transition:all ease 0.3s}.toggle span:nth-child(1){top:5px}.toggle span:nth-child(2){top:15px}.toggle span:nth-child(3){top:25px}.toggle:not(.active) span:nth-child(2){width:calc(100% - 15px);left:-8px}.toggle:not(.active) span:nth-child(3){width:calc(100% - 20px);left:-11px}.toggle.active span{-webkit-transition:all ease 0.3s;-o-transition:all ease 0.3s;transition:all ease 0.3s}.toggle.active span:first-child{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);top:15px}.toggle.active span:nth-child(2){opacity:0}.toggle.active span:nth-child(3){-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);top:15px}.toggle.dot-toggle{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.toggle.dot-toggle span{width:5px;height:5px;border-radius:5px;background:#333}
 /*# sourceMappingURL=main.css.map */
\ No newline at end of file

css/main.css.map

 {
     "version": 3,
-    "mappings": "AAAA,AAAA,KAAK,AAAA,CACD,SAAS,CAAA,OAAC,CACV,YAAY,CAAA,IAAC,CACb,aAAa,CAAA,IAAC,CACd,eAAe,CAAA,CAAC,CACnB,AAGD,AAAA,WAAW,AAAC,CACR,OAAO,CAAE,IAAI,CACb,UAAU,CAAE,cAAc,CAC1B,OAAO,CAAE,IAAI,CACb,eAAe,CAAE,aAAa,CAC9B,KAAK,CAAE,IAAI,CACd,AAED,AAAA,KAAK,AAAC,CACL,OAAO,CAAE,IAAI,CAuBb,AAxBD,AAEC,KAFI,CAEJ,CAAC,AAAC,CACD,WAAW,CAAE,GAAG,CAChB,AACA,AAAD,iBAAa,AAAC,CACb,KAAK,CAAE,uBAAuB,CAC9B,AACA,AAAD,UAAM,AAAC,CACN,aAAa,CAAE,YAAY,CAC3B,WAAW,CAAE,uBAAuB,CACpC,KAAK,CAAE,cAAc,CACrB,AACA,AAAD,YAAQ,AAAC,CACR,YAAY,CAAE,IAAI,CASlB,AAVA,AAEM,YAFC,CAED,GAAG,AAAA,CACC,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,OAAO,CACnB,MAAM,CAAE,IAAI,CACZ,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,cAAc,CACtB,OAAO,CAAE,GAAG,CACf",
+    "mappings": "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",
     "sources": [
         "../scss/main.scss"
     ],

index.html

@@ -7,11 +7,19 @@
 
     <link rel="stylesheet" href="css/bootstrap.css">
     <link rel="stylesheet" href="css/main.css">
-    <title>Hello, world!</title>
+    <link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">
+    <link rel="shortcut icon" href="/images/envigo.png" type="image/x-icon">
+    <title>Envigo Dashboard</title>
   </head>
   <body>
     
     <header class="app-header">
+        <button class="toggle">
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
         <div class="user">
             <div class="user_avatar">
                 <img src="images/logo.png" alt="user_avatar">
@@ -21,13 +29,26 @@
                 <p class="user_designation">Marketing Agency</p>
             </div>
         </div>
-        <h1 class="app-heading">Building <span class="golden">IPMT</span></h1>
+        <!-- <h1 class="app-heading">Dashboard <span class="golden">UI</span></h1> -->
         <div class="action">
-            <a href="#" class="action_search"><span class="scr-text">Search</span></a>
-            <span class="action_spacer"></span>
-            <a href="#" class="action_grid-view active"><span class="scr-text">Grid View</span></a>
-            <a href="" class="action_list-view"><span class="scr-text">List View</span></a>
+            <a href="#"><i class="bi bi-bell-fill"></i><span class="scr-text">Notification</span></a>
+            <a href="#"><i class="bi bi-envelope-fill"></i><span class="scr-text">Messages</span></a>
+            <a href="#"><i class="bi bi-list-task"></i><span class="scr-text">Task</span></a>            
+            
+            <div class="dropdown">
+                <a class="dropdown-toggle action_text" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+                John Deo
+                </a>
+              
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                  <li><a class="dropdown-item" href="#">Action</a></li>
+                  <li><a class="dropdown-item" href="#">Another action</a></li>
+                  <li><a class="dropdown-item" href="#">Something else here</a></li>
+                </ul>
+              </div>
         </div>
+
+
     </header>
     <section class="content-wrap">
         <aside class="app-sidebar">

scss/main.scss

-:root{
-    --primary:#9800bc;
-    --dark-color:#333;
-    --light-color:#fff;
-    --border-radius:0;
+:root {
+    --primary: #375471;
+    --dark-color: #333;
+    --light-color: #fff;
+    --text-color: #333;
+    --text-color-light: rgba(255, 255, 255, 0.9);
+    --border-radius: 0;
+    --font-weight: 400;
+    --font-weight-light: 300;
+    --font-weight-bold: 600;
 }
 
+.scr-text {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
+}
 
 .app-header {
     padding: 15px;
     background: var(--primary);
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    > a {
+        color: #fff;
+    }
+    .action {
+        display: flex;
+        a {
+            display: block;
+            padding: 5px 15px;
+
+            margin-bottom: 5px;
+            opacity: 0.8;
+            transition: all ease-in-out 0.3s;
+            &:hover {
+                opacity: 1;
+            }
+        }
+        > a, .action_text {
             color: #fff;
+            font-size: 1.5rem;
+        }
+    }
 }
 
 .user {
     display: flex;
+    margin-right: auto;
+    align-items: center;
+    margin-inline: 15px auto;
     p {
         line-height: 1.5;
+        margin-bottom: 0;
     }
     &_designation {
         color: var(--text-color-light);
+        margin-bottom: 5px !important;
     }
     &_name {
         margin-bottom: 0 !important;
         font-weight: var(--font-weight-bold);
-		color: var(--primary);
+        color: var(--light-color);
+        font-size: 1.25rem;
     }
     &_avatar {
         margin-right: 15px;
-        img{
-            width: 75px;
+        img {
+            width: 65px;
             object-fit: contain;
-            height: 75px;
+            height: 65px;
             border-radius: 50%;
-            border: 2px solid #fff;
+            border: 2px solid var(--light-color);
             padding: 9px;
         }
     }
 }
+
+.toggle {
+    height: 35px;
+    width: 35px;
+    flex: 0 0 35px;
+    border: 0;
+    margin-right: 15px;
+    padding: 7px 5px;
+    position: relative;
+    outline: 0 !important;
+    background: transparent;
+    cursor: pointer;
+    // display: none;
+
+    span {
+        height: 2px;
+        width: 80%;
+        background: var(--light-color);
+        display: block;
+        position: absolute;
+        right: 0;
+        left: 0;
+        margin: auto;
+        transition: all ease 0.3s;
+        &:nth-child(1) {
+            top: 5px;
+        }
+        &:nth-child(2) {
+            top: 15px;
+        }
+        &:nth-child(3) {
+            top: 25px;
+        }
+    }
+    &:not(.active) {
+        span {
+            &:nth-child(2) {
+                width: calc(100% - 15px);
+                left: -8px;
+            }
+            &:nth-child(3) {
+                width: calc(100% - 20px);
+                left: -11px;
+            }
+        }
+    }
+    &.active {
+        span {
+            transition: all ease 0.3s;
+            &:first-child {
+                transform: rotate(45deg);
+                top: 15px;
+            }
+            &:nth-child(2) {
+                opacity: 0;
+            }
+            &:nth-child(3) {
+                transform: rotate(-45deg);
+                top: 15px;
+            }
+        }
+    }
+
+    &.dot-toggle {
+        transform: scale(0.8);
+        span {
+            width: 5px;
+            height: 5px;
+            border-radius: 5px;
+            background: #333;
+        }
+    }
+}