Merge pull request #5 from vevcom/feat/navbar

Feat/navbar
vevcom · Sep 16, 2023 · 0807ce3 · 0807ce3
2 parents ac84977 + e661f18
commit 0807ce3
Show file tree

Hide file tree

Showing 34 changed files with 748 additions and 127 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -1,10 +1,11 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
-      "@/components": ["./src/components/*"],
-      "@/styles": ["./src/styles/*"],
-      "@/images": ["./src/images/*"]
+      "@/*": ["src/*"],
+      "@/components/*": ["src/app/components/*"],
+      "@/styles/*": ["src/styles/*"],
+      "@/images/*": ["src/images/*"]
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "eslint": "8.48.0",

diff --git a/src/app/components/Footer/Footer.js b/src/app/components/Footer/Footer.js
@@ -0,0 +1,67 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+import styles from './Footer.module.scss'
+
+import addToHomeScreen from '@/images/add_to_home_screen.png'
+import logo from '@/images/omega_logo_white.png'
+import nordic from '@/images/nordic.png'
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faXTwitter,
+  faFacebookSquare,
+  faInstagram
+} from '@fortawesome/free-brands-svg-icons'
+
+function Footer() {
+  return (
+    <footer className={styles.Footer}>
+      <div>
+        <Image src={logo} width={350} alt="sct. omega broderskab" />
+        <p>
+          Linjeforeningen for Elektronisk Systemdesign og Innovasjon (MTELSYS) og Kybernetikk og 
+          Robotikk (MTTK) ved Norges Tekniske-Naturvitenskapelige Universitet (NTNU)
+        </p>
+        <div>
+            <Link className={styles.pwa} href="/infopages/pwa">
+              <Image src={addToHomeScreen} width={200} alt="add to homescreen" />
+            </Link>
+            <div className={styles.icons}>
+              <Link href="https://twitter.com/OmegaVevcom" target="_blank">
+                <FontAwesomeIcon icon={faXTwitter} />
+              </Link>
+              <Link href="https://www.facebook.com/SctOmegaBroderskab/" target="_blank">
+                <FontAwesomeIcon icon={faFacebookSquare} />
+              </Link>
+              <Link href="https://www.instagram.com/sctomega/" target="_blank">
+                <FontAwesomeIcon icon={faInstagram} />
+              </Link>
+            </div>
+        </div>
+      </div>
+      <div className={styles.info}>
+        <p>Kontakt:</p>
+        <p>Bedrift: <a href="mailto:[email protected]">[email protected]</a></p>
+        <p>Teknisk: <a href="mailto:[email protected]">[email protected]</a></p>
+        <p>PR: <a href="mailto:[email protected]">[email protected]</a></p>
+        <p>Annet: <a href="mailto:[email protected]">[email protected]</a></p>
+        <p>Tlf: 73 59 42 11</p>
+      </div>
+      <div className={styles.info}>
+        <p>Adresse:</p>
+        <p>Sct.Omega Broderskab</p>
+        <p>NTNU Gløshaugen</p>
+        <p>Elektro-bygget</p>
+        <p>7491 Trondheim</p>
+      </div>
+      <div className={styles.nordic}>
+          <Link href="http://www.nordicsemi.com" target="_blank">
+            <Image src={nordic} width={170} alt="nordic logo"/>
+          </Link>
+      </div>
+  </footer>
+  )
+}
+
+export default Footer
diff --git a/src/app/components/Footer/Footer.module.scss b/src/app/components/Footer/Footer.module.scss
@@ -0,0 +1,119 @@
+@use "@/styles/ohma";
+
+.Footer {
+    font-weight: ohma.$sFontWeight;
+    background-color: ohma.$gray-800;
+    color: ohma.$white;
+    display: grid;
+    padding: 10*ohma.$gap 20*ohma.$gap;
+    > * {
+        p {
+            margin-bottom: ohma.$gap;
+            line-height: 1.7em;
+        }
+        padding: 0 5*ohma.$gap 0 2*ohma.$gap;
+        &:nth-child(1) {
+            padding-left: 0;
+            grid-area: logos;
+        }
+        &:nth-child(2) {
+            grid-area: info1;
+        }
+        &:nth-child(3) {
+            grid-area: info2;
+        }
+        &:nth-child(4) {
+            grid-area: nordic;
+        }
+    }
+    > .info {
+        > *:first-child {
+            color: ohma.$yellow;
+            font-weight: ohma.$mFontWeight;
+            font-size: ohma.$lFont
+        }
+        border-left: solid 1px ohma.$gray-700;
+        a {
+            text-decoration: none;
+            color: ohma.$white;
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+    .pwa {
+        @include ohma.yellowIconLink;
+        padding-left: 0;
+    }
+    .icons {
+        display: flex;
+        justify-content: flex-start;
+        > a > * {
+            @include ohma.yellowIconLink;
+            > *:first-child {
+                padding-left: 0;
+            }
+        }
+
+    }
+}
+
+@media (min-width: 1100px) {
+    .Footer {
+        grid-template-columns: 2fr 1fr 1fr 1fr;
+        grid-template-areas: 
+            "logos info1 info2 nordic";
+    }
+}
+
+@media (min-width: ohma.$mobileBreakpoint) and (max-width: 1100px) {
+    .Footer {
+        grid-template-columns: 2fr 1fr 1fr;
+        grid-template-rows: auto auto;
+        grid-template-areas: 
+            "logos info1 info2"
+            "nordic nordic nordic"
+        ;
+    }
+    .nordic {
+        width: 100%;
+        display: grid;
+        place-items: center;
+        margin-top: 2*ohma.$gap
+    }
+}
+
+@media (max-width: ohma.$mobileBreakpoint) {
+    .Footer {
+        padding: ohma.$gap 2*ohma.$gap;
+        padding-bottom: 4*ohma.$gap;
+        grid-template-rows: repeat(auto, 4);
+        grid-template-areas: 
+            "logos"
+            "info1"
+            "info2"
+            "nordic"
+        ;
+        place-items: center;
+        > .info {
+            border-left: none;
+        }
+        > * {
+            padding: 0;
+            margin-top: 5*ohma.$gap;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            :nth-child(1) {
+                padding-left: none;
+            }
+        }
+        .icons {
+            justify-content: center;
+        }
+        p {
+            text-align: center;
+            max-width: 400px;
+        }
+    }
+}
diff --git a/src/app/components/NavBar/BurgerItem.js b/src/app/components/NavBar/BurgerItem.js
@@ -0,0 +1,17 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+
+import styles from './BurgerItem.module.scss'
+
+function BurgerItem({ href, name, icon, shortName }) {
+    shortName ??= name;
+    return (
+        <Link href={href} className={styles.BurgerItem}>
+            <FontAwesomeIcon icon={icon} className={styles.icon}/>
+            <div className={styles.name}>{name}</div>
+            <div className={styles.shortName}>{shortName}</div>
+        </Link>
+    )
+}
+
+export default BurgerItem
diff --git a/src/app/components/NavBar/BurgerItem.module.scss b/src/app/components/NavBar/BurgerItem.module.scss
@@ -0,0 +1,40 @@
+@use "@/styles/ohma";
+
+.BurgerItem {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    &:active {
+        background-color: ohma.$yellow;
+    }
+    > .icon {
+        color: ohma.$white;
+        width: 25px;
+        height: 25px;
+    }
+    text-decoration: none;
+    > .name, .shortName {
+        color: ohma.$white;
+        text-decoration: none;
+        font-size: .65em;
+        word-break: break-all;
+    }
+    > .name {
+        display: block;
+    }
+    > .shortName {
+        display: none;
+    }
+}
+
+@media (max-width: 450px) {
+    .BurgerItem {
+        > .name {
+            display: none;
+        }
+        > .shortName {
+            display: block;
+        }
+    }
+}
diff --git a/src/app/components/NavBar/BurgerMenu.js b/src/app/components/NavBar/BurgerMenu.js
@@ -0,0 +1,50 @@
+import BurgerItem from './BurgerItem'
+import {
+    faShoppingCart,
+    faComment,
+    faPoo,
+    faNewspaper,
+    faCamera,
+    faBriefcase,
+    faList,
+    faUsers,
+    faCircleInfo,
+    faGamepad,
+    faBeer,
+    faQuestionCircle,
+    faAddressCard,
+    faGraduationCap,
+} from "@fortawesome/free-solid-svg-icons"
+
+import styles from './BurgerMenu.module.scss'
+
+function BurgerMenu({ isLoggedIn, applicationPeriod }) {
+    return (
+        <div className={styles.BurgerMenu}>
+            <BurgerItem href="/ombul" name="OmBul" icon={faNewspaper}/>
+            <BurgerItem href="/infopages/about" name="Om Omega" icon={faCircleInfo}/>
+            <BurgerItem href="/infopages/committees" name="Komitéer" icon={faBeer}/>
+            <BurgerItem href="/infopages/guides" name="Guider" icon={faQuestionCircle}/>
+            {!isLoggedIn &&
+                <BurgerItem href="/infopages/nystudent" name="Ny Student?" icon={faGraduationCap}/>
+            }
+            {isLoggedIn && 
+            <>
+                <BurgerItem href="/money/shop" name="Omegashop" icon={faShoppingCart}/>
+                <BurgerItem href="/omegaquotes" name="Omegaquotes" icon={faComment}/>
+                <BurgerItem href="/bulshit" name="Bulshit" icon={faPoo}/>
+                <BurgerItem href="/images" name="Bilder" icon={faCamera}/>
+                <BurgerItem href="/infopages/jobbannonser" name="Jobbannonser" icon={faBriefcase}/>
+                <BurgerItem href="/userlist" name="Klasselister" icon={faList}/>
+                <BurgerItem href="/committees" name="Komitémedlemmer" shortName="Kom.med." icon={faUsers}/>
+                <BurgerItem href="/infopages/interessegrupper" name="Interessegrupper" shortName="Interessegr." icon={faGamepad}/>
+                {applicationPeriod &&
+                    <BurgerItem href="/applications" name="Søknad" icon={faAddressCard}/>
+                }
+            </>
+            }
+        </div>
+    )
+}
+
+export default BurgerMenu
diff --git a/src/app/components/NavBar/BurgerMenu.module.scss b/src/app/components/NavBar/BurgerMenu.module.scss
@@ -0,0 +1,8 @@
+@use "@/styles/ohma";
+
+.BurgerMenu {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 2*ohma.$gap;
+    padding: 3*ohma.$gap ohma.$gap  ohma.$gap ohma.$gap;
+}
diff --git a/src/app/components/NavBar/Dropdown.js b/src/app/components/NavBar/Dropdown.js
@@ -0,0 +1,24 @@
+import Link from "next/link"
+import styles from "./Dropdown.module.scss"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { v4 as uuid } from 'uuid'
+
+function DropDown({ name, items }) {
+    return (
+        <li className={styles.Dropdown}>
+            <div className={styles.name}>{ name }</div>
+            <div className={styles.dropdownContent} name={name}>
+                {items.map(item => 
+                    <div className={styles.dropdownItem} key={uuid()}>
+                        <Link href={item.href}> 
+                            <FontAwesomeIcon className={styles.icon} icon={item.icon} />    
+                            <h2 className={styles.linkName}>{item.name}</h2>
+                        </Link>
+                    </div>
+                )}
+            </div>
+        </li>
+    )
+}
+
+export default DropDown