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: [ 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/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 0000000..65826bc Binary files /dev/null and b/public/comclub_logo.png differ diff --git a/public/menu.svg b/public/menu.svg deleted file mode 100644 index 318d5ef..0000000 --- a/public/menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file 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 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..86793a2 100644 --- 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 */} -
- {/* 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..52d1c31 --- /dev/null +++ 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 ( +
+
+ + + + +
+
+ ); +} + +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: `