From 429fbc2b10e3e3f0245d032733d88e7b5ce811f8 Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Thu, 18 Jan 2024 19:28:20 +0800 Subject: [PATCH 1/4] Add `.ts` parser --- .eslintrc.cjs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 59a6007..562e470 100644 --- 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: [ From 3ce6f393e8bdb6c7503b067472a60ea66f4fc716 Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Thu, 18 Jan 2024 23:56:30 +0800 Subject: [PATCH 2/4] Add navbar --- package-lock.json | 9 ++++ package.json | 1 + public/close.svg | 3 -- public/comclub_logo.png | Bin 0 -> 3430 bytes public/menu.svg | 3 -- src/App.css | 4 +- src/App.jsx | 81 +++--------------------------- src/assets/react.svg | 1 - src/index.css | 5 +- src/layout/NavigationBar.css | 13 +++++ src/layout/NavigationBar.jsx | 16 ++++++ src/layout/NavigationMenu.css | 38 ++++++++++++++ src/layout/NavigationMenu.jsx | 61 ++++++++++++++++++++++ src/layout/NavigationMenuItem.css | 13 +++++ src/layout/NavigationMenuItem.tsx | 25 +++++++++ tailwind.config.js | 6 ++- 16 files changed, 192 insertions(+), 87 deletions(-) delete mode 100644 public/close.svg create mode 100644 public/comclub_logo.png delete mode 100644 public/menu.svg delete mode 100644 src/assets/react.svg create mode 100644 src/layout/NavigationBar.css create mode 100644 src/layout/NavigationBar.jsx create mode 100644 src/layout/NavigationMenu.css create mode 100644 src/layout/NavigationMenu.jsx create mode 100644 src/layout/NavigationMenuItem.css create mode 100644 src/layout/NavigationMenuItem.tsx diff --git a/package-lock.json b/package-lock.json index 1533572..4d189c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.0.1", "react-router-dom": "^6.21.1" }, "devDependencies": { @@ -4397,6 +4398,14 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index d6f6a7b..20357e5 100644 --- 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 deleted file mode 100644 index 16a4d7d..0000000 --- a/public/close.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/comclub_logo.png b/public/comclub_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..65826bc3edec436351f5fba901429343eba335a5 GIT binary patch literal 3430 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 - - \ No newline at end of file diff --git a/src/App.css b/src/App.css index 83854f7..7fc387d 100644 --- 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 index 24d1d21..1c5bcbc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,87 +1,18 @@ -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 */} -
- {/* Navigation bar */} -
- {/* Logo */} -
- -

NUSComputing

- -
- - {/* Navigation Links */} - - - {/* Mobile Navigation */} -
- menu setToggle(!toggle)} - /> -
-
- - Foo - - - Foo - - - Bar - -
-
-
-
+
+
{/* Main content */} -
+
} /> diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/index.css b/src/index.css index b41d687..4f05264 100644 --- 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:opsz@9..40&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 new file mode 100644 index 0000000..406f482 --- /dev/null +++ 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 new file mode 100644 index 0000000..1a18fd4 --- /dev/null +++ b/src/layout/NavigationBar.jsx @@ -0,0 +1,16 @@ +import { Link } from 'react-router-dom'; +import NavigationMenu from './NavigationMenu'; +import './NavigationBar.css'; + +function NavigationBar() { + return ( +
+ + + + +
+ ); +} + +export default NavigationBar; diff --git a/src/layout/NavigationMenu.css b/src/layout/NavigationMenu.css new file mode 100644 index 0000000..90e1e10 --- /dev/null +++ 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 new file mode 100644 index 0000000..8c26a1b --- /dev/null +++ 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 ( + <> +
+ { + Object.entries(navigationLinks) + .map(([label, link], key) => { + return ; + }) + } +
+ +
+
setIsOpen(!isOpen)} + > + { + !isOpen + ? + : + } +
+
+ { + Object.entries(navigationLinks) + .map(([label, link], key) => { + return ; + }) + } +
+
+ + ); +} + +export default NavigationMenu; diff --git a/src/layout/NavigationMenuItem.css b/src/layout/NavigationMenuItem.css new file mode 100644 index 0000000..34c08ef --- /dev/null +++ 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 new file mode 100644 index 0000000..74a3054 --- /dev/null +++ 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 ( + + {props.label} + + ); +} + +export default NavigationMenuItem; diff --git a/tailwind.config.js b/tailwind.config.js index ff9b2c5..1135580 100644 --- 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: ` From 71638938f43aee648a6cd0dfb0058dda376bb89a Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Fri, 19 Jan 2024 00:05:27 +0800 Subject: [PATCH 3/4] Update website favicon and title --- index.html | 4 ++-- public/vite.svg | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) delete mode 100644 public/vite.svg diff --git a/index.html b/index.html index 136f921..93ef8b9 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + NUS Students' Computing Club
diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From c672b90f9a3b3303b72e61206184989e5bd9a5ae Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Mon, 22 Jan 2024 12:06:09 +0800 Subject: [PATCH 4/4] Reorganize header --- src/App.jsx | 5 +---- src/layout/NavigationBar.jsx | 14 ++++++++------ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 1c5bcbc..86793a2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,10 +6,7 @@ import './App.css'; function App() { return ( <> - {/* Header */} -
- -
+ {/* Main content */}
diff --git a/src/layout/NavigationBar.jsx b/src/layout/NavigationBar.jsx index 1a18fd4..52d1c31 100644 --- a/src/layout/NavigationBar.jsx +++ b/src/layout/NavigationBar.jsx @@ -4,12 +4,14 @@ import './NavigationBar.css'; function NavigationBar() { return ( -
- - - - -
+
+
+ + + + +
+
); }