common-header-lib 0.0.1

package/assets/images/successful.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4084_36639)">
+<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" fill="#258750"/>
+</g>
+<defs>
+<clipPath id="clip0_4084_36639">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/user-name.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 15.6667C3.44649 13.6021 6.08918 12.3333 9 12.3333C11.9108 12.3333 14.5535 13.6021 16.5 15.6667M12.75 5.25C12.75 7.32107 11.0711 9 9 9C6.92893 9 5.25 7.32107 5.25 5.25C5.25 3.17893 6.92893 1.5 9 1.5C11.0711 1.5 12.75 3.17893 12.75 5.25Z" stroke="#676879" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/scss/_sidebar.scss

@@ -0,0 +1,267 @@
+.modal-dialog.sidebar-outer{
+  transition: none !important;
+  transform: none !important;
+  float: left;
+  width: 100%;
+  max-width: 100%;
+  pointer-events: auto;
+  margin: 0px;
+  padding-bottom: 87px;
+  overflow: auto;
+  height: 100vh;
+  position: static;
+}
+.sidebar-container{
+  // width: 520px;
+  width: 420px;
+  position: fixed;
+  top: 0px;
+  right: -520px;
+  height: 100vh;
+  max-width: 100%;
+  transition: all 0.3s ease;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  background-color: var(--white);
+}
+.modal.show{
+
+  .sidebar-container{
+    right: 0px;
+  }
+}
+.moonIcon{
+  display: none;
+}
+.sidebar-footer{
+
+  padding: $padding-medium;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  width: 100%;
+
+  .sidebar-footer-inner {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: end;
+    padding-top: $padding-top-medium;
+  }
+}
+.sidebar-outer{
+
+  height: 100vh;
+
+  .sidebar-header{
+
+    padding: 12px 15px;
+    background-color: var(--grey-background);
+
+    .sh-top{
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      button{
+        height: 24px;
+      }
+
+      .sh-top-left{
+
+        .common-btn{
+          padding-left: 0px;
+        }
+      }
+    }
+
+
+    .sh-bottom-content{
+
+      // margin-top: 12px;
+      // position: relative;
+      padding-left: 14px !important;
+
+      .sb-admin-img {
+        height: 70px;
+        width: 70px;
+        border-radius: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        background-color: var(--grey-background);
+      }
+
+      .sh-bottom-content-ls {
+        display: flex;
+        align-items: center;
+        // margin-top: 8px;
+
+        span{
+          font-size: 20px;
+          position: relative;
+          top: -1px;
+        }
+      }
+
+      h4{
+        // margin-bottom: 8px !important;
+      }
+
+    }
+  }
+
+
+  // .sidebar-body{
+
+  //   padding: 12px 20px;
+  //   float: left;
+  //   width: 100%;
+
+  //   .sb-list{
+  //     float: left;
+  //     width: 100%;
+
+  //     ul{
+  //       float: left;
+  //       width: 100%;
+  //       list-style: none;
+  //       padding-left: 0px;
+
+  //       li{
+  //         display: flex;
+  //         // align-items: end;
+  //         padding: 8px 2px;
+  //         cursor: pointer;
+
+  //         &:hover{
+  //           // background-color: var(--hover-common);
+  //         }
+
+  //         span{
+  //           margin-right: 12px;
+  //         }
+  //       }
+  //     }
+  //   }
+
+  //   .sb-theme{
+
+  //     display: flex;
+  //     justify-content: space-between;
+  //     width: 100%;
+  //     float: left;
+  //     padding-top: 14px;
+
+  //     ul{
+  //       display: flex;
+  //       list-style: none;
+  //       margin-top: 8px !important;
+  //       padding-left: 0px;
+
+  //       li{
+
+  //         margin-right: 8px;
+  //         position: relative;
+
+  //         .select-color-scheme-outer{
+  //           height: 25px;
+  //           width: 25px;
+  //           border-radius: 100%;
+  //           float: left;
+
+  //           &.blue{
+  //             background-color: #0073EA;
+  //           }
+
+  //           &.murrey{
+  //             background-color: #880E4F;
+  //           }
+
+  //           &.indigo{
+  //             background-color: #4A148C;
+  //           }
+  //         }
+
+  //         .sb-radio-container {
+  //           display: inline-block;
+  //           position: absolute;
+  //           cursor: pointer;
+  //           width: 25px;
+  //           height: 25px;
+  //           top: 0px;
+  //           left: 0px;
+
+  //           span {
+  //             position: absolute;
+  //             top: 0;
+  //             left: 0;
+  //             height: 25px;
+  //             width: 25px;
+  //           }
+
+  //           span:after {
+  //             content: "";
+  //             position: absolute;
+  //             display: none;
+  //             transform: rotate(45deg);
+  //             border-bottom: 2px solid #fff;
+  //             border-right: 2px solid #fff;
+  //             height: 13px;
+  //             width: 6px;
+  //             left: 10px;
+  //             top: 4px;
+  //           }
+  //         }
+
+  //         .sb-radio-container input {
+  //           position: absolute;
+  //           opacity: 0;
+  //           cursor: pointer;
+  //           left: 0px;
+  //           top: 0px;
+  //           width: 25px;
+  //           height: 25px;
+  //           z-index: 2;
+  //         }
+
+  //         .sb-radio-container input:checked ~ span:after {
+  //           display: block;
+  //         }
+
+  //       }
+  //     }
+
+  //     .sb-theme-right-outer {
+  //       display: flex;
+  //       align-items: center;
+  //       margin-top: 8px;
+
+  //       span.material-symbols-rounded{
+  //         margin-left: 8px;
+  //       }
+  //     }
+
+  //   }
+
+  //   .sb-fonts{
+  //     float: left;
+  //     width: 100%;
+
+  //     .sb-fonts-outer{
+  //       display: flex;
+  //       align-items: center;
+  //       margin-top: 12px;
+
+  //       .radio-outer{
+  //         margin-right: 16px;
+  //       }
+  //     }
+  //   }
+
+  // }
+}