-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'andrew_testing' of github.com:andrew-bierman/PackRat in…
…to refactor/frontend-refactor
- Loading branch information
Showing
10 changed files
with
399 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
161 changes: 161 additions & 0 deletions
161
packages/app/components/navigation/Navbar/NavbarTauri.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| import React, { useMemo } from 'react'; | ||
| import { View, Text, SafeAreaView, StyleSheet, Platform } from 'react-native'; | ||
| import { RButton, Container } from '@packrat/ui'; | ||
| import { useIsMobileView } from 'app/hooks/common'; | ||
| import { useNavigate } from 'app/hooks/navigation'; | ||
| import { NavigationList } from '../NavigationList'; | ||
| import { Drawer } from '../Drawer'; | ||
| import { useScrollTop } from 'app/hooks/common/useScrollTop'; | ||
| import { useScreenWidth } from 'app/hooks/common'; | ||
| import useTheme from 'app/hooks/useTheme'; | ||
| import { RImage } from '@packrat/ui'; | ||
| import FullSideBar from '../Sidebar/SideBar'; | ||
|
|
||
| export const NavbarTauri = () => { | ||
| const { currentTheme } = useTheme(); | ||
| const scrollTop = useScrollTop(); | ||
| const { screenWidth } = useScreenWidth(); | ||
| const isScrolled = !!scrollTop; | ||
| const styles = useMemo(() => { | ||
| return StyleSheet.create(loadStyles(currentTheme, isScrolled, screenWidth)); | ||
| }, [isScrolled, currentTheme, screenWidth]); | ||
| const navigate = useNavigate(); | ||
|
|
||
| return ( | ||
| <SafeAreaView style={styles.safeArea}> | ||
| <Container> | ||
| <View style={styles.container}> | ||
| <View style={styles.logoContainer}> | ||
| <RImage | ||
| source={{ | ||
| // TODO: Update this to use the PackRat logo from the assets folder | ||
| uri: 'https://github.com/andrew-bierman/PackRat/blob/main/packages/app/assets/packrat_icon.png?raw=true', | ||
| width: 40, | ||
| height: 40, | ||
| }} | ||
| width={40} | ||
| height={40} | ||
| style={styles.logo} | ||
| alt="PackRat Logo" | ||
| onClick={() => { | ||
| navigate('/'); | ||
| }} | ||
| /> | ||
| <Text | ||
| style={styles.logoText} | ||
| onPress={() => { | ||
| navigate('/'); | ||
| }} | ||
| > | ||
| PackRat | ||
| </Text> | ||
| </View> | ||
| <FullSideBar /> | ||
| </View> | ||
| </Container> | ||
| </SafeAreaView> | ||
| ); | ||
| }; | ||
|
|
||
| const NavbarStyles = { | ||
| floatingBg: '#0284c7', | ||
| floatingRadius: 25, | ||
| floatingBlur: 'blur(2px)', | ||
| transition: 'all 0.2s ease-in-out', | ||
| floatingSpacing: 4, | ||
| }; | ||
|
|
||
| const loadStyles = (currentTheme, isScrolled, screenWidth) => { | ||
| const isWeb = Platform.OS === 'web'; | ||
| const isFloating = isWeb && isScrolled; | ||
| const backgroundColor = isFloating | ||
| ? NavbarStyles.floatingBg | ||
| : currentTheme.colors.background; | ||
|
|
||
| return StyleSheet.create({ | ||
| drawerStyles: { | ||
| backgroundColor: currentTheme.colors.background, | ||
| }, | ||
| safeArea: { | ||
| backgroundColor, | ||
| width: '100%', | ||
| margin: 0, | ||
| transition: NavbarStyles.transition, | ||
| ...Platform.select({ | ||
| web: { | ||
| ...(isFloating | ||
| ? { | ||
| backdropFilter: NavbarStyles.floatingBlur, | ||
| marginTop: NavbarStyles.floatingSpacing, | ||
| padding: NavbarStyles.floatingSpacing, | ||
| borderRadius: NavbarStyles.floatingRadius, | ||
| } | ||
| : {}), | ||
| position: 'fixed' as 'fixed' | 'relative', | ||
| top: 0, | ||
| zIndex: 100, | ||
| width: Platform.OS === 'web' ? '100vw' : '100%', | ||
| }, | ||
| }), | ||
| }, | ||
| container: { | ||
| width: '100vw', | ||
| maxWidth: '100%', // Ensure container does not exceed the viewport width | ||
| flex: 1, // Ensure container can grow to fit content | ||
| backgroundColor, | ||
| borderRadius: NavbarStyles.floatingRadius, | ||
| flexDirection: 'row', // Keep flexDirection as row for alignment | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| flexWrap: 'wrap', // Allow items to wrap | ||
| height: 60, // Ensure container takes full height of its container | ||
| padding: 16, | ||
| }, | ||
| header: { | ||
| flexDirection: 'row', // Keep flexDirection as row for initial alignment | ||
| alignItems: 'center', | ||
| justifyContent: 'space-between', | ||
| width: '100%', // Ensure header takes full width of its container | ||
| flexWrap: 'wrap', // Allow header items to wrap | ||
| }, | ||
| logoContainer: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| }, | ||
| logo: { | ||
| marginRight: 10, | ||
| cursor: 'pointer', | ||
| }, | ||
| logoText: { | ||
| color: currentTheme.colors.text, | ||
| fontSize: 38, | ||
| fontWeight: '900', | ||
| cursor: 'pointer', | ||
| }, | ||
| menuBar: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| justifyContent: 'flex-end', | ||
| paddingHorizontal: 16, | ||
| flex: 1, // Keep flexible but consider its behavior with wrapping, | ||
| flexWrap: 'wrap', // Allow items to wrap | ||
| }, | ||
| drawerTrigger: {}, | ||
| menuBarItemActive: { | ||
| // Apply styles for the active item | ||
| // ... | ||
| }, | ||
| menuBarItemTextActive: { | ||
| // Apply styles for the active item's text | ||
| // ... | ||
| }, | ||
| menuBarItemSelected: { | ||
| // Apply styles for the selected item | ||
| // ... | ||
| }, | ||
| menuBarItemTextSelected: { | ||
| // Apply styles for the selected item's text | ||
| // ... | ||
| }, | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export { Navbar } from './Navbar'; | ||
| export { NavbarTauri } from './NavbarTauri'; |
56 changes: 56 additions & 0 deletions
56
packages/app/components/navigation/Sidebar/ProfileNavigationList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React from 'react'; | ||
| import { useNavigationList } from 'app/hooks/navigation'; | ||
| import { NavigationItem } from '../NavigationItem'; | ||
| import { useIsMobileView } from 'app/hooks/common'; | ||
| import { View } from 'tamagui'; | ||
| import useTheme from '../../../hooks/useTheme'; | ||
|
|
||
| interface ProfileNavigationList { | ||
| itemStyle?: any; | ||
| onItemSelect?: (item: any) => void; | ||
| } | ||
|
|
||
| export const ProfileNavigationList = ({ itemStyle, onItemSelect }) => { | ||
| const isMobileView = useIsMobileView(); | ||
| const { currentTheme } = useTheme(); | ||
| const { navigationItems } = useNavigationList(); | ||
|
|
||
| return ( | ||
| <> | ||
| {navigationItems | ||
| ?.filter(({ href }) => href === '/profile' || href === '/logout') | ||
| .map(({ type, ...Item }, index) => { | ||
| const item = Item as any; | ||
| console.log(item); | ||
|
|
||
| return ( | ||
| <View | ||
| style={{ | ||
| width: '100%', | ||
| borderRadius: 8, | ||
| marginBottom: isMobileView ? 6 : 0, | ||
| backgroundColor: currentTheme.colors.background, | ||
| color: currentTheme.colors.white, | ||
| }} | ||
| hoverStyle={{ | ||
| bg: currentTheme.colors.secondaryBlue as any, | ||
| }} | ||
| key={item.href + index} | ||
| > | ||
| {type === 'link' ? ( | ||
| <NavigationItem | ||
| item={item} | ||
| itemStyle={itemStyle} | ||
| key={item.href + index} | ||
| onSelect={onItemSelect} | ||
| isMobileView={isMobileView} | ||
| /> | ||
| ) : ( | ||
| item.Component && <item.Component /> | ||
| )} | ||
| </View> | ||
| ); | ||
| })} | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.