uploan side_notification

TomaVic-code · May 22, 2020 · bd19da9 · bd19da9
1 parent e1c4072
commit bd19da9
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 97 deletions.
diff --git a/index.html b/index.html
@@ -5,42 +5,59 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>Document</title>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
   <link rel="stylesheet" href="style/normalize.css">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style/style.css">
+  <link rel="stylesheet" href="style/side_notification.css">
 </head>
 <body>
 
+  <nav class="nav">
+    <section class="nav__main">
+      <div class="nav__main__logo"></div>
+      <button id="widget__notifications" onclick="toggleNotifications()" class="nav__main__widget nav__main__widget_notifications">
+        <i class="material-icons icon-set">notification_important</i>
+      </button>
+      <!-- <button id="widget__other" onclick="toggleOther()" class="nav__widget nav__widget_notifications">
+        <i class="icon_size_s icon-notification"></i>
+      </button> -->
+      <div class="nav__main__decoration_line"></div>
+      <a href="#" class="nav__main__btn nav__main__btn_link">
+        <i class="material-icons icon-set">home</i>
+        <h2 class="nav__main__btn_name">Dashboard</h2>
+      </a>
+      <a href="#" class="nav__main__btn nav__main__btn_link">
+        <i class="material-icons icon-set">menu_book</i>
+        <h2 class="nav__main__btn_name">Contacts</h2>
+      </a>
+      <a href="#" class="nav__main__btn nav__main__btn_link">
+        <i class="material-icons icon-set">assessment</i>
+        <h2 class="nav__main__btn_name">Reports</h2>
+      </a>
+      <a href="#" class="nav__main__btn nav__main__btn_link">
+        <i class="material-icons icon-set">settings</i>
+        <h2 class="nav__main__btn_name">Admin</h2>
+      </a>
+    </section>
+    <section class="nav__side__notification">
+      <div class="nav__side__notificatin_header">
+        <i class="material-icons">notifications</i>
+        <h3 class="nav__side__notificatin_header-title">Notifications</h3>
+        <div class="nav__side__notification_header-close">
+          <i class="material-icons click-close">close</i>
+        </div>
+      </div>
+      <div class="nav__side__notificatin_content">
+
+      </div>    
+    </section>
+  </nav>
 
-  <div class="nav">
-
-    <div class="nav__logo"></div>
-    <button id="widget__notifications" onclick="toggleNotifications()" class="nav__widget nav__widget_notifications">
-      <i class="icon_size_s icon-notification"></i>
-    </button>
-    <!-- <button id="widget__other" onclick="toggleOther()" class="nav__widget nav__widget_notifications">
-      <i class="icon_size_s icon-notification"></i>
-    </button> -->
-    <div class="nav__decoration_line"></div>
-    <a href="#" class="nav__btn nav__btn_link">
-      <i class="icon_size_s icon-dashboard"></i>
-      <h2 class="nav__btn_name">Dashboard</h2>
-    </a>
-    <a href="#" class="nav__btn nav__btn_link">
-      <i class="icon_size_s icon-contacts"></i>
-      <h2 class="nav__btn_name">Contacts</h2>
-    </a>
-    <a href="#" class="nav__btn nav__btn_link">
-      <i class="icon_size_s icon-reports"></i>
-      <h2 class="nav__btn_name">Reports</h2>
-    </a>
-    <a href="#" class="nav__btn nav__btn_link">
-      <i class="icon_size_s icon-admin"></i>
-      <h2 class="nav__btn_name">Admin</h2>
-    </a>
-  </div>
-  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
-  <!-- <script src="https://code.jquery.com/jquery-3.5.0.js"></script> -->
-  <script src="./js/script.js"></script>
+
+    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
+    <!-- <script src="https://code.jquery.com/jquery-3.5.0.js"></script> -->
+    <script src="./js/script.js"></script>
 </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -1,10 +1,24 @@
 
 function toggleNotifications() {
     var button = document.getElementById("widget__notifications");
-    button.classList.toggle("nav__widget_active");
+    button.classList.toggle("nav__main__widget_active");
   }
 
 function toggleOther() {
     var button = document.getElementById("widget__other");
-    button.classList.toggle("nav__widget_active");
-}
+    button.classList.toggle("nav__main__widget_active");
+}
+
+let side_not = document.querySelector('.nav__main__widget');
+    side_not.addEventListener('click', function(){
+  let side_appear = document.querySelector('.nav__side__notification');
+      side_appear.classList.toggle('nav__side__notification-active');
+});
+
+let closeClick = document.querySelector('.click-close');
+    closeClick.addEventListener('click', function(){
+  let side_appear = document.querySelector('.nav__side__notification');
+      side_appear.classList.remove('nav__side__notification-active');
+      var button = document.getElementById("widget__notifications");
+          button.classList.remove("nav__main__widget_active");
+});
diff --git a/style/side_notification.css b/style/side_notification.css
@@ -0,0 +1,48 @@
+.nav {
+  position: relative;
+}
+
+.nav__side__notification {
+  visibility: hidden;
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  left: 72px;
+  background-color: #313F50;
+  transform: translateX(-100%);
+  transform-origin: left;
+  transition: 0.5s ease-in-out;
+  width: 416px;
+  height: 100vh;
+  z-index: -1;
+}
+
+.nav__side__notification-active {
+  visibility: visible;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.nav__side__notificatin_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center ;
+  background-color: #313F50;
+  color: #fff;
+  pointer-events: none;
+  margin: 0 30px;
+}
+
+.nav__side__notificatin_header-title {
+  /* margin-left: -180px; */
+}
+
+.click-close {
+  pointer-events: all;
+  cursor: pointer;
+}
+
+.nav__side__notificatin_content {
+  max-height: 100vh;
+  overflow: auto;
+}
diff --git a/style/style.css b/style/style.css
@@ -2,7 +2,7 @@ html {
   font-family: 'Roboto', sans-serif;
 }
 
-.nav {
+.nav__main {
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -14,74 +14,75 @@ html {
   background-color: #233040;
 }
 
-.nav__logo {
+.nav__main__logo {
   background-color: #384D67;
   width: 72px;
   height: 72px;
 }
 
-.nav__widget {
+.nav__main__widget {
   background-color: transparent;
   border: 2px solid #162335;
   box-sizing: border-box;
   padding: 12px;
   border-radius: 8px;
-  margin: 16px 0 0;;
+  margin: 16px 0 0;
 }
 
-.nav__widget:first-of-type {
+.nav__main__widget:first-of-type {
   margin-top: 24px;
 }
 
-.nav__widget:hover {
+.nav__main__widget:hover {
   box-sizing: border-box;
   border: 2px solid #1A1E24;
   cursor: pointer;
 }
 
-.nav__widget:focus {
+.nav__main__widget:focus {
   outline-style: none;
 }
 
 /* Toggles from JS */
 
-.nav__widget_active {
+.nav__main__widget_active {
   background-color: #146EB4;
   border: 2px solid #1A1E24;
 }
 
-.nav__decoration_line {
+.nav__main__decoration_line {
   background-color: #162335;
   width: 24px;
   height: 2px;
   margin: 24px 0 0;
 }
 
-.nav__btn {
+.nav__main__btn {
   padding: 14px;
   margin: 16px 0 0px;
   border-radius: 8px;
 }
 
-.nav__btn:first-of-type {
+.nav__main__btn:first-of-type {
   margin: 24px 0 0 ;
 }
 
-.nav__btn:hover {
+.nav__main__btn:hover {
   background-color: #101926;
 }
 
-.nav__btn:active {
+.nav__main__btn:active {
   background-color: #09101A;
 } 
 
-.nav__btn_link {
+.nav__main__btn_link {
   background-color: #162335;
+  text-decoration: none;
 }
 
 /* Tooltip - Button Name  */
 
-.nav__btn_name {
+.nav__main__btn_name {
   visibility: hidden;
   opacity: 0;
   display: flex;
@@ -101,9 +102,10 @@ html {
   margin: 0 0 0 80px;
   pointer-events: none;
   letter-spacing: .8px;
+  z-index: 100;
 }
 
-.nav__btn_name::before {
+.nav__main__btn_name::before {
   content: '';
   position: absolute;
   min-width: 16px;
@@ -115,65 +117,25 @@ html {
   z-index: -1;
 }
 
-.nav__btn:hover .nav__btn_name {
+.nav__main__btn:hover .nav__main__btn_name {
   visibility: visible;
   opacity: 1;
   transform: translate(-18px, -34px);
 }
 
-.nav__btn:active .nav__btn_name::before {
+.nav__main__btn:active .nav__main__btn_name::before {
   background-color: #1B81D0;
 }
 
-.nav__btn:active .nav__btn_name {
+.nav__main__btn:active .nav__main__btn_name {
   background-color: #1B81D0;
 }
 
 /* Icons */
 
-.icon_size_s {
-  width: 24px;
-  height: 24px;
-}
-
-.icon-other {
-  display: block;
-  margin: 0 auto;
-  background-image: url('../Icons/Vector-other.png');
-  background-repeat: no-repeat;
-}
-
-.icon-notification {
-  display: block;
-  margin: 0 auto;
-  background-image: url('../Icons/notifications.svg');
-  background-repeat: no-repeat;
-}
-
-.icon-dashboard {
-  display: block;
-  margin: 0 auto;
-  background-image: url('../Icons/dashboard.svg');
-  background-repeat: no-repeat;
-}
-
-.icon-contacts {
-  display: block;
-  margin: 0 auto;
-  background-image: url('../Icons/contacts.svg');
-  background-repeat: no-repeat;
-}
-
-.icon-reports {
-  display: block;
-  margin: 0 auto;
-  background-image: url('../Icons/reports.svg');
-  background-repeat: no-repeat;
+.icon-set {
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-
-.icon-admin {
-  display: block;
-  margin: 0 auto;
-  background-image: url('../Icons/admin.svg');
-  background-repeat: no-repeat;
-}