UI: Minimize sidebar/toggle

[williamla]

Requesting a sidebar toggle or toggle for fullscreen. Love the app, but the sidebar makes navigation on mobile a bit tricky. Thanks!

[Woahai321]

I was able to edit the App.tsx to implement this change -

(the code is probably garbage so don't judge 😂)

Add the toggle constant / function

function App() {
  const [isCollapsed, setIsCollapsed] = useState(false);

......

 function toggleCollapse() {
  setIsCollapsed(!isCollapsed);
}

Now edit your return to add in the buttons - this part was fun lol

  <Flex
    direction="column"
    h="100vh"
    overflow="hidden"
    bgColor={darkMode ? "#1e1e1e" : "white"}
    color={darkMode ? "#cbcaca" : "inherit"}
  >
   <Box
      flexShrink={0}
      bgColor={darkMode ? "#333333" : "#e8e8e8"}
      color={darkMode ? "#cccccc" : "#383838"}
      textAlign="center"
      fontSize="sm"
      py={0.5}
    >
      WoahAI - CoCode
    </Box>
    <Flex flex="1 0" minH={0}>
      {!isCollapsed && (
        <Container
          w="xs"
          bgColor={darkMode ? "#252526" : "#f3f3f3"}
          overflowY="auto"
          maxW="full"
          lineHeight={1.4}
          py={4}
        >
          <ConnectionStatus
            darkMode={darkMode}
            connection={connection}
          />

          <Flex justifyContent="space-between" mt={4} mb={1.5} w="full">
            <Heading size="sm">Dark Mode</Heading>
            <Switch
              isChecked={darkMode}
              onChange={handleDarkMode}
            />
          </Flex>

          <Heading mt={4} mb={1.5} size="sm">
            Language
          </Heading>
          <Select
            size="sm"
            bgColor={darkMode ? "#3c3c3c" : "white"}
            borderColor={darkMode ? "#3c3c3c" : "white"}
            value={language}
            onChange={(event) =>
              handleChangeLanguage(event.target.value)
            }
          >
            {languages.map((lang) => (
              <option
                key={lang}
                value={lang}
                style={{ color: "black" }}
              >
                {lang}
              </option>
            ))}
          </Select>

          <Heading mt={4} mb={1.5} size="sm">
            Share Link
          </Heading>
          <InputGroup size="sm">
            <Input
              readOnly
              pr="3.5rem"
              variant="outline"
              bgColor={darkMode ? "#3c3c3c" : "white"}
              borderColor={darkMode ? "#3c3c3c" : "white"}
              value={`${window.location.origin}/#${id}`}
            />
            <InputRightElement width="3.5rem">
              <Button
                h="1.4rem"
                size="xs"
                onClick={handleCopy}
                _hover={{
                  bg: darkMode ? "#575759" : "gray.200",
                }}
                bgColor={darkMode ? "#575759" : "gray.200"}
              >
                Copy
              </Button>
            </InputRightElement>
          </InputGroup>

          <Heading mt={4} mb={1.5} size="sm">
            Active Users
          </Heading>
          <Stack spacing={0} mb={1.5} fontSize="sm">
            <User
              info={{ name, hue }}
              isMe
              onChangeName={(name) =>
                name.length > 0 && setName(name)
              }
              onChangeColor={() => setHue(generateHue())}
              darkMode={darkMode}
            />
            {Object.entries(users).map(([id, info]) => (
              <User
                key={id}
                info={info}
                darkMode={darkMode}
              />
            ))}
          </Stack>

          <Heading mt={4} mb={1.5} size="sm">
            About
          </Heading>
          <Text fontSize="sm" mb={1.5}>
            <strong>CoCode</strong> is a collaborative text editor.
          </Text>
          <Text fontSize="sm" mb={1.5}>
            Edit code and other text with others at the same time.
          </Text>
          <Text fontSize="sm" mb={1.5}>
            Configured by WoahAI. See our{" "}
            <Link
              color="purple.600"
              fontWeight="semibold"
              href="https://github.com/woahai321"
              isExternal
            >
              GitHub
            </Link>{" "}
            for more.
          </Text>

          <Button
            size="sm"
            colorScheme={
              darkMode ? "whiteAlpha" : "blackAlpha"
            }
            borderColor={
              darkMode ? "purple.400" : "purple.600"
            }
            color={darkMode ? "purple.400" : "purple.600"}
            variant="outline"
            leftIcon={<VscRepoPull />}
            mt={1}
            onClick={handleLoadSample}
          >
            Read the code
          </Button>
        </Container>
      )}
      <Flex
        flex={1}
        minW={0}
        h="100%"
        direction="column"
        overflow="hidden"
      >
        <HStack
          h={6}
          spacing={1}
          color="#888888"
          fontWeight="medium"
          fontSize="13px"
          px={3.5}
          flexShrink={0}
        >
          <Icon
            as={VscFolderOpened}
            fontSize="md"
            color="blue.500"
          />
          <Text>documents</Text>
          <Icon as={VscChevronRight} fontSize="md" />
          <Icon
            as={VscGist}
            fontSize="md"
            color="purple.500"
          />
          <Text>{id}</Text>
        </HStack>
        <Box flex={1} minH={0}>
          <Editor
            theme={darkMode ? "vs-dark" : "vs"}
            language={language}
            options={{
              automaticLayout: true,
              fontSize: 13,
            }}
            onMount={(editor) => setEditor(editor)}
          />
        </Box>
        {isCollapsed && (
<Button
  onClick={() => setIsCollapsed(false)}
  mt={2}
  colorScheme="purple"
  variant="outline"
  bgColor="transparent"
  _hover={{
    bgColor: darkMode ? "rgba(87, 87, 89, 0.2)" : "rgba(128, 128, 128, 0.2)",
  }}
  _active={{
    bgColor: darkMode ? "rgba(87, 87, 89, 0.4)" : "rgba(128, 128, 128, 0.4)",
  }}
  size="sm"
>
  Expand menu
</Button>

        )}
{!isCollapsed && (
  <Button
    position="absolute"
    bottom=".25%"
    left="xs"
    transform="translate(-100%, -50%)"
    onClick={toggleCollapse}
  bgColor="transparent"
  _hover={{
    bgColor: darkMode ? "rgba(87, 87, 89, 0.2)" : "rgba(128, 128, 128, 0.2)",
  }}
  _active={{
    bgColor: darkMode ? "rgba(87, 87, 89, 0.4)" : "rgba(128, 128, 128, 0.4)",
  }}
  >
    {"<"}
  </Button>
)}
      </Flex>
    </Flex>
    <Footer />
  </Flex>
 );
}

export default App;

[williamla]

Are you able to open up a branch with these changes? if not, I will try doing so with these changes this weekend to test. Thanks!

[muellerj]

I can confirm that these instructions worked for me as well.

@ekzhang : Would you be willing to merge this, if someone made this into a PR?