Dashboard UX

website/src/components/nav-bar.tsx

@@ -1,3 +1,4 @@
+import { MdOutlineBookmark } from "react-icons/md/index"
 import * as Dailp from "src/graphql/dailp"
 import { useLocation } from "src/renderer/PageShell"
 import { DropdownNavItem } from "./dropdown-nav-item"

website/src/layout.css.ts

@@ -1,4 +1,5 @@
 import { style } from "@vanilla-extract/css"
+import { rgba } from "polished"
 import {
   colors,
   fonts,
@@ -67,3 +68,49 @@ export const siteLink = style({
 })
 
 export const contentContainer = style([row, { alignItems: "baseline" }])
+
+export const iconLink = style({
+  color: "inherit",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "44px",
+  height: "44px",
+  borderRadius: "50%",
+
+  selectors: {
+    "&:hover": {
+      backgroundColor: rgba("black", 0.15),
+    },
+  },
+})
+
+export const wrapper = style({
+  position: "relative",
+  display: "inline-flex",
+})
+
+export const tooltip = style({
+  position: "absolute",
+  bottom: "-2.5rem",
+  left: "50%",
+  transform: "translateX(-50%) translateY(-4px)",
+  visibility: "hidden",
+  transition: "all 0.15s ease",
+  padding: "0.35rem 0.6rem",
+  borderRadius: "6px",
+  background: "rgba(0,0,0,0.85)",
+  color: "white",
+  fontSize: "0.8rem",
+  whiteSpace: "nowrap",
+  pointerEvents: "none",
+  zIndex: 1000,
+
+  selectors: {
+    [`${wrapper}:hover &`]: {
+      opacity: 1,
+      visibility: "visible",
+      transform: "translateX(-50%) translateY(0)",
+    },
+  },
+})

website/src/layout.tsx

@@ -2,18 +2,22 @@ import "@fontsource/charis-sil/400.css"
 import "@fontsource/charis-sil/700.css"
 import "@fontsource/quattrocento-sans/latin.css"
 import "normalize.css"
+import { rgba } from "polished"
 import React from "react"
 import { Helmet } from "react-helmet"
+import { MdOutlineBookmark } from "react-icons/md/index"
 import Link from "src/components/link"
 import "src/style/global.css"
 import { themeClass } from "src/theme.css"
 import { LayoutClient } from "./client/layout"
+import { IconButton } from "./components"
 import NavBar from "./components/nav-bar"
 import { Environment, deploymentEnvironment } from "./env"
 import Footer from "./footer"
 import * as css from "./layout.css"
 import { MobileNav, NavMenu } from "./menu"
 import { HeaderPrefDrawer } from "./mode"
+import * as styles from "./mode.css"
 import { LoginHeaderButton } from "./pages/auth/user-auth-layout"
 import { PreferencesProvider } from "./preferences-context"
 import "./wordpress.css"
@@ -45,6 +49,7 @@ const Layout: React.FC = ({ children }) => {
               </span>
             </div>
             <LoginHeaderButton />
+            <DashboardButton color="black" />
             <HeaderPrefDrawer />
           </div>
           {/* <NavMenu menuID={2} /> */}
@@ -58,3 +63,19 @@ const Layout: React.FC = ({ children }) => {
 }
 
 export default Layout
+
+type DashboardButtonProps = {
+  color?: string
+}
+
+export const DashboardButton = ({ color }: DashboardButtonProps) => {
+  return (
+    <div className={css.wrapper} style={{ color }}>
+      <Link href="/dashboard" className={css.iconLink} aria-label="Dashboard">
+        <MdOutlineBookmark size={32} />
+      </Link>
+
+      <div className={css.tooltip}>Go to my dashboard</div>
+    </div>
+  )
+}

website/src/pages/cwkw/cwkw-layout.css.ts

@@ -105,3 +105,11 @@ export const loginHeader = style([
     },
   },
 ])
+
+export const navButtons = style([
+  {
+    display: "flex",
+    flexDirection: "row",
+    gap: "0.5em",
+  },
+])

website/src/pages/cwkw/cwkw-layout.tsx

@@ -5,6 +5,7 @@ import { Helmet } from "react-helmet"
 import { CreativeCommonsBy, Link } from "src/components"
 import Sidebar, { MobileSidebar } from "src/components/sidebar"
 import { useMediaQuery } from "src/custom-hooks"
+import { DashboardButton } from "src/layout"
 import { HeaderPrefDrawer } from "src/mode"
 import { PreferencesProvider } from "src/preferences-context"
 import { useRouteParams } from "src/renderer/PageShell"
@@ -61,8 +62,11 @@ const CWKWLayout: React.FC = ({ children }) => {
               </Link>
             </h1>
           </div>
-          <LoginHeaderButton className={css.loginHeader} />
-          <HeaderPrefDrawer color={colors.body} />
+          <div className={css.navButtons}>
+            <LoginHeaderButton className={css.loginHeader} />
+            <DashboardButton color={colors.body} />
+            <HeaderPrefDrawer color={colors.body} />
+          </div>
         </div>
       </header>
       {children}