Issue #2 🎫: Horizontal IDE like Navbar (Desktop Navbar)

[ITurres]

Pull Request Summary for Issue #2 Completion

---

Overview:

The current Navbar.jsx component was doing fine, however, I realized that for the desktop view, due to the potential large screen sizes, the user could not understand the navigation concept and feel lost. So I decided to come up with a navigation concept that resembles an IDE file tab navigation (like the one at VScode), this component FileTabsNavbar.jsx is more intuitive and user-friendly for large screens.

Changes Made:

Added:

.vscode/terminals.json

• Added a new file to the .vscode directory to store the terminal settings for the project.

/src/components/UI/FileTabsNavbar.tsx

• Added a new component to the UI directory to handle the new navigation concept for large screens.

/src/styles/UI/FileTabsNavbar.scss

• All the styles for the new FileTabsNavbar component.

---

Modified:

Note: the following files were modified to accommodate the new FileTabsNavbar component.

/src/components/UI/Navbar.tsx

• I make use of the useState and useEffect hooks to handle the window width and set the state of the windowWidth variable.
• I conditionally render the pages paths based on the window width. That is, when the window width is less than 768px (minWidth variable), the pages paths will be render along with the social links as this will be the mobile view. Otherwise, only the social links will be rendered.
• I have also added a new Link for my Wellfound (old Angellist) page.

/src/components/pages/HomePage.tsx

• The same logic applies to the HomePage component. But in this case I conditionally render the FileTabsNAvbar component based on the window width, that is, when the window width is greater than 768px (minWidth variable), the FileTabsNavbar component will be rendered.

/src/styles/UI/LineCount.scss

• Updated the breakpoint from min width of 630px to 768px.
• .line-count class will have a margin top of 2.6rem to give space for the new FileTabsNavbar component.

/src/styles/UI/Navbar.scss

• I have only changed the $elementsInNavbar variable from 7 to 8 since now I have the Wellfound (old AngelList) link.

/src/styles/pages/AboutPage.scss

• The mixin component-code-snippet will now be at the min-width 768px breakpoint with a top value of 4rem. Again this is to give space for the new FileTabsNavbar component.

/src/styles/pages/ContactPage.scss

/src/styles/pages/ExpertiseSummaryPage.scss

/src/styles/pages/ProjectsPage.scss

• The same above logic applies to the ContactPage, ExpertiseSummaryPage and ProjectsPage components.

---

Reasoning:

The current navigation concept was not user-friendly for large screens, so I decided to come up with a new concept that is more intuitive and user-friendly.

Impact:

• n/a.

Testing:

• n/a.

Related Issues:

• Closes [4pt] Horizontal IDE like Navbar (Desktop Navbar). #2.

Dependencies:

None.

Additional Notes:

The Navbar.jsx component will still be present for the page and social links on mobile view and the new FileTabsNavbar.jsx will be hidden. However, on desktop view only the social links will be present and of course, the new FileTabsNavbar.jsx will be visible.

---

[netlify]

❌ Deploy Preview for storied-pastelito-095767 failed.

Name	Link
🔨 Latest commit	c772578
🔍 Latest deploy log	https://app.netlify.com/sites/storied-pastelito-095767/deploys/65c2cf8fc02e70000858da7f

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
iturres-reactive-portfolio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 7, 2024 0:32am

[ITurres]

❗ Notes: Netlify and Vercel deployments have been removed.