Add footer

src/app.tsx

@@ -9,6 +9,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { Student } from "@/data";
 import '@/styles/overrides.scss'
 import '@/styles/header.scss'
+import '@/styles/footer.scss'
 import classNames from "classnames";
 import { EditionActions } from "@/state/actions/edition";
 import { sampleEdition } from "@/provider/dummy/edition";
@@ -18,6 +19,7 @@ import { useDispatch } from "@/state/actions";
 import { getLocale, Locale } from "@/state/reducer/settings";
 import i18n from "@/i18n";
 import moment from "moment";
+import { Container } from "@material-ui/core";
 
 const UserMenu = (props: HTMLProps<HTMLUListElement>) => {
     const student = useSelector<AppState, Student>(state => state.student as Student);
@@ -72,7 +74,7 @@ const LanguageSwitcher = ({ className, ...props }: HTMLProps<HTMLUListElement>)
 function App() {
     const dispatch = useDispatch();
     const edition = useSelector<AppState, Edition | null>(state => state.edition);
-
+    const { t } = useTranslation();
     const locale = useSelector<AppState, Locale>(state => getLocale(state.settings));
 
     useEffect(() => {
@@ -85,7 +87,7 @@ function App() {
         i18n.changeLanguage(locale);
         document.documentElement.lang = locale;
         moment.locale(locale)
-    })
+    }, [ locale ])
 
     const ready = useSelector(isReady);
 
@@ -108,7 +110,14 @@ function App() {
                 </nav>
             </div>
         </header>
-        { ready && <Switch>{ routes.map(({ name, content, ...route }) => <Route { ...route } key={ name }>{ content() }</Route>) }</Switch> }
+        <main id="content">
+            { ready && <Switch>{ routes.map(({ name, content, ...route }) => <Route { ...route } key={ name }>{ content() }</Route>) }</Switch> }
+        </main>
+        <footer className="footer">
+            <Container>
+                <div className="footer__copyright">{ t('copyright', { date: moment() }) }</div>
+            </Container>
+        </footer>
     </>;
 }
 

src/styles/footer.scss

@@ -0,0 +1,14 @@
+@import "variables";
+
+.footer {
+  background: $main-dark;
+  margin-top: 3rem;
+  color: #e4f1fe;
+  padding: 1rem 0;
+  display: flex;
+  font-size: 0.8rem;
+}
+
+.footer__copyright {
+  text-align: right;
+}

src/styles/overrides.scss

@@ -14,6 +14,7 @@
 html, body {
   margin: 0;
   padding: 0;
+  min-height: 100%;
 
   font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 }
@@ -21,3 +22,16 @@ html, body {
 * {
   box-sizing: border-box;
 }
+
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
+#content {
+  flex: 1 1 auto;
+}
+
+body, #root {
+  min-height: 100vh;
+}

translations/en.yaml

@@ -1,4 +1,6 @@
 ---
+copyright: ETI © {{ date, YYYY }}
+
 login: login
 logout: logout
 logged-in-as: logged in as <1>{{ name }}</1>

translations/pl.yaml

@@ -1,4 +1,6 @@
 ---
+copyright: Wydział ETI Politechniki Gdańskiej © {{ date, YYYY }}
+
 login: zaloguj się
 logout: wyloguj się
 logged-in-as: zalogowany jako <1>{{ name }}</1>