From 79a499e7359f60313b51eb04b6d2508fc6f06dc9 Mon Sep 17 00:00:00 2001 From: Sahil Gathe <65885329+IndiSnacks@users.noreply.github.com> Date: Sat, 18 May 2024 10:16:50 -0700 Subject: [PATCH 01/13] style: added some of th e styling to the navbar --- src/app/components/Navbar/Navbar.scss | 31 +++++++++++++++++++++++++++ src/app/components/Navbar/Navbar.tsx | 13 +++++++++-- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss index e83bede..5978450 100644 --- a/src/app/components/Navbar/Navbar.scss +++ b/src/app/components/Navbar/Navbar.scss @@ -62,4 +62,35 @@ nav { opacity: 0.25; } } + + .nav-title { + padding-bottom: 7.5px; + } + + .nav-date { + padding-top: 7.5px; + } + + .nav-link-list { + display: flex; + flex-direction: row; + } + + .nav-index { + align-items: end; + } + + .asterisk { + color: #212121; + opacity: 0.45; + } + + h2 { + font-size: 20px; + font-weight: 400px; + } + + h3 { + font-size: 18px; + } } diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx index cb27549..a1be4df 100644 --- a/src/app/components/Navbar/Navbar.tsx +++ b/src/app/components/Navbar/Navbar.tsx @@ -58,8 +58,13 @@ export default function Navbar() { className={`nav-container ${isHamburgerOpen ? 'panel-open is-active' : 'panel-close'}`} > -

UP-GRADE 2024

+

UP-GRADE 2024

+

+ UCSD Design Co
San Diego, CA +

+

JUNE 1ST TO AUGUST 13TH

+

****************************

+

****************************

Date: Sat, 18 May 2024 17:26:18 -0700 Subject: [PATCH 02/13] style: fixed some of the styling on the navbar --- src/app/components/Navbar/Navbar.scss | 28 ++++++++++++++------------- src/app/components/Navbar/Navbar.tsx | 13 ++++++++----- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss index 5978450..770571b 100644 --- a/src/app/components/Navbar/Navbar.scss +++ b/src/app/components/Navbar/Navbar.scss @@ -7,7 +7,7 @@ nav { padding-block: $main-padding-mobile-block; width: 100vw; max-width: 500px; - background: rgb(165, 237, 255); + background: rgb(255, 255, 255); height: 100dvh; display: flex; flex-direction: column; @@ -24,6 +24,11 @@ nav { transform: translateX(-100%); } + @media (max-width: $mobile-breakpoint) { + padding-inline: clamp(41.5px, 12px + 1.2vw, 40px); + padding-block: clamp(108px, 30px + 1.2vw, 40px); + } + @media (min-width: $mobile-breakpoint) { padding-inline: $main-padding-desktop-inline; padding-block: $main-padding-desktop-block; @@ -63,26 +68,23 @@ nav { } } - .nav-title { - padding-bottom: 7.5px; - } - - .nav-date { - padding-top: 7.5px; - } - .nav-link-list { display: flex; flex-direction: row; - } - - .nav-index { - align-items: end; + padding-bottom: 14px; + max-width: 310px; } .asterisk { + display: flex; + justify-content: space-between; color: #212121; opacity: 0.45; + max-width: 310px; + } + + h1 { + font-size: 32px; } h2 { diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx index a1be4df..34dcb57 100644 --- a/src/app/components/Navbar/Navbar.tsx +++ b/src/app/components/Navbar/Navbar.tsx @@ -58,13 +58,13 @@ export default function Navbar() { className={`nav-container ${isHamburgerOpen ? 'panel-open is-active' : 'panel-close'}`} > -

UP-GRADE 2024

+

UP-GRADE 2024

UCSD Design Co
San Diego, CA

-

JUNE 1ST TO AUGUST 13TH

+

JUNE 1ST TO AUGUST 13TH

-

****************************

+

*********************

-

****************************

+

*********************

Date: Fri, 24 May 2024 21:40:08 -0700 Subject: [PATCH 03/13] feat: number of astricks change dynapmically --- src/app/components/Navbar/Navbar.scss | 25 ++++++++++++ src/app/components/Navbar/Navbar.tsx | 56 +++++++++++++++++++++++++-- 2 files changed, 77 insertions(+), 4 deletions(-) diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss index 770571b..e88b20d 100644 --- a/src/app/components/Navbar/Navbar.scss +++ b/src/app/components/Navbar/Navbar.scss @@ -83,6 +83,22 @@ nav { max-width: 310px; } + .nav-footer { + position: fixed; + bottom: 0; + margin-bottom: 86px; + display: flex; + justify-content: center; + flex-direction: column; + } + + .add-me-to-cart { + color: #fcfcfc; + background-color: #212121; + height: 61.75px; + margin-bottom: 40px; + } + h1 { font-size: 32px; } @@ -95,4 +111,13 @@ nav { h3 { font-size: 18px; } + + button { + border-radius: 5px; + + &:hover { + background-color: #fcfcfc; + color: #212121; + } + } } diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx index 34dcb57..f2c207b 100644 --- a/src/app/components/Navbar/Navbar.tsx +++ b/src/app/components/Navbar/Navbar.tsx @@ -1,7 +1,7 @@ 'use client'; import Link from 'next/link'; import './Navbar.scss'; -import React, { useState } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import Hamburger from './Hamburger/Hamburger'; import FocusTrap from 'focus-trap-react'; @@ -45,6 +45,29 @@ export default function Navbar() { } }; + const [numAstericks, setNumAsterisks] = useState(0); + const navContainerRef = useRef(null); + + useEffect(() => { + //Dynamically set the # of astricks + //Get the width of the div and % by 20 + //that will be the # of asticks + const updateAsterisks = () => { + if (navContainerRef.current) { + const width = navContainerRef.current.offsetWidth; + const calcNumAstericks = Math.ceil(width / 10); + console.log(width); + console.log(calcNumAstericks); + setNumAsterisks(calcNumAstericks); + } + }; + + updateAsterisks(); + window.addEventListener('resize', updateAsterisks); + + return () => window.removeEventListener('resize', updateAsterisks); + }, []); + return (
@@ -86,7 +111,30 @@ export default function Navbar() { ))} -

*********************

+

+ {'*'.repeat(numAstericks)} +

+ +
+
+

Apply Now

+
+ + + +
+

+ THANK YOU FOR CHECKING OUT
UCSD DESIGN CO’S UP-GRADE +

+ +

+ hello@ucsddesign.co +

+ +
+
Date: Fri, 24 May 2024 22:17:32 -0700 Subject: [PATCH 04/13] feat: added undreline on hover --- src/app/components/Navbar/Navbar.scss | 20 ++++++++++++++++++++ src/app/components/Navbar/Navbar.tsx | 8 ++++---- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss index e88b20d..3f7d7ca 100644 --- a/src/app/components/Navbar/Navbar.scss +++ b/src/app/components/Navbar/Navbar.scss @@ -75,6 +75,26 @@ nav { max-width: 310px; } + .nav-link { + position: relative; + + &:before { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 2px; + background-color: #212121; + transition: width 0.3s ease-in; + } + + &:hover:before { + width: 100%; + left: 0; + } + } + .asterisk { display: flex; justify-content: space-between; diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx index f2c207b..48c8014 100644 --- a/src/app/components/Navbar/Navbar.tsx +++ b/src/app/components/Navbar/Navbar.tsx @@ -49,9 +49,9 @@ export default function Navbar() { const navContainerRef = useRef(null); useEffect(() => { - //Dynamically set the # of astricks - //Get the width of the div and % by 20 - //that will be the # of asticks + /** + * Dynamically set the number of astricks + */ const updateAsterisks = () => { if (navContainerRef.current) { const width = navContainerRef.current.offsetWidth; @@ -100,7 +100,7 @@ export default function Navbar() { }} >
-

{link.text.toUpperCase()}

{' '} +

{link.text.toUpperCase()}

{' '}

{' '} .0{links.indexOf(link) + 1}{' '} From 489b815295eedd035fe8151cb721185ab8f73d99 Mon Sep 17 00:00:00 2001 From: Sahil Gathe <65885329+IndiSnacks@users.noreply.github.com> Date: Tue, 28 May 2024 17:52:33 -0400 Subject: [PATCH 05/13] feat: nav link underlines; Add me to cart svg --- src/app/components/Navbar/Navbar.scss | 25 ++++++-- src/app/components/Navbar/Navbar.tsx | 89 +++++++++++++++++++++++++-- src/app/page.tsx | 4 ++ 3 files changed, 107 insertions(+), 11 deletions(-) diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss index 3f7d7ca..91d883e 100644 --- a/src/app/components/Navbar/Navbar.scss +++ b/src/app/components/Navbar/Navbar.scss @@ -95,6 +95,12 @@ nav { } } + .highlight { + position: absolute; + left: 10; + background-color: #f5ff85; + } + .asterisk { display: flex; justify-content: space-between; @@ -132,12 +138,21 @@ nav { font-size: 18px; } - button { + .add-me-to-cart { border-radius: 5px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } - &:hover { - background-color: #fcfcfc; - color: #212121; - } + .add-me-to-cart:hover { + background-color: #fcfcfc; + color: #212121; + } + + .add-me-to-cart:hover .svg-cart path { + stroke: #212121; + stroke-width: 2.25px; } } diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx index 48c8014..f824294 100644 --- a/src/app/components/Navbar/Navbar.tsx +++ b/src/app/components/Navbar/Navbar.tsx @@ -4,6 +4,10 @@ import './Navbar.scss'; import React, { useState, useEffect, useRef } from 'react'; import Hamburger from './Hamburger/Hamburger'; import FocusTrap from 'focus-trap-react'; +//import { link } from 'fs'; + +//type NavbarProps = {} +//type Pages = 'Home' | 'Overview' | 'Themes' | 'FAQ' | 'Apply' export default function Navbar() { const hamburgerInnerRef = React.useRef(null); @@ -45,9 +49,20 @@ export default function Navbar() { } }; + /* Vars for setting Astricks */ const [numAstericks, setNumAsterisks] = useState(0); const navContainerRef = useRef(null); + /* Vars for Setting Current Page */ + //const pageList = ['Home', 'Overview', 'Themes', 'FAQ', 'Apply'] + const [currPage, setCurrPage] = useState('Home'); + + /* Vars for Setting the Highlights Width and Hight */ + const [highlightWidth, setHighlightWidth] = useState(0); + const [highlightHeight, setHighlightHeight] = useState(0); + const highlight = useRef(null); + const navLink = useRef(null); + useEffect(() => { /** * Dynamically set the number of astricks @@ -55,13 +70,30 @@ export default function Navbar() { const updateAsterisks = () => { if (navContainerRef.current) { const width = navContainerRef.current.offsetWidth; - const calcNumAstericks = Math.ceil(width / 10); - console.log(width); - console.log(calcNumAstericks); + const calcNumAstericks = Math.floor(width / 10); setNumAsterisks(calcNumAstericks); } }; + /** + * If a page is seleted; then update the highlight + */ + const updateHighlightSize = () => { + if (highlight.current && navLink.current) { + const linkWidth = navLink.current?.offsetWidth; + const linkHight = navLink.current?.offsetHeight; + setHighlightWidth(linkWidth || 0); + setHighlightHeight(linkHight || 0); + } + }; + + /** + * Sets the current page + * Current page is based on what part of scroll we are at + */ + setCurrPage('Home'); + + updateHighlightSize(); updateAsterisks(); window.addEventListener('resize', updateAsterisks); @@ -92,7 +124,10 @@ export default function Navbar() {