6 files changed, 117 insertions, 38 deletions
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css
index 272a99ad..67fd9516 100644
--- a/FrontEnd/src/views/common/AppBar.css
+++ b/FrontEnd/src/views/common/AppBar.css
@@ -1,6 +1,4 @@
 .app-bar {
-  display: flex;
-  align-items: center;
   height: 56px;
   position: fixed;
   z-index: 1030;
@@ -8,52 +6,53 @@
   left: 0;
   right: 0;
   background-color: var(--cru-primary-color);
-  transition: background-color 1s;
 }
 
-.app-bar .cru-avatar {
-  background-color: white;
+.app-bar.desktop {
+  display: flex;
 }
 
-.app-bar a {
-  color: var(--cru-primary-on-color);
-  text-decoration: none;
-  margin: 0 1em;
-  transition: color 1s;
+.app-bar.desktop .app-bar-brand {
+  display: flex;
+  align-items: center;
 }
 
-.app-bar a:hover {
-  color: var(--cru-primary-on-color);
+.app-bar.desktop .app-bar-brand-icon {
+  height: 2em;
 }
 
-.app-bar a.active {
-  color: var(--cru-primary-on-color);
+.app-bar.desktop .app-bar-main-area {
+  display: flex;
+  flex-grow: 1;
 }
 
-.app-bar-brand {
+.app-bar.desktop .app-bar-link-area {
+  display: flex;
+}
+
+.app-bar.desktop a {
+  background-color: var(--cru-primary-color);
+  color: var(--cru-primary-on-color);
+  text-decoration: none;
   display: flex;
   align-items: center;
+  padding: 0 1em;
 }
 
-.app-bar-brand-icon {
-  height: 2em;
+.app-bar.desktop a:hover {
+  filter: brightness(var(--cru-hover-brightness));
 }
 
-.app-bar-main-area {
-  display: flex;
-  flex-grow: 1;
+.app-bar.desktop a:focus {
+  filter: brightness(var(--cru-focus-brightness));
 }
 
-.app-bar-link-area {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
+.app-bar.desktop a:active {
+  filter: brightness(var(--cru-press-brightness));
 }
 
-.app-bar-user-area {
+.app-bar.desktop .app-bar-user-area {
   display: flex;
-  align-items: center;
-  flex-shrink: 0;
   margin-left: auto;
 }
 
diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/views/common/AppBar.tsx
index 444d903e..180d0db6 100644
--- a/FrontEnd/src/views/common/AppBar.tsx
+++ b/FrontEnd/src/views/common/AppBar.tsx
@@ -3,7 +3,7 @@ import classnames from "classnames";
 import { Link, NavLink } from "react-router-dom";
 import { useMediaQuery } from "react-responsive";
 
-import { useC } from "./common";
+import { I18nText, useC, useMobile } from "./common";
 import { useUser } from "@/services/user";
 
 import TimelineLogo from "./TimelineLogo";
@@ -11,7 +11,71 @@ import UserAvatar from "./user/UserAvatar";
 
 import "./AppBar.css";
 
-export default function AppBar() {
+function AppBarNavLink({
+  link,
+  className,
+  label,
+  children,
+}: {
+  link: string;
+  className?: string;
+  label?: I18nText;
+  children?: React.ReactNode;
+}) {
+  if (label != null && children != null) {
+    throw new Error("AppBarNavLink: label and children cannot be both set");
+  }
+
+  const c = useC();
+
+  return (
+    <NavLink
+      to={link}
+      className={({ isActive }) => classnames(className, isActive && "active")}
+    >
+      {children != null ? children : c(label)}
+    </NavLink>
+  );
+}
+
+function DesktopAppBar() {
+  const user = useUser();
+  const hasAdministrationPermission = user && user.hasAdministrationPermission;
+
+  return (
+    <nav className="desktop app-bar">
+      <Link to="/" className="app-bar-brand active">
+        <TimelineLogo className="app-bar-brand-icon" />
+        Timeline
+      </Link>
+      <div className="app-bar-main-area">
+        <div className="app-bar-link-area">
+          <AppBarNavLink link="/settings" label="nav.settings" />
+          <AppBarNavLink link="/about" label="nav.about" />
+          {hasAdministrationPermission && (
+            <AppBarNavLink link="/admin" label="nav.administration" />
+          )}
+        </div>
+
+        <div className="app-bar-user-area">
+          {user != null ? (
+            <AppBarNavLink link="/" className="app-bar-avatar">
+              <UserAvatar
+                username={user.username}
+                className="cru-avatar small cru-round cursor-pointer ml-auto"
+              />
+            </AppBarNavLink>
+          ) : (
+            <AppBarNavLink link="/login" label="nav.login" />
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+// TODO: Go make this!
+function MobileAppBar() {
   const c = useC();
 
   const user = useUser();
@@ -77,3 +141,8 @@ export default function AppBar() {
     </nav>
   );
 }
+
+export default function AppBar() {
+  const isMobile = useMobile();
+  return isMobile ? <MobileAppBar /> : <DesktopAppBar />;
+}
diff --git a/FrontEnd/src/views/common/breakpoints.ts b/FrontEnd/src/views/common/breakpoints.ts
new file mode 100644
index 00000000..fb281610
--- /dev/null
+++ b/FrontEnd/src/views/common/breakpoints.ts
@@ -0,0 +1,3 @@
+export const breakpoints = {
+  sm: 576,
+} as const;
diff --git a/FrontEnd/src/views/common/common.ts b/FrontEnd/src/views/common/common.ts
index e3a5a2a2..d3db9f93 100644
--- a/FrontEnd/src/views/common/common.ts
+++ b/FrontEnd/src/views/common/common.ts
@@ -10,3 +10,6 @@ export const themeColors = [
 ] as const;
 
 export type ThemeColor = (typeof themeColors)[number];
+
+export { breakpoints } from "./breakpoints";
+export { useMobile } from "./hooks";
diff --git a/FrontEnd/src/views/common/hooks.ts b/FrontEnd/src/views/common/hooks.ts
new file mode 100644
index 00000000..c1fa5774
--- /dev/null
+++ b/FrontEnd/src/views/common/hooks.ts
@@ -0,0 +1,14 @@
+// TODO: Migrate hooks
+
+export {
+  useIsSmallScreen,
+  useClickOutside,
+  useScrollToBottom,
+} from "@/utilities/hooks";
+
+import { useMediaQuery } from "react-responsive";
+import { breakpoints } from "./breakpoints";
+
+export function useMobile(): boolean {
+  return useMediaQuery({ maxWidth: breakpoints.sm });
+}
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index bd556a81..f87fdfd2 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -6,21 +6,12 @@
   margin-block: 0;
 }
 
-*::before {
-  box-sizing: border-box;
-}
-
-*::after {
-  box-sizing: border-box;
-}
-
 body {
   font-family: var(--cru-default-font-family);
   background: var(--cru-surface-color);
   color: var(--cru-surface-on-color);
 }
 
-
 .cru-text-center {
   text-align: center;
 }