[#1] Bare Skeleton with redux store, oidc and router-dom

2025-06-25 17:42:54 +02:00
parent 57f9ba8427
commit cceb83519f
32 changed files with 21256 additions and 1 deletions
@@ -0,0 +1,89 @@
+/* Basic reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.twake {
+  font-family: "Cal Sans";
+  font-weight: 400;
+  font-size: 28.07px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0.2rem;
+}
+
+.calendar {
+  font-family: "Cal Sans";
+  padding: 0.2rem;
+  font-weight: 400;
+  font-size: 28.07px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  text-align: center;
+  vertical-align: middle;
+  background: linear-gradient(180deg, #ffb73d, #f26c32);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  /* Optional for broader support */
+  background-clip: text;
+  color: transparent;
+}
+
+/* Menubar styles */
+.menubar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #1a1a1a62;
+  padding: 0.5rem;
+  color: white;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  z-index: 1000;
+}
+
+.menubar-item {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  padding: 0.5rem 1rem;
+  font-size: 1.5rem;
+}
+
+.nav-month {
+  padding-right: 2px;
+  padding-left: 2px;
+  gap: 38px;
+}
+
+.day-selector {
+  font-weight: 100;
+  font-size: small;
+}
+
+.search-bar {
+  width: 600;
+  height: 43.88999938964844;
+  top: 18px;
+  left: 887px;
+}
+
+.menu-tools {
+  width: 383.20001220703125;
+  height: 49;
+  top: 16px;
+  left: 1511px;
+  gap: 24px;
+}
+
+/* Responsive for mobile */
+@media (max-width: 768px) {
+}
@@ -0,0 +1,54 @@
+import React from "react";
+import { Auth } from "../../features/User/oidcAuth";
+import logo from "../../static/images/calendar.svg";
+import "./Menubar.css";
+import { useAppSelector } from "../../app/hooks";
+export function Menubar() {
+  return (
+    <div className="menubar">
+      <div className="menubar-item tc-home">
+        <img className="logo" src={logo} />
+        <p>
+          <span className="twake">Twake</span>
+          <span className="calendar">Calendar</span>
+        </p>
+      </div>
+      <div className="menubar-item nav-month">
+        <p>Current Month</p>
+        <p className="day-selector"> droite today gauche</p>
+      </div>
+      <div className="menubar-item search-bar">
+        <p>big search bar</p>
+      </div>
+      <div className="menubar-item menu-tools">
+        <HandleLogin />
+      </div>
+    </div>
+  );
+}
+
+function HandleLogin() {
+  const userData = useAppSelector((state) => state.user.userData);
+  if (!userData) {
+    return (
+      <button
+        onClick={async () => {
+          const loginurl = await Auth();
+          sessionStorage.setItem(
+            "redirectState",
+            JSON.stringify({
+              code_verifier: loginurl.code_verifier,
+              state: loginurl.state,
+            })
+          );
+
+          window.location.assign(loginurl.redirectTo);
+        }}
+      >
+        login
+      </button>
+    );
+  } else {
+    return <p>{userData.sub}</p>;
+  }
+}