[SCSE-262] Implement v2 Navbar

apps/web/features/layout/components/WebLayout.tsx

@@ -9,16 +9,15 @@ export const WebLayout = ({ children }: WebLayoutProps) => {
   const navbarProps: NavBarProps = {
     links: [
       { label: "Home", href: "/" },
-      { label: "Academics", href: "/academics" },
+      { label: "About", href: "/academics" },
       { label: "Events", href: "/events" },
+      { label: "Academics", href: "/academics" },
+      { label: "Learn", href: "/learn" },
       { label: "Sponsors", href: "/sponsors" },
-      { label: "Contact", href: "/contact" },
-      { label: "BLOG", href: "/blog", menuLinkStyle: "button.golden" },
     ],
     logoProps: {
       src: "/scse-logo.png",
       alt: "scse logo",
-      text: "NTU School of Computer Science & Engineering Club",
     },
   };
   const footerProps: FooterProps = {

apps/web/pages/_app.tsx

@@ -2,10 +2,12 @@ import "../styles/globals.css";
 import type { AppProps } from "next/app";
 import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "ui/theme";
-import "@fontsource/roboto/400.css";
-import "@fontsource/roboto/700.css";
-import "@fontsource/roboto-slab/400.css";
-import "@fontsource/poppins/400.css";
+import "@fontsource/work-sans/300.css";
+import "@fontsource/work-sans/400.css";
+import "@fontsource/work-sans/600.css";
+import "@fontsource/work-sans/700.css";
+import "ui/fonts/styles.css"; // for custom fonts not available on @fontsource
+
 import { WebLayout } from "@/features/layout";
 
 const App = ({ Component, pageProps }: AppProps) => {

packages/ui/components/blog-card/BlogCardContent.tsx

@@ -19,13 +19,13 @@ export const BlogCardContent = ({
         color="gray.700"
         fontSize="2xl"
         fontFamily="body"
-        _hover={{ cursor: "pointer", color: "brand.blue" }}
+        _hover={{ cursor: "pointer", color: "brand.navy.medium" }}
       >
         {title}
       </Heading>
 
       {/* Date */}
-      <Text color="brand.gray.mid" _before={{ content: '"🕓 "' }}>
+      <Text color="brand.gray.medium" _before={{ content: '"🕓 "' }}>
         {date}
       </Text>
 

packages/ui/components/blog-card/BlogCardImage.tsx

@@ -33,7 +33,7 @@ export const BlogCardImage = ({ alt, src, ...props }: BlogCardImageProps) => {
         <Box
           h="100%"
           w="100%"
-          bgColor="brand.blackAlpha.mid"
+          bgColor="brand.blackAlpha.medium"
           display="flex"
           justifyContent="center"
           alignItems="center"

packages/ui/components/faq/Qna.tsx

@@ -8,7 +8,7 @@ export interface QnaProps {
 export const Qna = ({ question, answer }: QnaProps) => {
   return (
     <Flex
-      borderColor="brand.blue"
+      borderColor="brand.navy.medium"
       justifyContent="center"
       flexDirection="column"
       marginBottom="30px"

packages/ui/components/navbar/Logo.tsx

@@ -1,14 +1,13 @@
 import React from "react";
-import { Box, Text, Stack, Link } from "@chakra-ui/react";
+import { Box, Stack, Link } from "@chakra-ui/react";
 import { Image } from "../image";
 
 export interface LogoProps {
   src: string;
   alt: string;
-  text?: string;
 }
 
-export const Logo = ({ src, alt, text }: LogoProps) => {
+export const Logo = ({ src, alt }: LogoProps) => {
   return (
     <Link href="/" _hover={{ textDecoration: "none" }}>
       <Stack align="center" justify={"flex-start"} direction={"row"}>
@@ -19,13 +18,6 @@ export const Logo = ({ src, alt, text }: LogoProps) => {
         >
           <Image src={src} alt={alt} width={100} height={100} />
         </Box>
-        <Text
-          fontSize={[12, 12, 24, 24]}
-          fontWeight="bold"
-          transitionDuration="200ms"
-        >
-          {text}
-        </Text>
       </Stack>
     </Link>
   );

packages/ui/components/navbar/MenuItems.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Stack } from "@chakra-ui/react";
+import { Box, Link, Stack, Text } from "@chakra-ui/react";
 import { MenuLink, MenuLinkProps } from "./MenuLink";
 
 interface MenuItemProps {
@@ -10,17 +10,19 @@ interface MenuItemProps {
 export const MenuItems = ({ isOpen = false, links }: MenuItemProps) => {
   return (
     <Box
-      display={{ base: isOpen ? "block" : "none", xl: "block" }}
+      display={{ base: isOpen ? "flex" : "none", xl: "flex" }}
       flexBasis={{ base: "100%", md: "auto" }}
+      flexDir={{ base: "column", xl: "row" }}
+      justifyContent="space-between"
       marginLeft={10}
+      minW="90%"
     >
       <Stack
         spacing={8}
         align={{ base: "left", xl: "center" }}
         justify={"flex-end"}
         direction={{ base: "column", xl: "row" }}
         pt={0}
-        fontSize={{ base: 22, xl: 15 }}
         fontWeight="bold"
       >
         {links.map((link) => {
@@ -29,11 +31,28 @@ export const MenuItems = ({ isOpen = false, links }: MenuItemProps) => {
               key={link.label}
               label={link.label}
               href={link.href}
-              menuLinkStyle={link.menuLinkStyle}
             />
           );
         })}
       </Stack>
+
+      {/* CTA Button -> Contact */}
+      <Link
+        href={"/contact"}
+        _hover={{
+          bgColor: "brand.red.dark"
+        }}
+        bgColor="brand.red.medium"
+        color="white"
+        px="16px"
+        py="10px"
+        mt={{ base: 8, xl: 0 }}
+        borderRadius="6px"
+        w="max-content"
+        display={{ base: "block", xl: "block" }}
+      >
+        <Text display="block">Contact</Text>
+      </Link>
     </Box>
   );
 };

packages/ui/components/navbar/MenuLink.tsx

@@ -5,52 +5,24 @@ import { useRouter } from "next/router";
 export interface MenuLinkProps {
   label: string;
   href: string;
-  menuLinkStyle?: "default" | "button.golden";
 }
 
-export const MenuLink = ({
-  label,
-  href = "/",
-  menuLinkStyle = "default",
-}: MenuLinkProps) => {
-  switch (menuLinkStyle) {
-    case "button.golden":
-      return <ButtonMenuLinkGolden label={label} href={href} />;
-    default:
-      return <DefaultMenuLink label={label} href={href} />;
-  }
-};
-
-const DefaultMenuLink = ({ label, href }: MenuLinkProps) => {
+export const MenuLink = ({ label, href = "/" }: MenuLinkProps) => {
   const router = useRouter();
   return (
     <Link
       href={href}
-      color={router?.pathname === href ? "brand.blue" : "brand.black"}
-      _hover={{ color: "brand.blue" }}
-      _focus={{ color: "brand.blue" }}
+      color={router?.pathname === href ? "brand.red.dark" : "brand.navy.dark"}
+      _hover={{ color: "brand.red.dark" }}
+      _focus={{ color: "brand.red.dark" }}
     >
-      <Text display="block" fontFamily="Poppins">
+      <Text
+        display="block"
+        fontWeight="semibold"
+        fontSize="18px"
+      >
         {label}
       </Text>
     </Link>
   );
 };
-
-const ButtonMenuLinkGolden = ({ label, href }: MenuLinkProps) => {
-  return (
-    <Link
-      href={href}
-      _hover={{
-        bgColor: "transparent",
-        color: "brand.orange.mid",
-      }}
-      bgColor="brand.orange.light"
-      px={4}
-      py={2}
-      borderRadius="5px"
-    >
-      <Text display="block">{label}</Text>
-    </Link>
-  );
-};

packages/ui/components/navbar/MenuToggle.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box } from "@chakra-ui/react";
-import { CloseIcon, HamburgerIcon } from "@chakra-ui/icons";
+import { HamburgerIcon } from "@chakra-ui/icons";
 
 interface MenuToggleProps {
   toggle: React.MouseEventHandler<HTMLDivElement>;
@@ -12,14 +12,14 @@ export const MenuToggle = ({ toggle, isOpen }: MenuToggleProps) => {
     <Box
       display={{ base: "block", xl: "none" }}
       onClick={toggle}
-      _hover={{ color: "brand.blue", cursor: "pointer" }}
+      color="brand.white"
+      bgColor={ isOpen ? "brand.red.dark" : "brand.red.medium" }
+      p="6px"
+      borderRadius="6px"
+      _hover={{ bgColor: "brand.red.dark", cursor: "pointer" }}
       marginLeft={{ base: 5, md: 10 }}
     >
-      {isOpen ? (
-        <CloseIcon boxSize={{ base: 5, md: 8 }} />
-      ) : (
-        <HamburgerIcon boxSize={{ base: 8, md: 10 }} />
-      )}
+      <HamburgerIcon boxSize={{ base: 6, md: 8 }} />
     </Box>
   );
 };

packages/ui/components/navbar/NavBar.stories.tsx

@@ -22,22 +22,5 @@ Default.args = {
   logoProps: {
     src: "/scse-logo.png",
     alt: "scse logo",
-    text: "NTU School of Computer Science & Engineering Club",
-  },
-};
-export const GoldenButton = Template.bind({});
-GoldenButton.args = {
-  links: [
-    { label: "Home", href: "/" },
-    { label: "Academics", href: "/academics" },
-    { label: "Events", href: "/events" },
-    { label: "Sponsors", href: "/sponsors" },
-    { label: "Contact", href: "/contact" },
-    { label: "BLOG", href: "/blog", menuLinkStyle: "button.golden" },
-  ],
-  logoProps: {
-    src: "/scse-logo.png",
-    alt: "scse logo",
-    text: "NTU School of Computer Science & Engineering Club",
   },
 };

packages/ui/components/navbar/NavBar.tsx

@@ -4,7 +4,7 @@ import { Logo, LogoProps } from "./Logo";
 import { MenuToggle } from "./MenuToggle";
 import { MenuItems } from "./MenuItems";
 import { NavDrawer } from "./NavDrawer";
-import { useDisclosure } from "@chakra-ui/react";
+import { HStack, useDisclosure } from "@chakra-ui/react";
 import { MenuLinkProps } from "./MenuLink";
 
 export interface NavBarProps {
@@ -17,8 +17,10 @@ export const NavBar = ({ links, logoProps }: NavBarProps) => {
 
   return (
     <NavBarContainer>
-      <Logo src={logoProps.src} alt={logoProps.alt} text={logoProps.text} />
-      <MenuItems links={links} />
+      <HStack columnGap="25px" minW={{ base: "auto", xl: "100%" }}>
+        <Logo src={logoProps.src} alt={logoProps.alt} />
+        <MenuItems links={links} />
+      </HStack>
 
       {/* For small screen sizes */}
       <MenuToggle toggle={onOpen} isOpen={isOpen} />

packages/ui/components/navbar/NavBarContainer.tsx

@@ -12,16 +12,16 @@ export const NavBarContainer = ({
   return (
     <Flex
       as="nav"
+      position="fixed"
+      zIndex={100}
+      backdropFilter="auto"
+      backdropBlur="base"
       align="center"
       justify="space-between"
-      w="100%"
-      p={[3, 3, 5, 5]}
+      w="100vw"
       pl={4}
       pr={8}
-      bg="brand.white"
-      color="brand.black"
-      borderBottom="1px"
-      borderColor="brand.gray.midlight"
+      color="brand.navy-dark"
       {...props}
     >
       {children}

packages/ui/fonts/styles.css

@@ -0,0 +1,13 @@
+/* Custom Font */
+@font-face {
+  font-family: 'Garet';
+  src: url('./garet/Garet-Book.otf') format('opentype'), /* OpenType (.otf) */
+      url('./garet/Garet-Book.ttf') format('truetype'), /* TrueType (.ttf) */
+      url('./garet/Garet-Book.woff') format('woff'), /* Web Open Font Format (.woff) */
+      url('./garet/Garet-Book.woff2') format('woff2'), /* Web Open Font Format 2 (.woff2) */
+      /* Heavy */
+      url('./garet/Garet-Heavy.otf') format('opentype'), /* OpenType (.otf) */
+      url('./garet/Garet-Heavy.ttf') format('truetype'), /* TrueType (.ttf) */
+      url('./garet/Garet-Heavy.woff') format('woff'), /* Web Open Font Format (.woff) */
+      url('./garet/Garet-Heavy.woff2') format('woff2'); /* Web Open Font Format 2 (.woff2) */
+}

packages/ui/package.json

@@ -42,6 +42,7 @@
   "dependencies": {
     "@fontsource/poppins": "^4.5.10",
     "@fontsource/roboto": "^4.5.8",
-    "@fontsource/roboto-slab": "^4.5.9"
+    "@fontsource/roboto-slab": "^4.5.9",
+    "@fontsource/work-sans": "^4.5.14"
   }
 }

packages/ui/theme/components/Button.ts

@@ -25,7 +25,7 @@ const Button = defineStyleConfig({
   // Styles for the visual style variations
   variants: {
     'primary-blue': {
-      bg: 'brand.blue',
+      bg: 'brand.navy.medium',
     },
     'primary-black': {
       bg: 'black',

packages/ui/theme/foundations/colors.ts

@@ -1,22 +1,30 @@
 const colors = {
   brand: {
-    blue: "#2B6CB0", //blue.600
+    // Main SCSE brand colors
+    navy: {
+      light: "#6181AB",
+      medium: "#254876",
+      dark: "#0F2B50",
+    },
+    red: {
+      light: "#EF8891",
+      medium: "#DD616B",
+      dark: "#DE4652",
+    },
+
+    // Other Colors
     black: "#000000",
     white: "#FFFFFF",
-    orange: {
-      light: "#ED8936", //300
-      mid: "#ED8936", //400
-    },
     gray: {
       light: "#F7FAFC", //gray.50
-      midlight: "#E2E8F0", //gray.200
-      mid: "#A0AEC0", //gray.400
-      midDark: "#718096", //gray.500
+      mediumLight: "#E2E8F0", //gray.200
+      medium: "#A0AEC0", //gray.400
+      mediumDark: "#718096", //gray.500
       dark: "#2D3748", //gray.700
     },
     blackAlpha: {
       light: "RGBA(0, 0, 0, 0.04)", //50
-      mid: "RGBA(0, 0, 0, 0.16)", //300
+      medium: "RGBA(0, 0, 0, 0.16)", //300
       dark: "RGBA(0, 0, 0, 0.36)", //500
       darker: "RGBA(0, 0, 0, 0.48)", //600
     },