Phase 5: page components

src/App.scss

@@ -0,0 +1,24 @@
+@import "./scss/media";
+@import "./scss/theme_variables";
+
+.body-cover {
+  width: 100%;
+  z-index: 0;
+  position: fixed;
+  height: 100%;
+}
+
+.wrapper {
+  position: relative;
+  width: 85%;
+  min-height: 80px;
+  margin: 0 auto;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-size: 15px;
+  height: 100%;
+  line-height: 1.3;
+
+   @media #{$mobile-only} {
+    width: 100%;
+  }
+}

src/components/Footer.scss

@@ -0,0 +1,23 @@
+@import "../scss/media";
+@import "../scss/theme_variables";
+
+#footer {
+  position: relative;
+  padding: 10px;
+  height: 60px;
+  letter-spacing: 0.7px;
+  text-align: center;
+
+  a {
+  	font-weight: bold;
+  	text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media #{$mobile-only} {
+    display: none;
+  }
+}

src/components/Footer.tsx

@@ -0,0 +1,14 @@
+import './Footer.scss';
+
+export default function Footer() {
+    return (
+        <div id="footer">
+            <p>
+                Show this project some ❤ on{' '}
+                <a href="https://github.com/hdjirdeh/angular2-hn" target="_blank" rel="noopener">
+                    GitHub
+                </a>
+            </p>
+        </div>
+    );
+}

src/components/Header.scss

@@ -0,0 +1,149 @@
+@import "../scss/media";
+@import "../scss/theme_variables";
+
+#header {
+  color: #fff;
+  padding: 6px 0;
+  line-height: 18px;
+  vertical-align: middle;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  @media #{$mobile-only} {
+    height: 50px;
+    position: fixed;
+    top: 0;
+  }
+
+  a {
+    display: inline;
+  }
+}
+
+.home-link {
+  width: 50px;
+  height: 66px;
+}
+
+.logo-inner {
+  width: 32px;
+  position: absolute;
+  left: 17px;
+  top: 18px;
+  z-index: -1;
+  height: 32px;
+  border-radius: 50%;
+
+  @media #{$mobile-only} {
+    left: 16px;
+    top: 12px;
+  }
+}
+
+.logo {
+  width: 50px;
+  padding: 3px 8px 0;
+
+  @media #{$mobile-only} {
+    width: 45px;
+    padding: 0 0 0 10px;
+  }
+}
+
+h1 {
+  font-weight: normal;
+  display: inline-block;
+  vertical-align:middle;
+  margin: 0;
+  font-size: 16px;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.name {
+  margin-right: 30px;
+  margin-bottom: 2px;
+
+  @media #{$mobile-only} {
+    display: none;
+  }
+}
+
+.header-text {
+  position: absolute;
+  width: inherit;
+  height: 20px;
+  left: 10px;
+  top: 27px;
+  z-index: -1;
+
+  @media #{$mobile-only} {
+    top: 22px;
+  }
+}
+
+.left {
+  position: absolute;
+  left: 60px;
+  font-size: 16px;
+
+  @media #{$mobile-only} {
+    width: 100%;
+    left: 0;
+  }
+}
+
+.header-nav {
+  display: inline-block;
+  margin-left: 20px;
+
+  @media #{$mobile-only} {
+    margin-left: 60px;
+  }
+
+  a {
+    color: hsla(0,0%,100%,.9);
+    text-decoration: none;
+    margin: 0 5px;
+    letter-spacing: 1.8px;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .active {
+    color: #fff;
+  }
+}
+
+.info {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  height: 100%;
+
+  @media #{$mobile-only} {
+    right: 10px;
+  }
+
+  img {
+    opacity: 0.8;
+    width: 25px;
+    margin-top: 21.5px;
+    display: block;
+
+    &:hover {
+      opacity: 1;
+      cursor: pointer;
+    }
+
+    @media #{$mobile-only} {
+      margin-top: 15px;
+    }
+  }
+}

src/components/Header.test.tsx

@@ -0,0 +1,52 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { SettingsProvider } from '../context/SettingsContext';
+import Header from './Header';
+
+function renderHeader(path = '/news/1') {
+    return render(
+        <MemoryRouter initialEntries={[path]}>
+            <SettingsProvider>
+                <Header />
+            </SettingsProvider>
+        </MemoryRouter>
+    );
+}
+
+beforeEach(() => localStorage.clear());
+afterEach(cleanup);
+
+describe('Header', () => {
+    it('links to every feed and marks the active one', () => {
+        renderHeader('/ask/1');
+
+        expect(screen.getByText('new').getAttribute('href')).toBe('/newest/1');
+        expect(screen.getByText('show').getAttribute('href')).toBe('/show/1');
+        expect(screen.getByText('jobs').getAttribute('href')).toBe('/jobs/1');
+        expect(screen.getByText('ask').className).toBe('active');
+        expect(screen.getByText('new').className).toBe('');
+    });
+
+    it('scrolls to the top when a feed link is used', () => {
+        const scrollTo = vi.fn();
+        vi.stubGlobal('scrollTo', scrollTo);
+
+        renderHeader();
+        fireEvent.click(screen.getByText('show'));
+
+        expect(scrollTo).toHaveBeenCalledWith(0, 0);
+        vi.unstubAllGlobals();
+    });
+
+    it('renders the settings panel only once toggled', () => {
+        renderHeader();
+
+        expect(screen.queryByText('Settings', { selector: 'h1' })).toBeNull();
+
+        fireEvent.click(screen.getByAltText('Settings'));
+
+        expect(screen.getByText('Settings', { selector: 'h1' })).toBeTruthy();
+    });
+});

src/components/Header.tsx

@@ -0,0 +1,58 @@
+import { NavLink } from 'react-router-dom';
+
+import { useSettings } from '../context/SettingsContext';
+import Settings from './Settings';
+
+import './Header.scss';
+
+const FEEDS: { path: string; label: string }[] = [
+    { path: '/newest/1', label: 'new' },
+    { path: '/show/1', label: 'show' },
+    { path: '/ask/1', label: 'ask' },
+    { path: '/jobs/1', label: 'jobs' },
+];
+
+function scrollTop() {
+    window.scrollTo(0, 0);
+}
+
+export default function Header() {
+    const { settings, toggleSettings } = useSettings();
+
+    return (
+        <header>
+            <div id="header">
+                <NavLink
+                    className={({ isActive }) => (isActive ? 'home-link active' : 'home-link')}
+                    to="/news/1"
+                    onClick={scrollTop}
+                >
+                    <div className="logo-inner"></div>
+                    <img className="logo" src="/assets/images/logo.svg" alt="Logo" />
+                </NavLink>
+                <div className="header-text">
+                    <div className="left">
+                        <span className="header-nav">
+                            {FEEDS.map((feed, index) => (
+                                <span key={feed.path}>
+                                    {index > 0 && ' | '}
+                                    <NavLink
+                                        className={({ isActive }) => (isActive ? 'active' : undefined)}
+                                        to={feed.path}
+                                        onClick={scrollTop}
+                                    >
+                                        {feed.label}
+                                    </NavLink>
+                                </span>
+                            ))}
+                        </span>
+                    </div>
+                </div>
+                <div className="info">
+                    <img className="settings" src="/assets/images/cog.svg" alt="Settings" onClick={toggleSettings} />
+                </div>
+            </div>
+            {settings.showSettings && <Settings />}
+        </header>
+    );
+}