buildIn: Header variations

TobiTRy · Dec 8, 2023 · 0f1417a · 0f1417a
1 parent 2f89335
commit 0f1417a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 28 deletions.
diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx
@@ -13,6 +13,8 @@ import themeStore from '@/design/theme/themeStore/themeStore';
 import { Typography } from '@/components/atoms/Typography';
 
 import { FancyHeader } from '@/components/organisms/FancyHeader';
+import { SwitchList } from '@/components/molecules/SwitchList';
+import { FancyGrid } from '@/components/templates/FancyGrid';
 
 const Logo = () => (
   <svg
@@ -70,24 +72,43 @@ export default function HeaderRoute() {
 
   return (
     <section>
-      <FancyHeader>
-        <FancyHeader.Nav>
-          {/* <FancyHeader.Nav.Ul>
-
-            <Typography type='content'>mooin</Typography>
-            <Typography type='content'>mooin</Typography>
-            <Typography type='content'>mooin</Typography>
-            <Typography type='content'>mooin</Typography>
-          </FancyHeader.Nav.Ul> */}
-          <FancyHeader.Nav.SwitchIndicatorList>
-            <Typography type="content">mooin</Typography>
-            <Typography type="content">mooin</Typography>
-            <Typography type="content">mooin</Typography>
-            <Typography type="content">mooin</Typography>
-          </FancyHeader.Nav.SwitchIndicatorList>
-        </FancyHeader.Nav>
-        <Typography type="h1">mooin</Typography>
+      <FancyHeader externalStyle={{ height: '44px' }}>
+        <FancyGrid>
+          <FancyGrid.Item gridSpace={4}>
+            <FancyHeader.Logo>
+              <FancyHeader.Logo.Image
+                aspectRatio="1/1"
+                imageUrl="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              ></FancyHeader.Logo.Image>
+              <FancyHeader.Logo.Icon>
+                <Logo></Logo>
+              </FancyHeader.Logo.Icon>
+              <FancyHeader.Logo.Title type="h3">Mooiin</FancyHeader.Logo.Title>
+            </FancyHeader.Logo>
+          </FancyGrid.Item>
+          <FancyGrid.Item gridSpace={4}>
+            <FancyHeader.Nav externalStyle={{ width: '30%' }}>
+              <SwitchList flexBoxProps={{ flexAlign: 'center', flexJustify: 'center' }}>
+                <Typography type="content">mooin</Typography>
+                <Typography type="content">mooin</Typography>
+                <Typography type="content">mooin</Typography>
+                <Typography type="content">mooin</Typography>
+              </SwitchList>
+            </FancyHeader.Nav>
+          </FancyGrid.Item>
+          <FancyGrid.Item gridSpace={4}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+              <FancyMiniProfile
+                size={'sm'}
+                alignText="left"
+                headingText="@TobiTRy"
+                imageURL="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg"
+              />
+            </div>
+          </FancyGrid.Item>
+        </FancyGrid>
       </FancyHeader>
+
       <div style={{ marginTop: '40px' }}>
         <FancyBar
           outlined

diff --git a/src/components/molecules/FancyNavBar/FancyNavBar.tsx b/src/components/molecules/FancyNavBar/FancyNavBar.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { CSSProp, css } from 'styled-components';
 
 import { RawNav } from '@/components/atoms/RawNav';
-import { FlexBoxTemplateNav } from '@/components/molecules/FancyNavBar/utils/FlexBoxTemplateNav';
-import { SwitchIndicatorList } from './utils/SwitchIndicatorList';
 
 type TFancyNavBar = {
   children?: React.ReactNode;
@@ -26,6 +24,3 @@ export default function FancyNavBar(props: TFancyNavBar) {
     </RawNav>
   );
 }
-
-FancyNavBar.SwitchIndicatorList = SwitchIndicatorList;
-FancyNavBar.Ul = FlexBoxTemplateNav;
diff --git a/src/components/molecules/SwitchList/SwitchList.tsx b/src/components/molecules/SwitchList/SwitchList.tsx
@@ -37,7 +37,8 @@ export default function SwitchList(props: TSwitchList) {
   return (
     <FancyFlexBox
       externalStyle={css`
-        ${externalStyle} height: 100%;
+        height: 100%;
+        ${externalStyle};
       `}
       flexDirection={switchIndicator?.direction === 'vertical' ? 'column' : 'row'}
       as="ul"
@@ -50,11 +51,14 @@ export default function SwitchList(props: TSwitchList) {
 
           return (
             <FancyFlexBox
-              externalStyle={generateListItemStyle({
-                isActive: currentActive === uniqueKey,
-                hoverStyle,
-                activeStyle,
-              })}
+              externalStyle={css`
+                ${generateListItemStyle({
+                  isActive: currentActive === uniqueKey,
+                  hoverStyle,
+                  activeStyle,
+                })}
+                padding-bottom: 2px;
+              `}
               key={uniqueKey}
               {...flexBoxProps}
               as={'li'}

diff --git a/src/components/organisms/FancyHeader/FancyHeader.tsx b/src/components/organisms/FancyHeader/FancyHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Header } from '@/components/molecules/Header';
 import { FancyNavBar } from '@/components/molecules/FancyNavBar';
+import HeaderLogo from '@/components/organisms/FancyHeader/HeaderLogo/HeaderLogo';
 
 type IFancyHeader = {
   children?: React.ReactNode;
@@ -11,5 +12,6 @@ function FancyHeader(props: IFancyHeader) {
 }
 
 FancyHeader.Nav = FancyNavBar;
+FancyHeader.Logo = HeaderLogo;
 
 export default FancyHeader;