New navbar in progress

2024-09-24 08:26:03 +05:30
parent 2d91a5741f
commit e12cf8c21e
7 changed files with 264 additions and 105 deletions
--- a/src/components/navbar.module.css
+++ b/src/components/navbar.module.css
@ -0,0 +1,87 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+.navbar {
+    /* position: fixed;
+    @apply transition-all duration-300 top-6 left-6 right-6; */
+    /* background-color: white;
+    border-radius: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1em 2em;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000; */
+  }
+  
+/*   .navbar a {
+    color: black;
+    text-decoration: none;
+    margin: 0 0.5em;
+    font-size: 1em;
+  }
+  
+  .navbar a:hover {
+    color: #555;
+  }
+  
+  .left,
+  .right {
+    display: flex;
+    align-items: center;
+  }
+  
+  .navbar .center a {
+    color: black;
+    text-decoration: none;
+    margin: 0 0;
+    font-size: 1em;
+  }
+  .center .logo {
+    height: 50px; /* Adjust the logo size as needed */
+  }
+  
+  .navbar-center .logo {
+    height: 50px; /* Adjust the logo size as needed */
+  }
+  
+  .fa-search,
+  .fa-user {
+    font-size: 1.2em;
+  }
+  
+  @media screen and (max-width: 768px) {
+    .navbar {
+      top: 1em;
+      left: 1em;
+      right: 1em;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  
+    .navbar-center {
+      margin: 1em 0;
+      align-self: center;
+    }
+  }
+  
+  .navbar a.active {
+    font-weight: bold;
+    border-bottom: 2px solid black;
+  }
+  
+  .navbar {
+    border-radius: 25px; /* Makes the corners more rounded */
+  }
+  
+  .navbar a {
+    font-size: 1.1em;
+  }
+  
+  .fa-search,
+  .fa-user {
+    font-size: 1.4em;
+  }
+   */