Merge pull request #7 from leslieyip02/add-navbar

Add navigation bar
NUSComputingDev · Jan 24, 2024 · d65b12b · d65b12b
2 parents d382e27 + c672b90
commit d65b12b
Show file tree

Hide file tree

Showing 19 changed files with 197 additions and 92 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -3,11 +3,13 @@ module.exports = {
   env: { browser: true, es2020: true },
   extends: [
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
   ],
   ignorePatterns: ['dist'],
+  parser: '@typescript-eslint/parser',
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   settings: { react: { version: '18.2' } },
   plugins: [

diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang='en'>
   <head>
     <meta charset='UTF-8'>
-    <link rel='icon' type='image/svg+xml' href='/vite.svg'>
+    <link rel='icon' type='image/png' href='/comclub_logo.png'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-    <title>Vite + React</title>
+    <title>NUS Students' Computing Club</title>
   </head>
   <body>
     <div id='root'></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-router-dom": "^6.21.1"
   },
   "devDependencies": {

diff --git a/public/close.svg b/public/close.svg
diff --git a/public/comclub_logo.png b/public/comclub_logo.png
diff --git a/public/menu.svg b/public/menu.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.css b/src/App.css
@@ -1,9 +1,9 @@
-#root {
+/* #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
-}
+} */
 
 .logo {
   height: 6em;

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,87 +1,15 @@
-import { useState } from 'react';
-import './App.css';
-import { Routes, Route, Link } from 'react-router-dom';
-import menu from '/menu.svg';
-import close from '/close.svg';
+import { Routes, Route } from 'react-router-dom';
 import { Home } from './pages';
+import NavigationBar from './layout/NavigationBar';
+import './App.css';
 
 function App() {
-  const [toggle, setToggle] = useState(false);
-
   return (
     <>
-      {/* Header */}
-      <header>
-        {/* Navigation bar */}
-        <div className='w-full flex justify-between items-center'>
-          {/* Logo */}
-          <div className='text-white font-bold text-2xl'>
-            <Link to='/'>
-              <h1>NUSComputing</h1>
-            </Link>
-          </div>
-
-          {/* Navigation Links */}
-          <div className={`
-            relativez-20
-            text-white
-            md:flex
-            hidden
-            list-none
-            flex-row
-            justify-between
-            items-center
-            flex-initial
-            text-xl
-          `}>
-            <Link to='' className='mx-6 hover:scale-[1.1]'>
-              Foo
-            </Link>
-            <Link to='' className='mx-6 hover:scale-[1.1]'>
-              Foo
-            </Link>
-            <Link to='' className='mx-6 hover:scale-[1.1]'>
-              Bar
-            </Link>
-          </div>
-
-          {/* Mobile Navigation */}
-          <div className='md:hidden flex flex-1 items-end justify-end'>
-            <img
-              src={toggle ? close : menu}
-              alt='menu'
-              className='w-[28px] h-[28px] object-contain cursor-pointer'
-              onClick={() => setToggle(!toggle)}
-            />
-            <div className={`
-                ${!toggle ? 'hidden' : 'flex'}
-                p-6 mx-4 my-2 top-20 right-0 absolute z-20 rounded-xl`
-            }>
-              <div className={`
-                flex
-                justify-end
-                items-centerflex-1
-                flex-col
-                gap-4
-                text-white
-              `}>
-                <Link to='' className='mx-6 hover:scale-[1.1]'>
-                  Foo
-                </Link>
-                <Link to='' className='mx-6 hover:scale-[1.1]'>
-                  Foo
-                </Link>
-                <Link to='' className='mx-6 hover:scale-[1.1]'>
-                  Bar
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
+      <NavigationBar />
 
       {/* Main content */}
-      <main className='w-full min-h-[100vh] overflow-hidden'>
+      <main className='w-full min-h-[100vh]'>
         <Routes>
           <Route path='/' element={<Home />} />
         </Routes>

diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&family=Lexend&family=Quicksand&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -7,8 +8,8 @@
 
 html, body {
   font-family: 'Montserrat', sans-serif;
-  background-color: #4a69bd;
-  color: #ffffff;
+  /* background-color: #4a69bd; */
+  /* color: #ffffff; */
 }
 
 a {

diff --git a/src/layout/NavigationBar.css b/src/layout/NavigationBar.css
@@ -0,0 +1,13 @@
+.navigation-bar {
+  @apply
+    fixed
+    flex
+    items-center
+    justify-between
+    w-full
+    px-8
+    md:px-20
+    py-4
+    bg-white
+  ;
+}
diff --git a/src/layout/NavigationBar.jsx b/src/layout/NavigationBar.jsx
@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+import NavigationMenu from './NavigationMenu';
+import './NavigationBar.css';
+
+function NavigationBar() {
+  return (
+    <header className='w-full h-20'>
+      <div className='navigation-bar'>
+        <Link to='/'>
+          <img src='comclub_logo.png' className='h-12 p-2'></img>
+        </Link>
+        <NavigationMenu />
+      </div>
+    </header>
+  );
+}
+
+export default NavigationBar;
diff --git a/src/layout/NavigationMenu.css b/src/layout/NavigationMenu.css
@@ -0,0 +1,38 @@
+.navigation-menu-container {
+  @apply
+    flex-initial
+    flex-row
+    space-x-8
+    justify-between
+    items-center
+    text-xl
+    hidden
+    md:block
+  ;
+}
+
+.navigation-menu-icon {
+  @apply
+    object-contain
+    cursor-pointer
+    p-1
+    text-primary
+    hover:rounded-3xl
+    hover:bg-gray-100
+  ;
+}
+
+.navigation-menu-dropdown {
+  @apply
+    absolute
+    top-12
+    right-0
+    flex
+    flex-col
+    rounded-md
+    ring-1
+    ring-outline/5
+    bg-white
+    shadow-lg
+  ;
+}
diff --git a/src/layout/NavigationMenu.jsx b/src/layout/NavigationMenu.jsx
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { IoMenu, IoClose } from 'react-icons/io5';
+import NavigationMenuItem from './NavigationMenuItem';
+import './NavigationMenu.css';
+
+function NavigationMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const navigationLinks = {
+    'Home': '/',
+    'About': '/about',
+    'Events': '/events',
+    'Resources': '/resources',
+    'Photos': '/photos',
+  };
+
+  return (
+    <>
+      <div className='navigation-menu-container'>
+        {
+          Object.entries(navigationLinks)
+            .map(([label, link], key) => {
+              return <NavigationMenuItem
+                label={label}
+                link={link}
+                key={key}
+              />;
+            })
+        }
+      </div>
+
+      <div className='md:hidden relative'>
+        <div
+          className='navigation-menu-icon'
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {
+            !isOpen
+              ? <IoMenu className='h-10 w-auto' />
+              : <IoClose className='h-10 w-auto' />
+          }
+        </div>
+        <div className={`navigation-menu-dropdown ${!isOpen ? 'hidden' : ''}`}>
+          {
+            Object.entries(navigationLinks)
+              .map(([label, link], key) => {
+                return <NavigationMenuItem
+                  label={label}
+                  link={link}
+                  dropdown={true}
+                  key={key}
+                />;
+              })
+          }
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default NavigationMenu;
diff --git a/src/layout/NavigationMenuItem.css b/src/layout/NavigationMenuItem.css
@@ -0,0 +1,13 @@
+.navigation-menu-item {
+  @apply
+    relative
+    font-heading
+    p-4
+    md:px-0
+    text-black
+    hover:scale-[1.1]
+    hover:rounded-md
+    hover:bg-gray-100
+    md:hover:bg-transparent
+  ;
+}
diff --git a/src/layout/NavigationMenuItem.tsx b/src/layout/NavigationMenuItem.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './NavigationMenuItem.css';
+
+interface NavigationMenuItemProps {
+  link: string;
+  label: string;
+  dropdown: boolean;
+}
+
+function NavigationMenuItem(props: NavigationMenuItemProps) {
+  return (
+    <Link
+      to={props.link}
+      className={`
+        navigation-menu-item
+        ${props.dropdown ? 'p-4 hover:rounded-md hover:bg-gray-100' : ''}
+      `}
+    >
+      {props.label}
+    </Link>
+  );
+}
+
+export default NavigationMenuItem;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,7 +5,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: '#4a69bd',
+        primary: '#365486',
+        outline: '#333333',
       },
       transitionTimingFunction: {
         'out-flex': 'cubic-bezier(0.05, 0.6, 0.4, 0.9)',
@@ -15,6 +16,9 @@ module.exports = {
       },
       fontFamily: {
         inter: ['Inter var', 'sans-serif'],
+        subheading: ['Quicksand', 'sans-serif'],
+        heading: ['"DM Sans"', 'sans-serif'],
+        body: ['Lexend', 'sans-serif'],
       },
       boxShadow: {
         card: `