Add hrefs to header items

Set opacity of bottom popup for locale change Fix header visualization on mozilla browsers
StudentiUniMi · Jan 1, 2024 · 15b3747 · 15b3747
1 parent 630b022
commit 15b3747
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/components/Atoms/LocalizationChangePopup.tsx b/components/Atoms/LocalizationChangePopup.tsx
@@ -18,7 +18,8 @@ const LocalizationChangePopup = () => {
         gap: 20,
         backgroundColor: theme.palette.neutralLight,
         borderTop: `1px solid ${theme.palette.neutralQuaternary}`,
-        padding: '20px 15px'
+        padding: '20px 15px',
+        opacity: '92%'
     };
 
     const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);

diff --git a/components/Header/HeaderMenu.tsx b/components/Header/HeaderMenu.tsx
@@ -21,6 +21,7 @@ const HeaderMenu = () => {
     var theme = useTheme();
     const locale = LocalizationService.strings();
     const router = useRouter();
+
     const { isPolicyAccepted, togglePolicyDialog } = useContext(GlobalContext);
     const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
@@ -43,7 +44,8 @@ const HeaderMenu = () => {
     const pivotStyles: Partial<IPivotStyles> = {
         root: { 
             color: theme.palette.neutralPrimary, 
-            fontSize: FontSizes.size24
+            fontSize: FontSizes.size24,
+            height: 44
         }
     };
 
@@ -93,7 +95,13 @@ const HeaderMenu = () => {
         dismissPanel();
     };
 
-    const dropdownOptions: IDropdownOption[] = Object.values(ItemsKeys).map(x => ({ key: x, text: texts.get(x)! }));
+    const getHref = (item: ItemsKeys) => {
+        if (item === "home") return "/";
+
+        return item;
+    };
+
+    const dropdownOptions: Array<IDropdownOption> = Object.values(ItemsKeys).map(x => ({ key: x, text: texts.get(x)! }));
 
     return (
         <div className="header-menu">
@@ -107,7 +115,14 @@ const HeaderMenu = () => {
                     theme={theme}
                     overflowBehavior={'menu'}
                 >
-                    {Object.values(ItemsKeys).map((x, _i) => <PivotItem headerText={texts.get(x)} itemKey={x} key={x} />)}
+                    {Object.values(ItemsKeys).map((x, _i) => ( 
+                        <PivotItem 
+                            headerButtonProps={{ href: getHref(x) }} 
+                            headerText={texts.get(x)} 
+                            itemKey={x} 
+                            key={x} 
+                        /> 
+                    ) )}
                 </Pivot>
             </div>
 
@@ -136,14 +151,15 @@ const HeaderMenu = () => {
 
                         <div className="mb-3">
                             {dropdownOptions.map((x, i) =>
-                                <div 
-                                    className="menu-item mb-2 pr-4 pl-4 pt-1 pb-2" 
-                                    onClick={() => handleDropdownValueChange(x)}
+                                <a 
+                                    href={String(x.key)}
+                                    className="d-flex text-decoration-none menu-item mb-2 pr-4 pl-4 pt-1 pb-2" 
+                                    onClick={(e) => { preventDefault(e); handleDropdownValueChange(x) }}
                                     key={i}
                                     style={{ backgroundColor: (x.key === selectedKey) || (selectedKey as string === "" && x.key === "home") ? theme.palette.neutralLighter : 'none', borderRadius: 25 }}
                                 >
                                     <Text variant="xLarge">{x.text}</Text>
-                                </div>
+                                </a>
                             )}
                         </div>
 
@@ -155,7 +171,7 @@ const HeaderMenu = () => {
 
                         <div className="mb-3">
                             <div style={cardStyle}>
-                                <Link href={preventVisibleHref(isPolicyAccepted, "https://t.me/unimichat")} onClick={(e) => preventDefault(e, isPolicyAccepted) && togglePolicyDialog()} className="text-decoration-none">
+                                <Link href={preventVisibleHref(isPolicyAccepted, "https://t.me/unimichat")} onClick={(e: any) => preventDefault(e, isPolicyAccepted) && togglePolicyDialog()} className="text-decoration-none">
                                     <Text variant="medium" style={{ color: "#fcfcfc" }}>{locale?.sidebar.mainGroup} <Icon iconName="ChevronRightMed" style={{ fontSize: 10 }} /></Text>
                                 </Link>
                             </div>

diff --git a/styles/index.scss b/styles/index.scss
@@ -20,11 +20,6 @@ section {
   flex-grow: 1;
 }
 
-/* Fix the visualization bug on some ugly browsers like Mozilla Night Basalmici Version */
-span {
-  font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !important;
-}
-
 h1,h2,h3,h4,h5,h6 {
   margin: 0;
   padding: 0;
@@ -329,6 +324,10 @@ svg {
   }
 }
 
+.ms-Pivot-overflowMenuButton {
+  top: -16px; // Fix issue on Fluent UI pivot component with hrefs
+}
+
 /* Fix SearchBox visualization for small height displays */
 @media only screen and (max-height: 900px) {
   #SuggestionContainer .ms-Callout-main {
@@ -430,6 +429,7 @@ footer .ms-Label {
   }
 }
 
+/* Chip shimmers */
 .chip-shimmer {
   position: relative;
   overflow: hidden;
@@ -462,4 +462,4 @@ footer .ms-Label {
       rgba(255, 255, 255, 0.2) 40%,
       transparent 60%,
       transparent 100%);
-}
+}