Navbar improvements

components/Page.tsx

@@ -28,10 +28,10 @@ type PageProps = {
 
 const Page: NextPage<PageProps> = ({ page, navbarLinks, logos, isPrivate }) => {
   return (
-    <div className="bg-white">
+    <div className="flex min-h-screen flex-col bg-white">
       <Header navbarLinks={navbarLinks} />
-      <div className="flex justify-center">
-        <div className="prose prose-sm my-12 ml-16 mr-8 flex flex-col">
+      <div className="flex flex-grow justify-center">
+        <div className="prose prose-sm mx-4 mb-12 mt-6 flex flex-col sm:mx-8 md:mx-16 md:mt-12">
           <h1>{page?.title}</h1>
           {page?.content && (
             <div

components/header/index.tsx

@@ -1,18 +1,18 @@
 import { useState } from 'react'
 import Navbar from './navbar'
 import SideMenu from './navbar/SideMenu'
-import MenuIcon from './navbar/MenuIcon'
 import { NavbarLink } from '@lib/api/navbar'
+import ExpandableNavbar from './navbar/ExpandableNavbar'
 
 const Header = ({ navbarLinks }: { navbarLinks: NavbarLink[] }) => {
   const [sideMenuOpen, setSideMenuOpen] = useState(false)
 
   return (
-    <header>
-      <div className="bg-darkgray pb-2">
-        <MenuIcon
-          open={sideMenuOpen}
-          onClick={() => setSideMenuOpen(!sideMenuOpen)}
+    <header className="sticky top-0 z-10">
+      <div className="bg-darkgray">
+        <ExpandableNavbar
+          sideMenuOpen={sideMenuOpen}
+          setSideMenuOpen={setSideMenuOpen}
         />
         <Navbar navbarLinks={navbarLinks} setSideMenuOpen={setSideMenuOpen} />
         <SideMenu open={sideMenuOpen}>

components/header/navbar/ExpandableNavbar.tsx

@@ -0,0 +1,26 @@
+import MenuIcon from '@components/header/navbar/MenuIcon'
+import TFLogoSmall from '@components/header/navbar/TFLogoSmall'
+
+interface ExpandableNavbarProps {
+  sideMenuOpen: boolean
+  setSideMenuOpen: (state: boolean) => void
+}
+
+const ExpandableNavbar = ({
+  setSideMenuOpen,
+  sideMenuOpen,
+}: ExpandableNavbarProps) => {
+  return (
+    <div className="flex flex-row justify-between">
+      <div className="mx-3 my-3 md:hidden">
+        <TFLogoSmall highlight={false} />
+      </div>
+      <MenuIcon
+        open={sideMenuOpen}
+        onClick={() => setSideMenuOpen(!sideMenuOpen)}
+      />
+    </div>
+  )
+}
+
+export default ExpandableNavbar

components/header/navbar/HeaderLink.tsx

@@ -0,0 +1,31 @@
+import router from 'next/router'
+
+type HeaderLinkProps = {
+  title: string
+  href: string
+  setSideMenuOpen: (state: boolean) => void
+  className?: string
+}
+
+/* Prefetch on hover cannot be disabled for NextJS links that point to pages with static props
+   (might be possible with app router), requiring this custom Link component. */
+const HeaderLink = ({
+  title,
+  href,
+  setSideMenuOpen,
+  className,
+}: HeaderLinkProps) => {
+  const onClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault()
+    setSideMenuOpen(false)
+    router.push(href)
+  }
+
+  return (
+    <a href={href} onClick={onClick} className={className}>
+      {title}
+    </a>
+  )
+}
+
+export default HeaderLink

components/header/navbar/LoginButton.tsx

@@ -11,7 +11,7 @@ const LoginButton = ({ className }: { className?: string }) => {
         signIn('keycloak')
       }}
       className={classNames(
-        'hover:bg-gray-900 rounded-lg border border-white p-2 text-white hover:font-bold',
+        'hover:bg-gray-900 mx-3 rounded-lg border border-white p-2 text-white hover:font-bold',
         className
       )}
     >
@@ -24,7 +24,7 @@ const LoginButton = ({ className }: { className?: string }) => {
         signOut({ callbackUrl: '/' })
       }}
       className={classNames(
-        'rounded-lg border border-teknologröd p-2 text-teknologröd hover:font-bold',
+        'mx-3 rounded-lg border border-teknologröd p-2 text-teknologröd hover:font-bold',
         className
       )}
     >

components/header/navbar/MenuIcon.tsx

@@ -1,23 +1,16 @@
 import { MouseEventHandler } from 'react'
 
 type MenuBarProps = {
-  transform: string
+  className: string
   opacity?: number
-  backgroundColor?: string
 }
 
-const MenuBar = ({
-  transform,
-  backgroundColor = 'black',
-  opacity = 1,
-}: MenuBarProps) => {
+const MenuBar = ({ className, opacity = 1 }: MenuBarProps) => {
   return (
     <div
-      className='ease-in-out" mx-0 my-[6px] h-[5px] w-[35px] transition duration-[.4s]'
+      className={`${className} h-[2px] w-7 origin-left transform bg-white transition-all duration-[.4s] ease-in-out`}
       style={{
         opacity,
-        transform,
-        backgroundColor,
       }}
     />
   )
@@ -29,22 +22,13 @@ type MenuIconProps = {
 }
 
 const MenuIcon = ({ open, onClick }: MenuIconProps) => (
-  <div
-    className="fixed left-[10px] top-[10px] z-50 inline-block md:hidden"
-    onClick={onClick}
-  >
-    <MenuBar
-      transform={open ? 'rotate(-45deg) translate(-9px, 7px)' : 'rotate(0)'}
-      backgroundColor={open ? 'white' : 'black'}
-    />
+  <div className="z-50 m-2 p-2 md:hidden" onClick={onClick}>
+    <MenuBar className={`${open ? 'rotate-[42deg]' : 'rotate-0'} mb-[7px]`} />
     <MenuBar
       opacity={open ? 0 : 1}
-      transform={open ? 'translateX(-100%)' : 'translateX(0)'}
-    />
-    <MenuBar
-      transform={open ? 'rotate(45deg) translate(-8px, -7px)' : 'rotate(0)'}
-      backgroundColor={open ? 'white' : 'black'}
+      className={`${open ? 'translate-x-full' : 'translate-x-0'} mb-[7px]`}
     />
+    <MenuBar className={open ? '-rotate-[42deg]' : 'rotate-0'} />
   </div>
 )
 

components/header/navbar/SideMenu.tsx

@@ -1,20 +1,18 @@
 import { ReactNode } from 'react'
-import { motion } from 'framer-motion'
 
 type SideMenuProps = {
   open: boolean
   children: ReactNode
 }
 
 const SideMenu = ({ open, children }: SideMenuProps) => (
-  <motion.div
-    className="fixed left-0 top-0 z-10 min-h-screen w-full overflow-x-hidden bg-darkgray px-8 py-16 descendant:mb-2 md:hidden"
-    initial={false}
-    animate={{ transform: open ? 'translateX(0)' : 'translateX(-100%)' }}
-    transition={{ duration: 0.4 }}
+  <div
+    className={`${
+      open ? 'translate-y-0' : '-translate-y-full'
+    } duration-400 fixed left-0 top-0 z-10 h-screen w-full overflow-x-hidden bg-darkgray px-4 py-16 transition ease-in-out descendant:mb-2 md:hidden`}
   >
     {children}
-  </motion.div>
+  </div>
 )
 
 export default SideMenu

components/header/navbar/TFLogoSmall.tsx

@@ -3,7 +3,6 @@ import Link from 'next/link'
 const TFLogoSmall = ({ highlight }: { highlight: boolean }) => (
   <Link href="/">
     <svg
-      className="hidden md:block"
       width={26}
       height={26}
       viewBox="0 0 26 26"

components/header/navbar/index.tsx

@@ -9,6 +9,7 @@ import classNames from 'classnames'
 import { NavbarLink, NavbarMultipleLink } from '@lib/api/navbar'
 import { useRouter } from 'next/router'
 import LoginButton from './LoginButton'
+import HeaderLink from '@components/header/navbar/HeaderLink'
 
 type NavbarProps = {
   navbarLinks: NavbarLink[]
@@ -28,14 +29,14 @@ const Navbar = ({
     <nav>
       <div
         className={classNames(
-          'flex w-full justify-between px-4 pt-2 md:items-center',
+          'flex w-full justify-between px-4 py-2 md:items-center',
           position === 'side'
             ? 'flex flex-col md:hidden'
             : 'hidden flex-row md:flex'
         )}
       >
         <div className="flex-start flex flex-col justify-between md:flex-row md:items-center">
-          <div className="mx-3">
+          <div className="mx-3 hidden md:block">
             <TFLogoSmall highlight={path === '/'} />
           </div>
           {navbarLinks.map((link) =>
@@ -48,16 +49,16 @@ const Navbar = ({
                 setSideMenuOpen={setSideMenuOpen}
               />
             ) : (
-              <Link
+              <HeaderLink
                 key={link.title}
+                title={link.title}
                 href={link.link}
+                setSideMenuOpen={setSideMenuOpen}
                 className={classNames(
                   path === link.link && '!text-teknologröd',
                   'link link-text mx-3'
                 )}
-              >
-                {link.title}
-              </Link>
+              />
             )
           )}
 
@@ -118,13 +119,15 @@ const NavbarDropdown = ({
     }
   }
 
+  const pathWithoutAnchor = path.split('#')[0]
+
   return (
     <div className="relative mx-3">
       <div
         className={classNames(
           isTop ? 'peer' : '!m-0',
-          path.startsWith(`/${link.basePath}` ?? '') &&
-            link.links.find((l) => l.link === path) &&
+          pathWithoutAnchor.startsWith(`/${link.basePath}` ?? '') &&
+            link.links.find((l) => l.link === pathWithoutAnchor) &&
             '!text-teknologröd',
           'link-text text-link'
         )}
@@ -143,18 +146,17 @@ const NavbarDropdown = ({
         >
           <div className="!m-0 py-1">
             {link.links.map(({ title, link }) => (
-              <Link
+              <HeaderLink
                 key={title}
+                title={title}
                 href={link}
+                setSideMenuOpen={setSideMenuOpen}
                 className={classNames(
                   isTop && 'py-2',
-                  link === path && '!text-teknologröd',
+                  link === pathWithoutAnchor && '!text-teknologröd',
                   'link link-text block'
                 )}
-                onClick={() => setSideMenuOpen(false)}
-              >
-                {title}
-              </Link>
+              />
             ))}
           </div>
         </div>

lib/api/contentpage.ts

@@ -10,7 +10,6 @@ export async function fetchContentPage(
     populate: {
       sections: {
         populate: ['title', 'content', 'file_folders'],
-        sort: 'title',
       },
       category: {
         populate: ['slug'],

lib/api/navbar.ts

@@ -44,7 +44,11 @@ export default async function fetchNavbar(): Promise<NavbarLink[]> {
           populate: ['links'],
         },
         categories: {
-          populate: ['name', 'slug', 'content_pages'],
+          populate: {
+            content_pages: {
+              fields: ['slug', 'title'],
+            },
+          },
         },
         private_pages: {
           populate: ['title', 'slug'],

lib/api/privatepage.ts

@@ -11,7 +11,6 @@ export async function fetchPrivatePage(
     populate: {
       sections: {
         populate: ['title', 'content', 'file_folders'],
-        sort: 'title',
       },
     },
   })

next.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   reactStrictMode: true,
   images: {
-    domains: ['tf.fi', 'cms.tf.fi', 'localhost'],
+    domains: ['tf.fi', 'cms.tf.fi', 'localhost', 'test.tf.fi'],
   },
   output: 'standalone',
 }

pages/medlem/[privatePage].tsx

@@ -23,7 +23,7 @@ const PrivatePage: NextPage<PrivatePageProps> = ({
 }: PrivatePageProps) => {
   useEffect(() => {
     if (!session) {
-      void signIn('keycloak')
+      signIn('keycloak')
     }
   }, [session])
 
@@ -36,7 +36,7 @@ export const getServerSideProps: GetServerSideProps<{
   const query = context.query.privatePage
   const slug = query instanceof Array ? query[0] : query
   const session = await getSession(context)
-  const page = session?.user.token
+  const page = session?.user?.token
     ? await fetchPrivatePage(session?.user.token, slug)
     : null
   const { logos, navbarLinks } = await getLayoutProps()

styles/links.css

@@ -25,7 +25,6 @@
   cursor: pointer;
   color: #fff;
   font-family: var(--font-montserrat), sans-serif;
-  text-transform: uppercase;
 }
 
 .link-text::before {