Merge pull request #256 from Dilpreet0501/nav

navbar added on top

Author: SUGAM-ARORA

package-lock.json

@@ -5,6 +5,11 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-free-regular": "^5.0.13",
+    "@fortawesome/fontawesome-free-solid": "^5.0.13",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "^5.15.19",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

package.json

@@ -26,6 +26,7 @@
   width: 350px;
   height: 45px;
   position: relative;
+  padding-right: 20px;
 }
 .searchbtn{
   position: absolute;

src/Components/Container.css

@@ -0,0 +1,99 @@
+.navbar {
+    width: 100%;
+    height: 100px;
+    background: #19162c;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
+    position: sticky;
+    top: 0;
+    z-index: 99999;
+  }
+  
+  #list {
+    display: inline;
+    padding: 20px;
+  }
+  
+  .mobview {
+    display: none;
+  }
+  
+  @media screen and (max-width: 1500px) {
+    .mobview {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+    }
+  
+    .bars {
+      padding: 20px;
+      cursor: pointer;
+    }
+  
+    .largeview {
+      display: none;
+    }
+  
+    .mobview #shortview {
+      position: absolute;
+      right: 15px;
+      top: 60px;
+      background: rgba(0, 0, 0, 0.8); 
+      border-radius: 10px; 
+      width: 200px;
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
+      z-index: 100000;
+      display: none;
+      transition: transform 0.3s cubic-bezier(0.17, 0.81, 0.38, 1.39);
+    }
+  
+    .mobview #shortview:after {
+      position: absolute;
+      content: "";
+      width: 10px;
+      height: 10px;
+      background: hsl(190, 85%, 40%); 
+      top: -5px;
+      right: 20px;
+      transform: rotate(45deg);
+    }
+  
+    #shortview.show {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  
+    .mobview #shortview ul {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+  
+    .mobview #shortview ul li {
+      list-style: none;
+      margin: 0;
+      width: 100%;
+      padding: 10px 15px;
+      cursor: pointer;
+      color: #757380; 
+      text-align: center;
+      font-size: 14px;
+      
+    }
+  
+    
+  
+    .mobview #shortview ul li:hover {
+      background: #19162c; /* Light background on hover */
+      color: #757380;
+      transition: 0.3s;
+    }
+  }
+  
+  
+