Add top and side bars

cardinal-app · Jan 11, 2024 · bff2a65 · bff2a65
1 parent 2b88ba0
commit bff2a65
Show file tree

Hide file tree

Showing 18 changed files with 4,838 additions and 385 deletions.
diff --git a/app/fit-track/page.tsx b/app/fit-track/page.tsx
@@ -1,7 +1,8 @@
 "use server"
 import React from 'react'
-import { isLoggedIn } from '../../core/helpers/authentication';
 import { redirect } from 'next/navigation';
+import { GetInitialProps } from '@/core/interfaces/page.interface';
+import { authUtil } from '@/core/utils/auth.util';
 
 interface Week {
     block: number;
@@ -13,9 +14,11 @@ interface Week {
     };
 }
 
-const FitTrackPage = async () => {
-    if (!isLoggedIn()) redirect('/login');
+interface GetInitialReturnProps {
+    authToken: string | undefined;
+}
 
+const FitTrackPage = async () => {
 
     // const [formData, setFormData] = useState({
     //     block: "",
@@ -72,4 +75,14 @@ const FitTrackPage = async () => {
     );
 }
 
+FitTrackPage.getInitialProps = async (ctx: GetInitialProps): Promise<GetInitialReturnProps> => {
+    const authToken = authUtil.getAuthToken(ctx);
+
+    if (!authToken) {
+        redirect('/login');
+    }
+
+    return { authToken };
+};
+
 export default FitTrackPage;
diff --git a/app/globals.scss b/app/globals.scss
@@ -3,3 +3,14 @@
 @tailwind utilities;
 
 @import '../styles/base.scss';
+
+* {
+  margin: 0;
+  font-family: Montserrat, serif;
+  letter-spacing: 1px;
+}
+
+body {
+  background: $black;
+  background: linear-gradient(0deg, $black 40%, $mirage 100%);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,8 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
 import './globals.scss'
-import { isLoggedIn } from '@/core/helpers/authentication'
-
-const inter = Inter({ subsets: ['latin'] })
+import { authUtil } from '@/core/utils/auth.util'
+import TopBar from '@/core/components/top-bar/TopBar'
+import SideBar from '@/core/components/side-bar/SideBar'
 
 export const metadata: Metadata = {
   title: 'Cardinal',
@@ -12,7 +11,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
 
-  if (isLoggedIn()) {
+  if (!!authUtil.getAuthToken()) {
     return (
         <html lang="en">
           <TopBar></TopBar>
@@ -23,7 +22,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
   } else {
     return (
         <html lang="en">
-        <body className="">{children}</body>
+            <body className="">{children}</body>
         </html>
     )
   }

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -1,16 +1,16 @@
 "use client"
 import React from 'react'
 import Landing from '../../core/components/landing/Landing';
-import { login } from '../../core/helpers/authentication';
 import styles from './Login.module.scss';
 import { useRouter } from 'next/navigation';
 import badge from '@/assets/badge.png'
+import { authUtil } from "@/core/utils/auth.util";
 
 const LoginPage = () => {
     const router = useRouter();
 
     const handleLogin = () => {
-        login('jrsmth', 'password');
+        authUtil.setAuthToken('jrsmth', 'password');
         router.push('/');
     }
 

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,17 +1,31 @@
 "use client";
 
-import { isLoggedIn } from "@/core/helpers/authentication";
+import { authUtil } from "@/core/utils/auth.util";
+import { GetInitialProps } from "@/core/interfaces/page.interface";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
-export default function Home() {
-    if (!isLoggedIn()) redirect('/login');
+interface GetInitialReturnProps {
+    authToken: string | undefined;
+}
 
+export default function Home(ctx: { pageProps: GetInitialReturnProps }) {
     return (
       <main>
           <h1>Cardinal</h1>
+          <h2>Tag line...</h2>
           <br/>
           <Link href="/fit-track">Fit Track</Link>
       </main>
   );
 }
+
+Home.getInitialProps = async (ctx: GetInitialProps): Promise<GetInitialReturnProps> => {
+    const authToken = authUtil.getAuthToken(ctx);
+
+    if (!authToken) {
+        redirect('/login');
+    }
+
+    return { authToken };
+};
diff --git a/core/components/landing/Landing.module.scss b/core/components/landing/Landing.module.scss
@@ -0,0 +1,40 @@
+#landingSection {
+    height: 100vh;
+}
+
+div.overlay {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: -1;
+}
+
+#backgroundImage {
+    background-image: url('../../../assets/rolling-hills.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#orangeOverlay {
+    background: #d45b4a;
+    background: linear-gradient(65deg, #161a1d 15%, #d45b4a 50%, #e57028 100%);
+    opacity: .9;
+    filter: brightness(95%);
+}
+
+#yellowOverlay {
+    background: #fdb358;
+    background: radial-gradient(ellipse at right top, #fff 0%, #ffffbf 5%, #ffffbfbf 10%, #fdb35800 45%);
+    opacity: .8;
+    filter: brightness(120%);
+}
+
+#darkOverlay1 {
+    background: #000;
+    background: linear-gradient(0deg, #000 0%, #00000000 50%);
+}
+
+#darkOverlay2 {
+    background: #000;
+    background: linear-gradient(25deg, #000 0%, #00000000 60%);
+}
diff --git a/core/components/side-bar/SideBar.module.scss b/core/components/side-bar/SideBar.module.scss
@@ -0,0 +1,71 @@
+@import '../../../styles/base.scss';
+
+#sideBar {
+  width: 5rem;
+  position: absolute;
+  left: 0;
+  height: 100%;
+  top: 4rem;
+  text-align: center;
+  color: $white;
+
+  .nav-item {
+    margin-top: 1.75rem;
+
+    a {
+      text-decoration: none;
+      color: $white50;
+
+      &.active {
+        color: $mirage;
+
+        .icon {
+          background: linear-gradient(0deg, $valencia 50%, $zest 100%);
+
+        }
+
+        p {
+          color: $zest;
+        }
+      }
+    }
+
+    .icon {
+      height: 2.25rem;
+      display: flex;
+      width: 2.25rem;
+      margin: auto;
+      border-radius: .5rem;
+      align-items: center;
+      justify-content: center;
+      transition: .1s;
+      font-size: 14px;
+    }
+
+    p {
+      font-size: 9px;
+      margin-top: .25rem;
+      color: $white50;
+    }
+
+    &:hover {
+      .icon {
+        background: #FFFFFF1F;
+      }
+    }
+  }
+}
+
+.user {
+  position: absolute;
+  bottom: 1.75rem;
+  left: 1.25rem;
+
+  #avatar {
+    height: 2.5rem;
+    aspect-ratio: 1/1;
+    border-radius: 50%;
+    box-shadow: $drop-shadow;
+    cursor: pointer;
+  }
+}
diff --git a/core/components/side-bar/SideBar.tsx b/core/components/side-bar/SideBar.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+import styles from './SideBar.module.scss';
+
+const SideBar = () => {
+    return (
+        <>
+            <nav>
+                <div className={styles.navItem}>
+                    <Link href="/home">
+                        <p>Home</p>
+                    </Link>
+                </div>
+                <div className={styles.navItem}>
+                    <Link href="/fit-track">
+                        <p>Fit Track</p>
+                    </Link>
+                </div>
+            </nav>
+            <div className={styles.user}>
+                <img id="avatar" src="/assets/avatar.png"></img>
+            </div>
+        </>
+    )
+}
+
+export default SideBar;
diff --git a/core/components/top-bar/TopBar.module.scss b/core/components/top-bar/TopBar.module.scss
@@ -0,0 +1,31 @@
+@import '../../../styles/base.scss';
+
+#mainHeader {
+  position: absolute;
+  top: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 3rem;
+  align-items: center;
+  padding: 0 1.5rem;
+
+  .right {
+    margin-right: 4rem;
+    display: flex;
+    gap: 2rem;
+
+    .icon {
+      cursor: pointer;
+      color: #858585;
+      font-size: 14px;
+    }
+  }
+
+  #badge {
+    height: 1.75rem;
+    transform: scale(-1, 1);
+    filter: brightness(1.25);
+  }
+}
diff --git a/core/components/top-bar/TopBar.tsx b/core/components/top-bar/TopBar.tsx
@@ -0,0 +1,16 @@
+import styles from './TopBar.module.scss';
+
+const TopBar = () => {
+    return (
+        <header id={styles.mainHeader}>
+            <div className={styles.left}>
+                <img id="badge" src="../../assets/badge.png"></img>
+            </div>
+            <div className={styles.right}>
+
+            </div>
+        </header>
+    )
+}
+
+export default TopBar;
diff --git a/core/helpers/authentication.ts b/core/helpers/authentication.ts
diff --git a/core/interfaces/page.interface.ts b/core/interfaces/page.interface.ts
@@ -0,0 +1,5 @@
+import { NextPageContext } from 'next';
+
+export interface GetInitialProps extends NextPageContext {
+
+}
diff --git a/core/utils/auth.util.ts b/core/utils/auth.util.ts
@@ -0,0 +1,21 @@
+import { NextPageContext } from "next";
+import nookies from "nookies";
+
+
+const setAuthToken = (username: string, password: string, ctx?: NextPageContext) => {
+    nookies.set(ctx, "token", `${username}:${password}`, { 
+        maxAge: 30 * 24 * 60 * 60 }
+    );
+};
+
+const getAuthToken = (ctx?: NextPageContext): string | undefined => {
+    const authToken = nookies.get(ctx)["token"];
+    console.log(authToken);
+
+    return authToken;
+};
+
+export const authUtil = {
+    setAuthToken,
+    getAuthToken
+};
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,10 @@
+const path = require('path')
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    sassOptions: {
+        includePaths: [path.join(__dirname, 'styles')],
+    }
+}
 
 module.exports = nextConfig