fix: hide non-ot form navbar

src/components/Navbar/index.tsx

@@ -29,6 +29,7 @@ import { homeTool, TOOLS } from '../../constants/tools';
 import { WARGAMING_APPLICATION_ID } from '../../constants/wargamingApplicationID';
 import { imgur, ImgurSize } from '../../core/blitzkit/imgur';
 import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
+import { assertSecret } from '../../core/blitzkit/secret';
 import { PatreonIcon } from '../../icons/Patreon';
 import { WargamingIcon } from '../../icons/Wargaming';
 import strings from '../../lang/en-US.json';
@@ -98,8 +99,15 @@ export default function Navbar() {
               className={styles.tools}
             >
               {TOOLS.map((tool, index) => {
+                const unavailableOnBranch = tool.branches?.every(
+                  (branch) =>
+                    branch !==
+                    assertSecret(process.env.NEXT_PUBLIC_ASSET_BRANCH),
+                );
                 const selected = pathname.startsWith(`/tools/${tool.id}`);
 
+                if (unavailableOnBranch) return null;
+
                 return (
                   <Fragment key={tool.title}>
                     {index > 0 && <Separator orientation="vertical" size="1" />}
@@ -282,55 +290,64 @@ export default function Navbar() {
             p="3"
             pt="0"
           >
-            {tools.map((tool) => (
+            {tools.map((tool) => {
-              <Flex
+              const unavailableOnBranch = tool.branches?.every(
-                key={tool.id}
+                (branch) =>
-                onClick={() => setShowHamburgerMenu(false)}
+                  branch !== assertSecret(process.env.NEXT_PUBLIC_ASSET_BRANCH),
-                style={{
+              );
-                  position: 'relative',
+
-                  borderRadius: 'var(--radius-2)',
+              if (unavailableOnBranch) return null;
-                  overflow: 'hidden',
+
-                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.MediumThumbnail })})`,
+              return (
-                  backgroundSize: 'cover',
+                <Flex
-                  backgroundPosition: 'center',
+                  key={tool.id}
-                  aspectRatio: '2 / 1',
+                  onClick={() => setShowHamburgerMenu(false)}
-                }}
-              >
-                <Link
-                  href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
                   style={{
-                    display: 'flex',
+                    position: 'relative',
-                    width: '100%',
+                    borderRadius: 'var(--radius-2)',
-                    height: '100%',
+                    overflow: 'hidden',
-                    flexDirection: 'column',
+                    backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.MediumThumbnail })})`,
-                    textDecoration: 'none',
+                    backgroundSize: 'cover',
-                    color: 'inherit',
+                    backgroundPosition: 'center',
+                    aspectRatio: '2 / 1',
                   }}
                 >
-                  <Box
+                  <Link
-                    flexGrow="1"
+                    href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
                     style={{
-                      backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.MediumThumbnail })})`,
+                      display: 'flex',
-                      backgroundSize: 'cover',
+                      width: '100%',
-                      backgroundPosition: 'center',
+                      height: '100%',
-                    }}
+                      flexDirection: 'column',
-                  />
+                      textDecoration: 'none',
-
+                      color: 'inherit',
-                  <Flex
-                    p="2"
-                    align="center"
-                    width="100%"
-                    style={{
-                      backgroundColor: 'var(--color-panel-translucent)',
-                      backdropFilter: 'blur(4rem)',
-                      WebkitBackdropFilter: 'blur(4rem)',
                     }}
                   >
-                    <Text weight="medium">{tool.title}</Text>
+                    <Box
-                  </Flex>
+                      flexGrow="1"
-                </Link>
+                      style={{
-              </Flex>
+                        backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.MediumThumbnail })})`,
-            ))}
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                      }}
+                    />
+
+                    <Flex
+                      p="2"
+                      align="center"
+                      width="100%"
+                      style={{
+                        backgroundColor: 'var(--color-panel-translucent)',
+                        backdropFilter: 'blur(4rem)',
+                        WebkitBackdropFilter: 'blur(4rem)',
+                      }}
+                    >
+                      <Text weight="medium">{tool.title}</Text>
+                    </Flex>
+                  </Link>
+                </Flex>
+              );
+            })}
           </Grid>
         </ScrollArea>
       </Flex>