Merge pull request #16 from itskdhere/fix-navbar

fix Navbar
ZeroDay-Alliance-SNU · Aug 31, 2024 · ffeedb2 · ffeedb2
2 parents fab3325 + 03e655c
commit ffeedb2
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 46 deletions.
diff --git a/src/App.css b/src/App.css
@@ -5,6 +5,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+::-webkit-scrollbar {
+  display: none;
+}
+
 * {
   margin: 0;
   padding: 0;

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -9,18 +9,19 @@ import {
   rem,
 } from "@mantine/core";
 import logo from "/src/assets/logo1.jpg";
+import { IconTerminal2 } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
-
 import classes from "./Navbar.module.css";
+import { Link } from "react-router-dom";
 
 const Navbar = () => {
   const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] =
     useDisclosure(false);
 
   return (
-    <Box >
+    <Box pb={60}>
       <header className={classes.header}>
-        <Group className={classes.appNameContainer} justify="space-around" h="100%">
+        <Group className={classes.container} justify="space-around" h="100%">
           <Group>
             <img className={classes.logo} src={logo} alt="Logo" />
             <h3>
@@ -38,18 +39,26 @@ const Navbar = () => {
               Events
             </a>
             <a href="#" className={classes.link}>
-              Team
+              Teams
             </a>
             <a href="#" className={classes.link}>
-              FAQS
+              FAQs
             </a>
             <a href="#" className={classes.link}>
               Contact
             </a>
           </Group>
 
           <Group visibleFrom="sm">
-            <Button variant="default">CLI</Button>
+            <Link to="/cli">
+              <Button
+                leftSection={<IconTerminal2 />}
+                variant="default"
+                className={classes.cliButton}
+              >
+                CLI
+              </Button>
+            </Link>
           </Group>
 
           <Burger
@@ -66,14 +75,12 @@ const Navbar = () => {
         opened={drawerOpened}
         onClose={closeDrawer}
         size="100%"
-        padding="md"
-        title="Zeroday Alliance"
+        title="ZeroDay Alliance"
         hiddenFrom="sm"
         zIndex={1000000}
       >
-        <ScrollArea h={`calc(100vh - ${rem(80)})`} mx="-md">
+        <ScrollArea>
           <Divider my="sm" />
-
           <a href="#" className={classes.link}>
             Home
           </a>
@@ -92,8 +99,16 @@ const Navbar = () => {
 
           <Divider my="sm" />
 
-          <Group justify="center" grow pb="xl" px="md">
-            <Button variant="default">CLI</Button>
+          <Group grow justify="center" pb="xl">
+            <Link to="/cli">
+              <Button
+                leftSection={<IconTerminal2 />}
+                variant="default"
+                className={classes.cliButton}
+              >
+                CLI
+              </Button>
+            </Link>
           </Group>
         </ScrollArea>
       </Drawer>

diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css
@@ -9,6 +9,13 @@
   top: 0;
   left: 0;
   right: 0;
+  z-index: 1000;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .logo {
@@ -19,66 +26,55 @@
 }
 
 .appName {
+  font-size: var(--mantine-font-size-xl);
+  font-weight: 500;
   text-decoration: none;
   color: white;
 }
 
 .link {
-  color: white;
   display: flex;
   align-items: center;
-  height: 100%;
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
+  font-size: var(--mantine-font-size-sm);
+  padding-left: var(--mantine-spacing-sm);
+  padding-right: var(--mantine-spacing-sm);
   text-decoration: none;
   font-weight: 500;
-  font-size: var(--mantine-font-size-sm);
+  height: 100%;
+  color: white;
 
   @media (max-width: $mantine-breakpoint-sm) {
-    color: black;
     height: rem(42px);
+    border-radius: 0px;
     width: 100%;
   }
+
   .change {
     background-color: white;
   }
 
   @mixin hover {
-    background-color: light-dark(
-      var(--mantine-color-gray-4),
-      var(--mantine-color-dark-3)
-    );
-    color: black;
+    background-color: rgba(170, 170, 170, 0.2);
+    border-radius: var(--mantine-radius-md);
   }
 }
 
-.draw {
-  background: linear-gradient(90deg, #071726 22%, #0a3642 68%, #0b4752 84%);
-}
-
-.subLink {
-  width: 100%;
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+.cliButton {
+  font-weight: 500;
+  font-size: var(--mantine-font-size-sm);
+  padding-left: var(--mantine-spacing-sm);
+  padding-right: var(--mantine-spacing-sm);
   border-radius: var(--mantine-radius-md);
+  text-decoration: none;
+  width: 100%;
+  color: white;
+  background-color: var(--mantine-color-indigo-6);
 
   @mixin hover {
-    background-color: light-dark(
-      var(--mantine-color-gray-0),
-      var(--mantine-color-dark-6)
-    );
-    color: black;
+    background-color: var(--mantine-color-indigo-7);
   }
 }
 
-.dropdownFooter {
-  background-color: light-dark(
-    var(--mantine-color-gray-0),
-    var(--mantine-color-dark-7)
-  );
-  margin: calc(var(--mantine-spacing-md) * -1);
-  margin-top: var(--mantine-spacing-sm);
-  padding: var(--mantine-spacing-md) calc(var(--mantine-spacing-md) * 2);
-  padding-bottom: var(--mantine-spacing-xl);
-  border-top: rem(1px) solid
-    light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+.draw {
+  background: linear-gradient(90deg, #071726 22%, #0a3642 68%, #0b4752 84%);
 }