feat: add navbar feature flag and small style update (#4364)

add navbar feature flag and small style update
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/components/FeatureFlagModal/FeatureFlagModal.tsx

 import { FeatureFlag, useUpdateFlag } from 'featureFlags'
 import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
+import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
@@ -13,7 +14,7 @@ const StyledModal = styled.div`
   position: fixed;
   display: flex;
   left: 50%;
-  top: 50%;
+  top: 50vh;
   transform: translate(-50%, -50%);
   width: 400px;
   height: fit-content;
@@ -114,6 +115,12 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.redesign}
         label="Redesign"
       />
+      <FeatureFlagOption
+        variants={Object.values(NavBarVariant)}
+        value={useNavBarFlag()}
+        featureFlag={FeatureFlag.navBar}
+        label="NavBar"
+      />
       <FeatureFlagOption
         variants={Object.values(ExploreVariant)}
         value={useExploreFlag()}

src/featureFlags/flags/navBar.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useNavBarFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.navBar)
+}
+
+export { BaseVariant as NavBarVariant }

src/featureFlags/index.tsx

@@ -55,6 +55,7 @@ export enum BaseVariant {
 
 export enum FeatureFlag {
   explore = 'explore',
+  navBar = 'navBar',
   phase1 = 'phase1',
   redesign = 'redesign',
   tokenSafety = 'tokenSafety',